The samesite problem of cross domain cookie of Chrome browser results in abnormal access to iframe embedded pages

Want to make APP Same thing as WeChat , Can run small programs smoothly ？ | Experience will send you to Xinjiang 、 Huawei 、 Cherry keyboard ！>>>

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

Problem reduction

We've been accessing normal systems all the time , Recently, the page has not been loaded .

1. Preliminary analysis , The system is iframe Embedded third party system page , take iframe Copy the link in and you can access it separately , Eliminate problems with third-party systems .
2. Try further , Put this linked iframe Put it in a brand new html The file cannot be accessed normally , Exclude the current system iframe Loading problem .
3. Find the problem , Will be the new one html The file can be opened in the Firefox browser and can be accessed normally . The final positioning is browser compatibility , Current browser ：Google Chrome , edition 85.0.4183.102（ Official version ） （64 position ）.

Open the browser console and find the interface request message 500 wrong , The following prompt appears on the console （Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute）：

Cause analysis

Google  stay 2020 year 2 month 4 Issue No.  Chrome 80  edition （schedule：https://www.chromestatus.com/features/schedule） All third parties are blocked by default  Cookie, That is to say, all  Cookie  add  SameSite=Lax  attribute （https://www.chromestatus.com/feature/5088147346030592）, And refuse to be Secure Of Cookie Set to  SameSite=None（https://www.chromestatus.com/feature/5633521622188032）
SameSite Is to prevent cross domain transmission cookie, To prevent  CSRF  Attacks and user tracking , This is to shield from the source  CSRF  Loophole .
 About  SameSite  Introduction to properties , We can refer to Ruan Yifeng's 《Cookie  Of  SameSite  attribute 》.

 Among the above questions , When the current system accesses a third-party system , With some cookie In the past , And then by this SameSite The mechanism intercepted .

 May be in  Chrome 80  The following scenarios are affected 
 Component data returns relevant user data based on the login status of the third-party website API request 
HTTP  Local deployment 

Solution

1. Chrome The browser opens a new tab , Enter... In the address field respectively

chrome://flags/#same-site-by-default-cookies
chrome://flags/#cookies-without-same-site-must-be-secure

Then set both configurations to... As shown in the figure above Disabled

2. Don't use Google browser or downgrade Google browser to Chrome 79 Up to , And turn off automatic updates .

3. Deploy both systems on the same server , Through the same IP Homologous policy delivery cookie.

4. Buy SSL certificate , upgrade HTTP service , take API Switch to a HTTPS Protocol request , And check the response header for Set-Cookie Is it included in SameSite=None and Secure word .