基于react 单页面开发的系统,嵌入到一个iframe 系统中(不同域名)出现了cookie 无法写入的问题
实际上这个是新版本chrome 以及浏览器厂商协定的,核心就是cookie 不安全,我们要限制不安全的
访问,解决方法就是有一套新的规则,参考规则修改系统就好了
跨站cookie 获取问题
cookie 的设置可以在客户端,也可以在服务器端
- 客户端解决方案
主要是 SameSite=None; Secure,具体cookie 设置
document.cookie = 'cookie2=value2; SameSite=None; Secure';
- 服务器端
模式是一样的,只是写入cookie的模式不一样,以下是node 的参考
response.setHeader('set-cookie', [
'cookie1=value1; SameSite=Lax',
'cookie2=value2; SameSite=None; Secure',
]);
说明
对于SameSite=None 同时也需要设置Secure,同时我们需要https,而且注意测试的时候不要使用无痕模式,chrome无痕模式默认是阻止三方cookie的
所以也是不能测试的,(https://samesite-sandbox.glitch.me/ 是一个好工具,方便测试是否生效)对于web 推荐使用js-cookie 包装的比较完整,使用上简单
参考资料
https://github.com/GoogleChromeLabs/samesite-examples/issues/26
https://samesite-sandbox.glitch.me/
https://github.com/js-cookie/js-cookie
https://blog.heroku.com/chrome-changes-samesite-cookie
https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Upcoming_changes_in_cookie_handling_in_Google_Chrome
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie