網站這個功能異常，竟然是因為瀏覽器封鎖第三方 COOKIES
最近如果上網看到這種標題
「Google Chrome 在 2024 年開始 Cookieless 元年」
「第三方 cookies 退場，企業主/廣告主/品牌/行銷人員該如何因應」
「隱私權政策上路，廣告流量好差」
點進去，內文毫無例外，
肯定是要開始賣一些 Martech 產品，或看似神奇的廣告技術產品，還要把各種 buzzword 塞進去。
不過本文沒有要賣東西，也不是探討廣告程式怎麼寫，
也沒有要踢爆哪家數位廣告服務吹牛吹翻天，號稱可以用再行銷喚回舊客戶、精準目標受眾，但是 cookies 跟各種資料都被瀏覽器擋光光…
只是來稍微實測與蒐集一下，
跟廣告追蹤毫無關聯的網頁功能，是否也會故障…
是不是只有 Google Chrome 在整人?
不是，其他瀏覽器在前幾年也有同樣封鎖第三方 cookies 的設定。
只是 Google Chrome 全球市占率相當高，
不少瀏覽器也幾乎只是 Chromium 核心換了個皮，
有任何動作都會引起行業相關下游廠商緊張，
但是大家是沒有權利說不同意的
圖片出自 自由亚洲电台
而且 Google 推了一個新玩意 Privacy Sandbox來取代現有的技術。
目前還在全面公測，功能完善之後，時程表定 2024 年底前就會真的把第三方 cookies 全面停用，
不是 cookies 全面停用，是跨站第三方 cookies 全面停用。
Google 怕開發者和廣告商的網頁程式壞掉，反覆一再宣傳，
一些賣各種數位廣告服務的商人也隨之起舞。
至少 Google 沒有像其他瀏覽器，在某次更新時，偷偷摸摸直接把功能加進去，並預設開啟，
讓使用者不知道為什麼某些網頁功能突然無法正常使用?
iOS Safari
2017年的 iOS 11 就開始有個「防止跨網站追蹤」功能，Apple 官方的 Safari 的隱私權和安全性設定就明文寫說，該設定會讓 Safari 會限制第三方 Cookie 和資料。
如今打開手機 Safari 設定，預設應該都是開啟的。
D-Link 的會員網頁上就有曾被 iOS 這功能荼毒過的血淚提醒:
Microsoft Edge
使用跟 Google Chrome 相同 Chromium 核心的 Microsoft Edge 也不遑多讓，
上游 Chromium 改了功能，下游 Microsoft Edge 也只能乖乖跟上。
Microsoft Edge 在設定>Cookie 和網站權限>管理及刪除 Cookie 和網站資料中，也有一個「封鎖第三方 Cookie」的開關，
但就算沒啟用，只要把防止追蹤開到「平衡」:
就可以讓網頁出現一些 Google Chrome 封鎖第三方 cookies 時，也會出現的相同症狀。
微軟自己也有數位廣告業務啊，封鎖這東西難道是要搞死自己嗎?
不用擔心，當上帝關了一扇門的時候，微軟已經把另一扇窗開好了，而且人家的窗戶比你的門還要大!
Microsoft Edge 裡面有一個允許使用書籤和瀏覽資料，來當作廣告受眾定位的開關…
允許 Microsoft 使用您的瀏覽活動 (包括歷程記錄、我的最愛、使用方式和其他瀏覽資料) 來個人化 Microsoft Edge 和 Microsoft 服務 (例如廣告、搜尋、購物與新聞)。
如果已經把 Microsoft Edge 當成主力瀏覽器，這段時間以來累積了不少行為資料，
想知道瀏覽器有沒有準確把自己的興趣分類好? 可以前往此網址查閱:
https://account.microsoft.com/privacy/ad-settings?scrolltonewtoggle=true
如果連結失效的話，可以進入 Microsoft 隱私權儀表板，最下面有個標題「更多隱私權設定」，其中有一個廣告設定，點檢閱廣告設定，可以看到上圖的畫面。
Firefox
火狐自從 2019~2020 間開始推出加強型追蹤保護，
這功能一開始就設計成會封鎖跨網站 Cookies，而且加強型追蹤保護還變成預設開啟的，想關掉還要另外設定。
而對於 Google 推出的 Privacy Sandbox 中的幾支 API，Mozilla 基金會的 Martin Thomson 曾表示反對意見Our conclusion is that we’re “negative” on Topics API。看來這波大戰的局勢就是 Google 想推新標準，但其他瀏覽器不想跟上。不過其他瀏覽器的營業主力也都不是靠廣告賺錢的…
有哪些網頁功能可能發生異常?
基本上跨站的 Cookies 有 SameSite=None; Secure 而且沒有 Partitioned 屬性，都被歸類為第三方 cookies，讀取跟寫入都會被封鎖。
所以初步可以聯想到其中一種情況，例如用 iframe 在網頁內塞入其他域名的頁面，而且會用到 cookies，最常見的像是跨域名或跨系統牽涉身份認證相關的，應該都會有問題。
Google Calendar
例如在網頁上嵌入一個 Google Calendar
用來顯示哪一天有營業，哪一天有活動?
被鎖，直接顯示不出來。
不過 Google 至少還貼心做了個提示畫面。
也許 Google 有一天會讓它能正常顯示，
以後可能改成做一個連結直接連到 Google 日曆的分享連結，或是用其他的 API 串接方式吧。
Facebook Page Plugin
一個 FB 提供的 API 粉絲專頁外掛程式，
就是在網頁上嵌入一段 JS，然後會用 iframe 生成一個 FB 粉專追蹤視窗。
本來按讚過的，現在會變成沒有按追蹤的狀態
「顯示按讚過的朋友的大頭照」功能當然也是變成空氣。
Facebook Customer Chat
一個 FB 提供的 API 洽談外掛程式，
用途是可以在店家的網站上嵌入一個聊天視窗，
使用者不用離開網頁就可以跟店家的 FB 私訊聊天…
後續還可以再串接聊天機器人功能。
之前 FB 粉專可以在「Messenger 開放平台」設定裡產生嵌入碼，
後來改到 Meta Business Suite >收件匣>右上角齒輪設定圖案>洽談外掛程式。
跟預期一樣，無法取得登入狀態，點擊後會跳一個 popup，然後又無法完成操作。
對使用者而言，還不如自己另外打開 FB 網頁，找到粉專，點擊傳送訊息按鈕(手機上要裝 Messenger APP)，或是請店家直接在網頁上放 m.me格式的 FB Messenger 網址。
補充:2024/3 月時發現 Meta Business Suite 裡面有新的提示，這功能即將走入歷史。
「洽談外掛程式即將停用: 在 2024 年 5 月 9 日，你將無法再存取洽談外掛程式的任何功能。立即生效，訪客模式的洽談外掛程式已無法使用。m.me 連結等其他功能仍可供使用。」
所以以後也不用再討論什麼網頁裡面放個 fb chat 視窗，讓客人不用跳轉到外部網站就能私訊之類的事情了。
❌幫客人開 FB 粉專，取得嵌入碼/請客人產生嵌入碼，三不五時碰到各種前端問題影響網頁上其他東西。
✅直接推 Omnicha 這種第三方的線上客服服務。
那把網站上的通訊方式改成用 LINE OA?
麻煩程度也不遑多讓，就算電腦上有裝 LINE，在電腦上點連結，最後還是會到一個「透過行動條碼加入LINE好友」要另外拿手機出來掃。
瀏覽者想傳私訊給店家，步驟多了幾步是不會怎樣，
但就看網站賣的全世界僅此一家無可取代的商品或服務，消費者會排除萬難聯絡到店家，
還是要來客訴的，怒火中燒中的消費者，然後網站上放一堆不能用的按鈕，越用越火大?
另一種 FB 的網頁訊息視窗也是，本來可以直接打字的，現在一律變成未登入的狀態。
解法大概只有使用其他外部的線上客服工具。
Facebook comment
一樣是 FB 提供的套件 留言外掛程式
只有在想要網頁有留言功能，但又不想花任何開發費用、會員功能、繁瑣的留言管理，通常就會用上這招。
這個留言是綁在網站每個頁面的 URL 上，跟FB貼文底下的留言不一樣，
所以如果網站換域名/搬家換系統導致網址結構有改，留言也都會消失。
如果是聽信「網頁上的商品評論對 SEO 有幫助」之類的，但話只聽一半，
這裡面的留言跟 Google 的 Review 結構化資料毫無關聯，
Google 也無法檢索(用 GSC 的 URL Inspection Tool 檢視爬蟲抓到 HTML 內容，可以看到留言區塊的內文不會直接在網頁上給搜尋引擎抓)，
在封鎖第三方 cookies 的情況下，根本無法留言，這功能算是武功全廢了。
謎之價目表
瀏覽網頁時發現有個網站的價目表是空白的
除非把允許第三方 cookies 打開，價錢才能正常顯示出來。
初步測試了一下，用德國、美國、台灣的 VPN 節點，無痕模式連上去這網站，都是顯示相同的美金價錢，不是那種各國不同金額的設計。
這網站的行業類別也不是像訂飯店或機票，看越多次會變越貴的那種，無法理解是有什麼特殊設計。
console 是沒有看到明顯的 js 錯誤，但是設定禁止第三方 cookies 之後，被擋的數字非常多:
Reading third-party cookie is blocked: 82 cookies, 55 requests.
Setting third-party cookie is blockedL:15 cookies, 37 requests.
但這個是產業熱門工具，就算網站打不開，想買的人還是會排除萬難。
其他
可惜 FB 的儲存按鈕 已經在 2022/9/15 停用了，不然也會列在這波的受害者名單裡。
那種會顯示是否按過讚的網頁 FB 按讚按鈕的也會受影響。
幸好以前流行一陣子的「按讚查看貼文」功能早就武功全廢，不用拖到這一波才滅亡。
其他還有一 些也會受到封鎖第三方 cookies 受影響的:
- 嵌入 Linkedin 貼文，底下只會顯示「若要查看或add a comment，請先登入」
- 把 Facebook 直播貼文嵌入網頁，無法留言，也無法按表情符號互動。不過基本上沒封鎖第三方 cookies 也是一樣，這種東西 FB 想怎麼改就怎麼改。
- 把 Facebook 貼文嵌入網頁，即使自己已經按過讚，也不會變成藍色。
- 嵌入 YT 影片時，右上角的「儲存至稍後觀看」按鈕會消失。
- Google 表單或其他各種線上表單，牽涉要先登入才能填之類的，不要用嵌入的，還是直接給表單網址比較保險。
- 一些本來是為了使用者方便，讓使用者不用裝 APP，不用另外開新視窗就能使用，把 podcast 還是什麼東西嵌入在網頁上，有部分功能如今可能無法完整使用。
Google 官方文件Audit your use of cookies提到的
– Embedded content shared from other sites, such as videos, maps, code samples, and social posts.
– Widgets from external services such as payments, calendars, booking, and reservation functionality.
– Widgets such as social buttons or anti-fraud services.
– Remote resources on a page such as <img> or <script> tags, that rely on cookies to be sent with a request (commonly used for tracking pixels and personalizing content).
Google Signin 以前有一版舊的 JS API，2023 年也宣布淘汰了。
(Google Sign-In for Web (legacy) – Deprecation and Sunset)
不過上網找一些比較舊的教學範例，硬是可以找到，例如 WFU 大大的使用 Google API 處理登入登出功能，最下面有一顆藍色的 Google 登入按鈕範例，
封鎖第三方 Cookies 時，登入後無法返回任何資料。
換成最新版的 API 就能正常使用。
其他正常的
LINE LIFF 串的登入或其他功能看起來都還正常，並沒有因為封鎖第三方 cookies 之後，變成抓不到使用者識別編號之類的。
不過這玩意大部分功能都是為了在 LINE APP 內操作，比較雷的反而是 Android 或 iOS 各有各的奇怪問題。
LiteShop 那種可以嵌在部落格內的購物表單或購物車看起來還能正常使用，
一些國外的金流服務，還是有正常帶出先前在平台輸入過的信用卡資訊
不會因為開了封鎖設定，還要每次一直重 key 卡號。
如何知道 Google Chrome 有封鎖第三方 cookies
所以，第三方 cookies 被封鎖不是什麼新鮮事，
真的有網站重要功能會出問題?
不用真的等到 Google Chrome 2024 年底把功能全面封鎖，
光是這幾年，只要使用者使用其他瀏覽器，
應該就發生很多靈異事件，綠色乖乖放再多包都沒用。
這話題在年初又這麼熱門，因為Google 從前幾年開始推動 Privacy Sandbox 計畫，
每年持續有進度更新，
宣布在 2024/1/4 日起會抽選全球 1% 的 Google Chrome 使用者，
把他們瀏覽器的第三方 cookies 功能停用。
如果工程師真的碰到使用者電腦有靈異現象，懷疑是瀏覽器封鎖第三方 cookies、跨站 cookies 無法讀取或寫入的鍋，遠端過去之後要怎麼檢查?
這批幸運中獎的使用者，進入瀏覽器設定>隱私和安全性>第三方 Cookies，
不會看到一堆選項，什麼允許第三方 Cookie、在無痕模式中封鎖第三方 Cookie、封鎖第三方 Cookie…
只會像下圖這樣:
(圖片來自預設限制 1% 的 Chrome 使用者使用第三方 Cookie)
然後打開 Devtools，在 Issues tab 中可以看到一堆 Reading/Setting third-party cookie is blocked，
然後可以看一下清單中有沒有自己程式會用到的 Cookie Name / Domain & Path。
一樣是 Devtools，把顯示已過濾的 cookies 勾起來，會看到一堆黃色被鎖爛的，顯示 This cookie was blocked due to third-party cookie phaseout.
網址列右側也會有一個眼睛圖案，點開可以看到已封鎖第三方 cookies 的提示與驚人的數量。
如何自己強制設定 Google Chrome 封鎖第三方 cookies
第一種方法，進入瀏覽器設定>隱私和安全性>第三方 Cookies，選擇封鎖第三方 Cookies。
這樣網址列會出現那個小眼睛。
DevTools 的 Issues 裡面不會特別顯示 Reading/Setting third-party cookie is blocked，
在那個黃黃的 cookies 過濾畫面，驚嘆號的訊息會變成 This cookie was blocked due to user preferences，跟真正被抽到的那 1% 不一樣。
第二種，進入 chrome://flags/#test-third-party-cookie-phaseout把選項強制改成 Enabled，然後重開瀏覽器。
(chrome flags 可能會換名字，請參考 Privacy Sandbox – 測試服務中斷。中的操作步驟)
上述提及的瀏覽器的 UI 變化與運作行為，這邊都會有，
看網頁時每一頁上方，還會多一排訊息橫條:「已啟用淘汰測試用第三方 Cookie 的功能 , 而且無法在 「設定」 頁面中寫這項功能的設定 , 如要垔新啟用第三方 Cookie , 請停用項功能並重新啟動 Chrome。」
第三方 cookies 被封鎖後，服務提供者該如何應對
先不管那些社群或外部網站工具或廣告用途的追蹤服務，
如果網頁程式是內部系統，因為某些 workaround 或特別的實作方式，導致 Reading/Setting third-party cookie is blocked 而無法正常運作?
Google 提供了幾種方向:
1.目前表定是規劃 2024 年底前全面封鎖第三方 cookies，如果有網站想要走後門申請延長執行死刑的時間，可以前往官方的表單 goo.gle/report-3pc-broken 回報第三方 Cookie 淘汰後會毀損的功能，並 針對第三方 Cookie 淘汰試用服務申請額外的遷移時間。
2.為網站的 cookies 增加額外的屬性 Cookies Having Independent Partitioned State。
3.參考 Related Website Sets 的說明，提交 PR 把網站加入白名單，並在主域名的 /.well-known/lated-website-set.json 按照規定的資料格式建好資料。
4.使用 Storage Access API 另外做一大段程式向使用者要求權限，權限有效期 30 天。
5.使用其他瀏覽器都不支援的 Federrated Credential Management API (FedCM)。
6.第三方 Cookie 結尾的準備，如果有第三方設定的 Cookie，請與協力廠商聯絡，看看他們是否計劃逐步淘汰第三方 Cookie。舉例來說，您可能需要將目前使用的程式庫版本升級、變更服務中的設定選項；如果第三方自行處理必要的變更，則不採取任何行動。
Privacy Sandbox 提供一系列新打造的瀏覽器 API，讓有相關用途的人不必使用第三方 Cookie：
– Federated Credential Management (FedCM) 提供聯合身分識別服務，可讓使用者登入網站和服務。
– Private State Tokens 能跨網站交換有限的非個人識別資訊，以便執行防詐欺和反垃圾內容。
– Topics 可按照興趣顯示廣告和內容個人化。
– Protected Audience 可啟用再行銷和自訂目標對象。
– Attribution Reporting 可評估廣告曝光和轉換。
– SharedStorage 在需要使用者交互功能的 iframe 中使用跨網站功能。
但多查了一下，這也不是什麼阿貓阿狗都能用，申請 Privacy Sandbox API 需要公司鄧白氏編號，
程式要整個改寫先不提，整個功能也還在全民公測，而且碰到使用者不更新瀏覽器一樣會有問題，真是太辛苦了。
如果碰到那種會問說為什麼瀏覽器 console 一堆 warning ，卻完全不看訊息內容的長官，基層帕魯又要準備一個完美的說法來應付這些第三方 cookies 被封鎖造成的 warning。
那如果有志從事這個產業，是不是未來一定會用 Privacy Sandbox 來取代現有的技術來做廣告行銷科技用途，馬上投入五年五百塊開始深研 Privacy Sandbox 呢?
在前期 Google 曾推動另一項 FLoC 技術，但被微軟Edge、Firefox、Amazon 等公司拒絕導入，所以在 2022/1 宣布終止 FloC，用 Privacy Sandbox 中的 Topics API 來取代。
這種推行到一半又戛然而止的產業科技歷史，是否會再度重演，猶未可知。
延伸閱讀
Safari Privacy Overview 2019 的 Apple 官方文件，簡單介紹一些包含禁止跨網站追蹤等瀏覽器的隱私保護功能。
Privacy Sandbox：更能保護網路隱私的技術
為第三方 Cookie 限制做好準備
第三方Cookie已终结，该怎么应对？
Chrome Privacy Sandbox 各表：IAB 與 Google 意見對槓 根據 IAB Tech Lab 結論， Chrome Privacy Sandbox 宛如是一枚定時炸彈，數位廣告科技產業即將經歷年來最顛簸的旅程。