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