✒️
Notes
  • Lirenxn's daily notes
  • Featured
    • Concurrent on fiber and requestIdleCallback
    • Deep dive eslint
      • eslint with class property
      • eslint with fix
      • eslint with jsx
    • A opinioned intro to React Hooks
      • React Hooks 1 - An Overview
      • React Hooks 2 - A mindset change
      • React Hooks 3 - Test Hooks
    • Handy tricks
    • About Micro FrontEnd
    • Same-site cookie
    • Thoughts
      • Application Security for frontend OWASP
      • Javascript this
      • React validation
  • 2020 Daily Notes
    • Notes-04-05-eslint-and-babel
    • Notes-04-03-Hard-interview-question
    • Notes-03-31-ReactContext-JS-inherit
    • Notes-03-28-digital-signing-webpack-dynamic-import-JsonRest-Promise-pattern-performance.measure()
    • Wk-notes-03-16-i18n-solution
    • Notes-03-15-Concurrent-with-requestIdleCallback
    • Notes-03-15-Micro-frontend
    • Wk-notes-03-09-micro-frontend-bootstrapper
    • Wk-notes-02-27-API-design-(g)RPC-REST-etc
    • Wk-notes-02-26-React-form-validation-Boolean-algebra-Rule-for-this-App-security-npm-devtool-tricks
    • Wk-notes-02-18-i18n-gRPC
    • Wk-notes-02-11-Gradual-rollout-webpack-vscode-auto-import
    • Note-02-09-spring-webpack
    • Wk-notes-02-06-more-webpack
    • Wk-notes-02-05-Learn-spring-webpack
    • Wk-notes-02-04-props-drilling-virtual-list
    • Wk-notes-02-03-same-site-cookie
    • Wk-notes-01-31-g-recaptcha-npmshrinkwrap
    • Wk-notes-01-30-React-ref
    • Wk-notes-01-23-remote-android
    • Wk-notes-01-23-test-hook
    • Wk-notes-01-22-about-Hooks
    • Wk-notes-01-17-bundling-browser-module-treeshake-2
    • Wk-notes-01-16-Bundling-Treeshaking-1
    • Wk-notes-01-13-npm-script-css-scroll
    • Wk-notes-01-13-touchscreen-hover-and-apis
    • Wk-notes-01-13-emotion-x
    • Wk-notes-01-10-codemod
    • Wk-notes-01-08-live-region-react-test-lib
    • Wk-notes-01-06-eslint-finalise
  • 2019 Daily Notes
    • Wk-notes-12-11-eslint-dive-vscode-debug
    • Wk-notes-12-10-eslint-dive
    • Wk-notes-12-6-splunk
    • Wk-notes-12-3-react-function-memo
    • Wk-notes-12-2-agile-test-micro-frontend
    • Wk-notes-11-29-npm-fix-aem-datalayer-test
    • Wk-notes-11-28-adobe-dataLayer
    • Wk-notes-11-27-a11y
    • Wk-notes-11-25-upgrade-preact
    • Wk-notes-11-22-a11y-n-voice-over
    • Wk-notes-11-21-Add-Typescript
    • Wk-notes-11-20-JSDoc
    • Wk-notes-11-19-A11y-Polyfill
    • Wk-notes-11-18-jest-mock
    • Wk-notes-11-15-React-Portal
    • Wk-notes-11-14-iOS-simulator-git-hooks-All-hands-testing
    • Wk-notes-11-13-i18n
    • Wk-notes-11-12-safari-remote-debug
    • Wk-notes-11-11-migrating-typescript-git-remote-label-Emotion-controlled-component
    • Wk-notes-11-08-living-pricing-arch
    • Wk-notes-11-07-vitual-box-n-onblur-for-div
    • Wk-notes-11-06-bug-race-virtual-dom-diff
    • Wk-notes-11-05-babel-loader-eslint
Powered by GitBook
On this page

Was this helpful?

  1. Featured

Same-site cookie

PreviousAbout Micro FrontEndNextThoughts

Last updated 5 years ago

Was this helpful?

Same-site cookie

TL;DR

Set-cookie: 3partycookie=value; SameSite=None; Secure to fix third party cookie break.

Quick Refresher

Set-Cookie allows server set a cookie in browser by http response.

Cookie header will be send back to server

document.cookie enables J to modify cookies

Cookie lives under browser context and could be consume whenever the page load resource from the domain

first-party cookie: set by current domain, same domain in url bar

third party cookie: set by other domain, it is used if a user want to

CSRF(Cross-Site Request Forgery): Because cookie is attached to header no matter who send it

SameSite

  • Strict cookie only used in first-party-page

  • Lax if user follows a first-party-link on the third-party-page, the cookie will be sent.

What will happen

  • Introducing network.cookie.sameSite.laxByDefault

  • SameSite=None MUST be Secure

    Always explicitly set SameSite

    Use cases:

    In <iframe/>:

    • Embedded content shared from other sites, such as videos, maps, code samples, and social posts.

    • Widgets from external services such as payments, calendars, booking, and reservation functionality.

    • Widgets such as social buttons or anti-fraud services that create less obvious <iframe/>.

    "Unsafe" requests across sites:

    When redirecting pages.

    While "unsafe" may sound slightly concerning here, this refers to any request that may be intended to change state. On the web that's primarily POST requests. Cookies marked as SameSite=Lax will be sent on safe top-level navigations, e.g. clicking a link to go to a different site. However something like a ` submission via POST to a different site would not include cookies.

    This pattern is used for sites that may redirect the user out to a remote service to perform some operation before returning, for example redirecting to a third-party identity provider. Before the user leaves the site, a cookie is set containing a single use token with the expectation that this token can be checked on the returning request to mitigate attacks. If that returning request comes via POST then it will be necessary to mark the cookies as SameSite=None; Secure.

    Remote Resources:

    A cookie to be sent over a on-page request (no redirects): <img>, <script/>, or AJAX(withCredential for XMLHttpRequest; credentails: 'include' for fetch())

    Content within a WebView:

    Remember to add SameSite=None; Secure because most of the request are from JS

    Solution:

    Set-cookie: 3partycookie=value; SameSite=None; Secure
    Set-cookie: 3partycookie-legacy=value; Secure

    Ref:

Cross Site Request Forgery (CSRF)
https://github.com/GoogleChromeLabs/samesite-examples