Shulou(Shulou.com)06/03 Report--

What is the tragedy caused by the SameSite field in the front end of web? I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Recently, when Xiaoqian got up in the morning, some students reported that the update function in the background was invalid. after opening it, they found that the background display did report an error, as shown in the following figure.

Later, I checked and found that this request really did not send a cookie message to the background.

Because the backstage uses session to store the login status of users, if there is no cookie information here, because http itself is stateless, so I don't know which user logged in. An error like ERROR_SESSION is reported here. After meditating, various searches suddenly found a clue that this SameSite field is weird.

Introduction to SameSite field

SameSite is one of the attributes of the HTTP response header Set-Cookie. It allows you to declare whether the Cookie is limited to the first party or the same site context.

SameSite accepts the following three values:

Lax

Cookies allows it to be sent with top-level navigation and will be sent with GET requests made by third-party websites. This is the default value in the browser.

Strict

Cookies is sent only in the context of the first party, not with requests made by third-party websites.

None

Cookie will be sent in all contexts, that is, cross-domain delivery is allowed.

Note: None used to be the default value, but recent browser versions have Lax as the default value to provide considerable defense against certain types of cross-site request forgery (CSRF).

Problem solving

Since the request method here for updating the API is post, and now the default value of the SameSite field in the chrome browser is Lax, the cookie information is not sent to the background. After a round of search, it is found that the following contents need to be added to solve the problem completely.

Since our background request library is axios, we need to add a configuration item here in axios

Axios.defaults.withCredentials = true;// allows cross-domain carrying cookie information http://www.changhai120.com/

Modify the settings of the SameSite field in the chrome browser as follows:

Enter chrome://flags in the address bar

Then enter SameSite and set the following three points to Disabled

Next, restart the following browser, and then take a look at the request sent. At this time, it is found that the cookie message can be sent correctly.

After reading the above, have you mastered the method of the tragedy caused by the SameSite field in the web front end? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.