Recently, I encountered a problem in the project. There was an authorization page in the Kuaishou page for authorization, and this authorization page was placed in iframe. Customer feedback after opening the authorization page, Kuaishou directly entered the login page, and the login page was cleared from the outside page.

Problem analysis

I clicked the authorization button on my own page first and found no problem, but the same problem appeared on my colleague’s computer. And they’re all Chrome 84, Windows 10.

I found several messages on the console:

A cookie associated with a cross-site resource at http://kuaishou.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Copy the code
{loginUrl: "https://ad-login.e.kuaishou.com?sid=kuaishou.ad.ds…owUrl%3Dhttp%253A%252F%252Fad.e.kuaishou.com%252F", result: 109, error_msg: "网络连接失败，请刷新当前页面。"}
Copy the code

See kuaishou in the authorization of the use of several impassable domain names, and then in the access to login information. Remember reading in February that Chrome didn’t support third-party cookies. But I can’t be sure, because I have this message on my computer too.

I searched iframe to set the method to support third-party cookie retrieval, but did not find it.

Server setting only: SameSite=None; Secure. Because it is a third party page, so also can’t do.

Open chrome://flags/#same-site-by-default-cookies, find SameSite by default cookies set to Disable, re-test and find that the authorization page can be accessed normally. Confirm that the third-party cookie is not obtained.

Finally, the iframe can only be removed, replaced by the normal page jump authorization process.

Chrome 80 changes received after the impact

Chrome 80 changes SameSite to Lax by default. SameSite has the following three values:

  • Strict allows only one party to request with cookies, that is, the browser will only send cookies that are requested by the same site, that is, the current web URL is exactly the same as the requested target URL.
  • Lax allows some third-party requests to carry cookies
  • None sends cookies whether it is cross-site or not

Where exactly does changing from None to Lax affect Cookie sending?

Request type The sample Chrome before 80 Strict Lax None
link <a href=”…” ></a> Send a Cookie Don’t send Send a Cookie Send a Cookie
preload <link rel=”prerender” href=”…” /> Send a Cookie Don’t send Send a Cookie Send a Cookie
Get the form <form method=”GET” action=”…” > Send a Cookie Don’t send Send a Cookie Send a Cookie
Post form <form method=”POST” action=”…” > Send a Cookie Don’t send Don’t send Send a Cookie
iframe <iframe src=”…” ></iframe> Send a Cookie Don’t send Don’t send Send a Cookie
AJAX $.get(“…” ) Send a Cookie Don’t send Don’t send Send a Cookie
Image <img src=”…” > Send a Cookie Don’t send Don’t send Send a Cookie

As you can see, Post forms, IFrame, AJAX, and Image have all been changed from cross-site sending third-party cookies to non-sending in the new browser version. Be careful when using iframe and AJAX, they may be affected.

Two things to note if you want to set the SameSite= None attribute on the server:

  1. The HTTP interface is not supportedSameSite=noneIf you want to addSameSite=none, must be added at the same time on the CookieSecureProperty, indicating that the Cookie will be sent only in HTTPS mode. This can be done through Nginx with some forwarding processing to achieve the purpose of Http.
  2. Need UA detection, some older browsers cannot add SameSite= None

In some older browsers, SameSite= None is recognized as SameSite=Strict, so the server needs to perform user-agent checks on set-cookie to determine whether SameSite= None is Set

Refer to the link
  • [Chrome’s Changes Could Break Your App: Prepare for SameSite Cookie Updates

] (blog.heroku.com/chrome-chan…).

  • The SameSite property of the Cookie