來分享個 cookie 相關的內容，是前陣子合作專案測試階段遇到的問題，發生情境是，合作廠商的手機瀏覽器會無法登入會員，主要都是 IOS 用戶。
提一下目前頁面會放置在對方網站上以 iframe 使用，用戶會點擊 iframe 內登入按鈕，轉導頁面，載入對應的登入 line、facebook 網頁等等，完成登入。
桌機、手機版 登入流程
Desktop:
website (parent) => click Login => open window (child)
=> login success => postMessage to parent ( child close )
=> parent reload => done
Mobile:
website (parent) => click Login
=> redirect => login success => done- 登入流程 (簡易版)
login flow
登入是依賴 cookie，cookie 再交由後端驗證登入與否。經由測試後發現這些驗證請求都不會帶有 cookie，也就是說經由登入流程過後，cookie 沒有正確的存取到用戶的瀏覽器上。
但合作方希望能跳過以上這些步驟，載入頁面時，直接 call 後端取得 token，直接塞入頁面。
實際測試發現後端有正確建立這個 token，但就是前端 save cookie 那步驟有問題，於是開始轉向思考前端問題。
Block third-party cookie
IOS 11 開始預設開啟 prevent cross-site tracking 的設定，這會導致第三方 cookie 無法設置，例如 google analytics、facebook pixel 等等，另外也包括了 iframe 內部網頁，這符合我們的情境。
android 也同樣有這個設定，但目前沒有預設開啟。
Privacy by default
Safari’s key privacy features are enabled by default.
For example, in iOS, Intelligent Tracking Prevention
(shown in Settings as Prevent Cross-Site Tracking)
is turned on by default. Camera, microphone,
and location are set to ask for permission before granting access.官方文件: Safari Privacy Overview
解決 Block third-party Cookie
查了網路後，發現有個方法可以繞過 safari 阻擋 cookie，就是要載入該 domain 並且設定一個 cookie 在該網域上，之後 iframe 就可以設定 cookie 了。
ps.最新的 safari 13.1 擋掉了這個方法，ooxx…。
但是在 chrome，就無法這樣處理了，android 實現阻擋的方法不一樣，它是讓 third-party 可以存 cookie，但是無法取出 cookie。
若要完美處理 Block third-party Cookie 唯一解法就是改用 local Storage 或是 Session Storage，前幾天在 Line Liff 上看到也是用 Session Storage 來處理 token。
頁面無法倒轉情況
最近桌機 safari 的某個與 cookie 相關功能失效，就是因為 block third-party cookie 導致，那時同事 hotfix 做法非常簡單暴力，就是判斷 safari，直接轉導頁面過去 set cookie，再轉導回來。
心得
寫這篇是希望有人遇到 cookie 無法設定的問題，提供一些解決的方法。
另外還有 Web in app 時，也有很多狀態需要確認，每個 app 可能都有不一樣的設定，推薦大家一個 debug 工具，這工具可以會顯示 element、console、network、web storage，可以大量減少手機裝置 debug 的痛苦，web in app 無法連線桌機的 devTool 極高痛苦度。
工具: Tencent vConsole
前幾天 google 公告兩年後要全面阻擋第三方 cookie，這對於前端又是很大的考驗，看來未來要開發上，要多思考無法避免成為第三方狀況下，轉而使用 Session Storage、Local Storage。
感謝閱讀!!