指南

什麼是 Cookie?網站如何記住你

Cookie 是網站請求你的瀏覽器儲存、並在之後每次造訪該網站時送回的一小段文字。這就是網站「記得」你的方式:記得你已登入、購物車裡有什麼、你選了哪種語言。Cookie 只是資料,不是程式,但因為它們能識別你,所以對安全性與隱私都很重要。

為什麼用 AI 建置時這很重要

Cookie 位於你向 AI 製作工具要求的幾項功能底層,而且常常在對話中從未提到「Cookie」這個字:

  • 登入。 在大多數網頁 app 中,「保持登入」就是靠工作階段 Cookie 實現的。這個 Cookie 如何設定,決定了它有多容易被竊取。
  • 購物車與偏好設定。 能在頁面重新整理後保留的購物車,通常依賴 Cookie 或瀏覽器儲存空間。
  • 分析與廣告。 加入 Google Analytics、Meta 像素或聊天小工具,通常會加入來自其他公司的 Cookie。
  • 法律通知。 在許多地方,部分 Cookie 必須先取得訪客同意,這就是 Cookie 橫幅的由來。

如果你知道你的 app 設定了哪些 Cookie,以及為什麼,你就能對安全性設定、同意機制與隱私政策做出更好的選擇。

日常的比喻

想像寄衣帽間的號碼牌。你把外套交給櫃檯,拿到一個有號碼的牌子。這張牌子上並沒有外套,只有一個號碼。每次你回到櫃檯時,出示號碼牌,服務員就知道哪件外套是你的。

工作階段 Cookie 的運作方式相同。當你登入時,伺服器會把你的資料保存在它那一端,並給你的瀏覽器一張號碼牌:一個很長的隨機 ID。你的瀏覽器在每次請求時都會出示這張牌,伺服器則會查出你是誰。任何複製到這張號碼牌的人,都能取走外套,這就是登入 Cookie 需要保護的原因。

Cookie 實際如何運作

  1. 你造訪一個網站。伺服器的回應包含類似這樣的標頭:Set-Cookie: session_id=8f3k...; HttpOnly; Secure; SameSite=Lax。
  2. 你的瀏覽器會儲存它,並與該網站的網域綁定。
  3. 之後每次對同一個網站發出請求時,瀏覽器都會自動加上 Cookie: session_id=8f3k...。
  4. 伺服器讀取它,就知道是你。

頁面的 JavaScript 也可以建立 Cookie,但最重要的 Cookie(登入工作階段)應由伺服器設定,並對 JavaScript 隱藏。

Cookie 的類型

類型意義範例
工作階段 Cookie沒有到期日;瀏覽器工作階段結束時刪除一個短暫的結帳步驟
持續性 Cookie有到期日(Expires 或 Max-Age),重新啟動後仍會保留「記住我 30 天」
第一方由網址列中的網站設定你在該網站上的登入
第三方由嵌入頁面中的另一個網域設定廣告網路的追蹤 ID
嚴格必要使用者所要求的服務所需登入工作階段、購物車
非必要對網站擁有者而言是加分的分析、廣告、A/B 測試

瀏覽器已逐步限制第三方 Cookie,因為它們被用來跨網站追蹤人們。現在有幾款主流瀏覽器預設會封鎖其中許多,而且細節仍在變動,因此不要把重要的功能建立在第三方 Cookie 之上。

實例:一家小型線上商店

假設你建置了一間販售手工蠟燭的商店。以下是一個合理的版本會設定的 Cookie,以及原因。

session:當店主或顧客登入時設定。它只保存一個隨機 ID;真正的工作階段資料保存在伺服器上。設定:HttpOnly(頁面腳本無法讀取)、Secure(只會透過 HTTPS 送出)、SameSite=Lax(在多數由其他網站發起的請求中不會送出)。屬於嚴格必要。

cart_id:讓未登入的訪客保留購物車。它指向保存在資料庫中的購物車。屬於嚴格必要,因為訪客是主動要求把商品加入購物車。

theme:記住深色模式。這可以是 Cookie,但它從不需要傳到伺服器,因此瀏覽器的 localStorage 比較簡單。

分析 Cookie:如果你安裝了分析工具才會加入。這些屬於非必要。在歐盟與英國,它們通常需要先取得同意才能設定,因此分析腳本應等到訪客按下「接受」之後才載入。

請注意,這間商店「不」把什麼放進 Cookie:顧客的姓名、地址或信用卡資料。Cookie 會隨每次請求一起傳送,並存放在使用者的裝置上,因此它們應該只保存 ID,而不是個人資料。

常見名詞解釋

