新版本浏览器跨站cookie 获取问题

Posted 2021-05-19 rongfengliang-荣锋亮

基于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