HTTP Cookie 示範

以下示範內容說明瀏覽器如何處理 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 值,這會影響瀏覽器處理這些標頭的方式。

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

瞭解詳情:

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

示範: javascript-cookie.glitch.me

示範網頁上包含的 JavaScript 會設定 Cookie:

document.cookie = 'cat=tabby';

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

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

這個示範包含兩個網頁,分別位於不同網站

每個頁面都包含:

  • 其他網站的圖片。
  • 其他網站的連結。

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

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

請前往示範頁面,瞭解瀏覽器在追蹤連結和載入圖片時,如何以不同方式處理 SameSite=Lax Cookie。

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

這個示範包含兩個網站:

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

example-a.glitch.meexample-b.glitch.me 之間瀏覽時,追蹤器 iframe 的內容會更新,顯示 tracker-site.glitch.me 正在追蹤您在這兩個網站上的活動。(未嵌入任何其他網站)。

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

跨網站 Cookie 追蹤示範:example-a.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() 呼叫,而 3p-site.glitch.me/fetch 會在回應中設定 fetch=true Cookie。

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

瞭解詳情