以下示範內容說明瀏覽器如何處理 Cookie,視 Cookie 的使用方式而定:
- 第一方 Cookie:由您造訪的網站設定。
- 第三方 Cookie:由其他網站設定。
第一方 Cookie 示範
示範: 1pc.glitch.me
示範網頁包含圖片和 iframe,與頂層網頁來自同一個網站。
回應圖片和 iframe 的要求時,都會附上 Set-Cookie
標頭,但 Set-Cookie
標頭的 Path
和 Max-Age
值不同。
第三方 Cookie 示範
示範: 3pc.glitch.me
示範網頁上的圖片和 iframe 來自其他網站: 3p-site.glitch.me。
要求圖片和 iframe 時,回應中都會包含 Set-Cookie
標頭。不過,圖片和 iframe 的 Set-Cookie
回應標頭各有不同的 SameSite
值,這會影響瀏覽器處理這些標頭的方式。
本示範說明瀏覽器限制、使用者設定、開發人員標記或企業政策,如何封鎖第三方 Cookie。
瞭解詳情:
JavaScript Cookie 示範
示範: javascript-cookie.glitch.me
示範網頁上包含的 JavaScript 會設定 Cookie:
document.cookie = 'cat=tabby';
設定完成後,系統會在對 javascript-cookie.glitch.me 上的資源提出要求時,一併傳送 Cookie。由於這是由您造訪的網站設定,因此視為第一方 Cookie。如果跨網站 iframe 中呼叫了相同的 JavaScript,瀏覽器會將其視為第三方 Cookie。

SameSite Cookie 示範
這個示範包含兩個網頁,分別位於不同網站
每個頁面都包含:
- 其他網站的圖片。
- 其他網站的連結。
這兩個網站都會在回應要求時設定 Cookie,並使用預設的 SameSite
值 Lax
。
SameSite=Lax
允許在回應跨網站導覽要求 (點選連結) 時設定 Cookie,但不允許在其他跨網站要求 (例如載入圖片) 時設定 Cookie。
請前往示範頁面,瞭解瀏覽器在追蹤連結和載入圖片時,如何以不同方式處理 SameSite=Lax
Cookie。

跨網站 Cookie 追蹤示範
這個示範包含兩個網站:
example-a.glitch.me 和 example-b.glitch.me 的首頁都包含來自 tracker-site.glitch.me 的 iframe,這個 iframe 會使用 Cookie 追蹤嵌入 iframe 的網頁瀏覽活動。
在 example-a.glitch.me 和 example-b.glitch.me 之間瀏覽時,追蹤器 iframe 的內容會更新,顯示 tracker-site.glitch.me 正在追蹤您在這兩個網站上的活動。(未嵌入任何其他網站)。
本示範會說明追蹤器如何使用 Cookie 記錄您在不同網站的活動。

追蹤像素示範
這個示範包含兩個網站:
兩者都包含來自 tracking-pixel-server.glitch.me 的單一像素圖片, 因此系統可使用 Cookie 追蹤您在包含該圖片的網站上的活動。
這兩個網頁也包含來自 tracking-pixel-server.glitch.me 的 iframe,可顯示包含追蹤像素的網頁記錄到的網頁造訪次數。
這項示範說明如何搭配使用追蹤像素和 Cookie,記錄您在多個網站上的活動。

擷取 Cookie 示範
這個網頁包含的 JavaScript 會對 3p-site.glitch.me/fetch
進行跨網站 fetch()
呼叫,而 3p-site.glitch.me/fetch
會在回應中設定 fetch=true
Cookie。