名詞意義
Cookie瀏覽器儲存並送回網站的一組小型名稱與值。
Set-Cookie伺服器用來建立或更新 Cookie 的回應標頭。
工作階段(Session)伺服器上對已登入使用者的紀錄,與 Cookie ID 相連。
HttpOnly阻止頁面 JavaScript 讀取 Cookie,可限制遭注入腳本造成的損害。
SecureCookie 只會在加密的 HTTPS 連線上送出。
SameSite控制 Cookie 是否會在來自其他網站的請求中送出(Strict、Lax 或 None)。
Expires / Max-AgeCookie 應該何時被刪除。
Domain / Path網站上哪些位址會接收該 Cookie。
localStorage頁面程式碼可以讀取、但不會自動送到伺服器的瀏覽器儲存空間。
XSS跨網站腳本攻擊:攻擊者的腳本在你的頁面中執行,可能會嘗試竊取資料。
CSRF跨站請求偽造:讓瀏覽器在另一個網站的誘導下,帶著你的 Cookie 送出請求。
Cookie 同意在設定非必要 Cookie 之前,先徵求訪客的許可。

常見錯誤與迷思

  • 「Cookie 是病毒。」 它們只是純文字,無法在你的電腦上執行程式碼。
  • 把敏感資料放進 Cookie。 只存放隨機 ID,並把詳細資料保存在伺服器上。
  • 把登入權杖放在 localStorage。 頁面上執行的任何腳本都能讀取 localStorage,包括被注入的腳本。HttpOnly Cookie 則完全無法被頁面腳本讀取。
  • 缺少 Secure 與 HttpOnly。 這兩個旗標成本很低,卻能堵住常見的漏洞。
  • 以為橫幅就涵蓋了一切。 如果橫幅還沒有人按下「接受」,分析工具就已經載入,那等於沒有發揮作用。
  • 忘記登出。 登出時應該同時刪除 Cookie,並在伺服器上結束工作階段,這樣被複製的 Cookie 就會失效。
  • 「如果我不使用 Cookie,隱私規定就不適用。」 GDPR 等規定涵蓋的是個人資料,不論它儲存在哪裡,包括 localStorage、裝置指紋與伺服器紀錄。

向你的 AI 製作工具要求什麼

  • 「列出 app 設定的每一個 Cookie,說明其用途、有效時間,以及是否屬於嚴格必要。」
  • 「登入工作階段請使用 HttpOnly、Secure、SameSite=Lax 的 Cookie。不要把驗證權杖放在 localStorage。」
  • 「Cookie 中只保留隨機的工作階段 ID;工作階段資料保存在伺服器上。」
  • 「登出時,清除 Cookie,並在伺服器上使工作階段失效。」
  • 「在訪客接受之前,不要載入分析或行銷腳本,並記住他們的選擇。」
  • 「在隱私政策中加入一段簡單的 Cookie 說明,內容與上述清單相符。」

關於同意的部分,請參閱如何加入 Cookie 同意。若想了解 Cookie 如何與登入搭配,請閱讀什麼是驗證。

Mythex 中的 Cookie

Mythex 不為你的 app 使用者提供內建登入,因此你的 app 所設定的 Cookie,來自它自己的程式碼,以及你加入的工具,例如你所選驗證方式產生的工作階段 Cookie。在聊天中要求 AI 代理列出它們、加強其設定,或加入 Cookie 同意橫幅,並在發布前於即時預覽中檢查結果。文件中的為 app 加入登入配方是很好的起始提示,而為你建置的 app 做安全防護則說明如何讓金鑰與機密不會暴露在瀏覽器中。

常見問題

網站上的 Cookie 是什麼?

Cookie 是網站請求你的瀏覽器儲存的一小段文字。之後你每次對該網站發出請求時,瀏覽器都會把它一併送回,讓網站能記住某些事情,例如你是否已登入,或購物車裡有什麼。

Cookie 危險嗎?

Cookie 只是資料,不是程式,因此無法執行程式碼,也不會感染電腦。真正的疑慮在於隱私(第三方 Cookie 跨網站追蹤你時)與安全(登入 Cookie 被竊取,並被用來冒充你時)。

第一方與第三方 Cookie 有什麼不同?

第一方 Cookie 是由你網址列中的網站設定的,例如登入 Cookie。第三方 Cookie 則是由嵌入頁面中的另一個網域設定的,例如廣告網路,通常用來追蹤你跨越多個網站的行為。

我需要 Cookie 同意橫幅嗎?

這取決於你的使用者在哪裡,以及你使用了哪些 Cookie。在歐盟與英國,分析或廣告等非必要 Cookie 通常需要先取得同意,而嚴格來說對服務必要的 Cookie(例如登入工作階段)通常不需要。請確認適用於你的規定。

Cookie 和 localStorage 有什麼不同?

兩者都把資料儲存在瀏覽器中。Cookie 會在每次請求時自動送到伺服器,適合用於登入。localStorage 則留在瀏覽器中,只會被頁面自己的程式碼讀取,適合用於像主題這類偏好設定。

Mythex · Pricing · 用 AI 打造任何東西 · 網站與應用程式範本 · Mythex 比較 · AI 應用程式開發詞彙表 · 免費的 AI 應用程式開發工具 · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港)