HTTP Cookie 示範

下列示範說明瀏覽器如何處理 Cookie:

  • 第一方 Cookie:由您造訪的網站設定。
  • 第三方 Cookie:由其他網站設定。

👉 示範:1pc.glitch.me

示範頁面包含圖片和 iframe,這些元素來自頂層網頁所在的網站。

圖片和 iframe 的請求回應都包含 Set-Cookie 標頭,但 Set-Cookie 標頭具有不同的 PathMax-Age 值。

第一方 Cookie 示範網站 1pc.glitch.me

👉 示範:3pc.glitch.me

示範頁面上的圖片和 iframe 來自其他網站:3p-site.glitch.me

圖片和 iframe 要求的回應中都會包含 Set-Cookie 標頭。不過,圖片和 iframe 的 Set-Cookie 回應標頭各自具有不同的 SameSite 值,這會影響瀏覽器處理圖片和 iframe 的方式。

這個示範影片說明瀏覽器限制、使用者設定、開發人員標記或企業政策如何封鎖第三方 Cookie。

瞭解詳情:

第三方 Cookie 示範網站 3pc.glitch.me

👉 示範:javascript-cookie.glitch.me

示範頁面中包含的 JavaScript 會設定 Cookie:

document.cookie = 'cat=tabby';

設定完成後,系統會在 javascript-cookie.glitch.me 上,將 Cookie 納入資源要求。由於這類 Cookie 是由您造訪的網站設定,因此屬於第一方 Cookie。如果在跨網站 iframe 中呼叫相同的 JavaScript,瀏覽器會將其視為第三方 Cookie。

JavaScript Cookie 示範網站 javascript-cookie.glitch.me

這個示範包含兩個網頁,每個網頁都位於不同的網站

👉 samesite-a.glitch.me
👉 samesite-b.glitch.me

每個頁面都包含:

  • 其他網站上的圖片。
  • 另一個網站的連結。

兩個網站都會在回應要求時設定 Cookie,使用預設的 SameSiteLax

SameSite=Lax 可讓您在回應跨網站導覽要求 (點選連結) 時設定 Cookie,但不適用於其他跨網站要求 (例如載入圖片)。

請參閱示範頁面,瞭解瀏覽器在追蹤連結和載入圖片時,如何處理 SameSite=Lax Cookie。

Samesite Cookie 示範網站 samesite-a.glitch.me

這個示範包含兩個網站:

👉 example-a.glitch.me
👉 example-b.glitch.me

example-a.glitch.meexample-b.glitch.me 的首頁都包含來自 tracker-site.glitch.me 的 iframe,後者會使用 Cookie 追蹤 iframe 嵌入的網頁瀏覽活動。

當您在 example-a.glitch.meexample-b.glitch.me 之間切換時,追蹤器 iframe 的內容會更新,顯示 tracker-site.glitch.me 會追蹤您在這些網站上的活動。(不會嵌入任何其他網站)。

這段示範影片會說明追蹤器如何使用 Cookie 記錄您在不同網站上的活動。

跨網站 Cookie 追蹤示範:example-a.glitch.me

追蹤像素示範

這個示範包含兩個網站:

👉 tracking-pixel-a.glitch.me
👉 tracking-pixel-b.glitch.me

這兩種圖片都包含來自 tracking-pixel-server.glitch.me 的單像素圖片,可讓 Cookie 用於追蹤您在包含圖片的網站上的活動。

這兩個網頁也包含來自 tracking-pixel-server.glitch.me 的 iframe,可顯示網頁的瀏覽次數記錄,前提是該網頁含有追蹤像素。

這個示範影片會說明如何搭配使用追蹤像素和 Cookie,記錄您在多個網站上的活動。

追蹤像素示範:tracking-pixel-a.glitch.me

👉 示範:fetch-cookie.glitch.me

這個頁面所含的 JavaScript 會對 3p-site.glitch.me/fetch 發出跨網站 fetch() 呼叫,並在回應中設定 fetch=true Cookie。

跨網站擷取 Cookie 示範:fetch-cookie.glitch.me

瞭解詳情