Problems encountered

Recently, when I was developing a project in localhost, I encountered that I had logged in clearly, but the interface kept returning that I had not logged in, and I found that the interface did not carry cookies.

The reasons are as follows:

In Chrome 51, the SameSite attribute is added to cookies to prevent user behavior tracking and CSRF attacks caused by cross-domain cookie carrying. In Chrome 80, the default SameSite attribute is None. Cross-domain requests can carry cookies. After Chrome upgraded to version 80, the default value of the cookie’s SameSite property changed from None to Lax, causing some problems when accessing cross-domain cookies!

So what is SameSite?

Is a property added to the browser Cookie to prevent CSRF attacks and user tracking.

SameSite has three values:

1. Strict is the strictest and completely forbids third-party cookies. Cookies are lost whenever they cross sites. The user experience is very bad.
Set-Cookie: CookieName=CookieValue; SameSite=Strict;
Copy the code
2, Lax chrome>80) is slightly stricter, and in most cases also disallows third-party cookies. The exception is GET requests that navigate to the target url.
Set-Cookie: CookieName=CookieValue; SameSite=Lax;
Copy the code
3, None (Chrome <80 None is the default) Chrome >80 because lax is the default, only third party GET request can carry cookie, if post cross-domain request will cause cookie loss. You need to manually set SameSite to None(if you must also set the Secure property (cookies can only be sent over HTTPS)).

Invalid code

Set-Cookie: widget_session=abc123; SameSite=None
Copy the code

Effective code

Set-Cookie: widget_session=abc123; SameSite=None; Secure
Copy the code

Based on the above, it’s not hard to see how simply setting the SameSite property to None solves our problem.

Specific solutions are as follows:

1. By changing your browser Settings

MAC:
1.1 Method 1: Manually open Chrome

chrome://settings/safetyCheck

chrome://flags/

If version < 91 set the following:

Else if version >= 91

Relaunch Chrome

1.2 Second method: Open Chrome with cookies on the CLI

Note: You need to close all browser Windows and exit Chrome after operation

open -a "Google Chrome" --args --disable-features=SameSiteByDefaultCookies
Copy the code
open -a "Microsoft Edge" --args --disable-features=SameSiteByDefaultCookies
Copy the code

Note: In the Mac system, if the problem persists, restart the browser and run the command again. The command takes effect only after you close and exit the browser.

else if version >= 94
The flags #same-site-by-default-cookies and #cookies-without-same-site-must-be-secure have been removed from chrome://flags as of Chrome 91, as the behavior is now enabled by default. In Chrome 94, the command-line flag --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure will be removed.
Copy the code

After 94, disabling the SameSite default via the command line will be removed. 1.1 methods 1 and 1.2 methods 2 will not work, so only Nginx agent 3 or software can convert cross-domain requests to non-cross-domain requests.

windows

Open the Chrome shortcut properties, add — disable-Features =SameSiteByDefaultCookies after the target, click OK, close all Chrome Windows including Chrome browser and restart the browser to start the project.

windows

2. By setting the backend response header

Set-Cookie: widget_session=abc123; SameSite=None; Secure

3, by changing the location configuration of Nginx

proxy_cookie_path / “/; httponly; secure; SameSite=None”;

4, idle above three still need to operate, you can directly switch to Firefox and other non-Chrome browsers for local development