useCookie函式：管理SSR環境下的Cookie

Amd794發表於2024-07-13
Cookie函式

title: useCookie函式：管理SSR環境下的Cookie
date: 2024/7/13
updated: 2024/7/13
author: cmdragon

excerpt:
摘要：本文詳述了useCookie函式在伺服器端渲染(SSR)中的應用，包括讀寫Cookie、配置選項如maxAge、expires、httpOnly、secure、domain、path及SameSite，並提供了encode、decode、default、watch等高階用法示例，以及如何在API路由中操作Cookie。

categories:

  • 前端開發

tags:

  • Nuxt3
  • SSR
  • Cookies
  • HTTP
  • 安全
  • 程式設計
  • 前端

image

image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

useCookie 是一個在伺服器端渲染（SSR）環境中管理 Cookie 的工具函式。它允許開發者在頁面、元件或外掛中讀取和寫入 Cookie。這個函式透過建立一個響應式引用（ref）來管理 Cookie 的值，並自動將 Cookie 的值序列化和反序列化為 JSON 格式，以確保在不同環境（如瀏覽器和伺服器）之間的一致性。

基本用法

useCookie 函式接受兩個引數：

  1. name：這是一個字串，用於標識特定的 Cookie。
  2. options：這是一個物件，包含了用於配置 Cookie 的選項。

簡單示例

下面的示例建立了一個名為counter的cookie。如果該cookie不存在，它將被初始設定為一個隨機值。每當我們更新counter變數時，cookie也會相應地更新。

app.vue

<script setup>
const counter = useCookie('counter')

counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

<template>
  <div>
    <h1>計數器: {{ counter || '-' }}</h1>
    <button @click="counter = null">重置</button>
    <button @click="counter--">減少</button>
    <button @click="counter++">增加</button>
  </div>
</template>

options選項

maxAge / expires

maxAge

  • 用途：maxAge 用於指定cookie在客戶端儲存的時間長度（以秒為單位）。
  • 優先順序：當 maxAge 和 expires 同時設定時，maxAge 優先。這意味著如果設定了 maxAge，則不會使用 expires。
  • 客戶端行為：如果設定了 maxAge，cookie將在伺服器設定的時間後過期，即使瀏覽器關閉也會保留。
  • 示例：Set-Cookie: mycookie=123; max-age=3600;

expires

  • 用途：expires 用於指定cookie的過期時間，它是一個特定的日期和時間，格式為 Wdy, DD-Mon-YYYY HH:MM:SS GMT。
  • 客戶端行為：如果設定了 expires，cookie將在這個日期和時間後過期，無論瀏覽器是否關閉。
  • 示例：Set-Cookie: mycookie=123; expires=Thu, 01 Dec 2023 12:00:00 GMT;

同時設定 maxAge 和 expires

  • 規範：根據cookie儲存模型規範，如果同時設定了 maxAge 和 expires，則 maxAge 應該優先。
  • 相容性：儘管規範如此，但並非所有客戶端都會嚴格遵循這一規定。因此，如果需要確保cookie的過期行為一致，應該在伺服器端只設定一個。
  • 示例：如果需要同時設定，確保它們指向相同的日期和時間。

預設行為

  • 無設定：如果沒有設定 maxAge 和 expires，cookie將僅在會話期間存在，這意味著一旦使用者關閉瀏覽器，cookie將被刪除。

實際應用

在實際應用中，通常建議只使用 maxAge 或 expires 中的一個，以避免潛在的不一致性和相容性問題。如果需要cookie在使用者關閉瀏覽器後仍然存在，可以使用 maxAge。如果需要cookie在特定日期和時間後過期，則使用 expires。

以下是一個使用 maxAge 和 expires 的示例：

// 使用 maxAge
res.setHeader('Set-Cookie', 'mycookie=123; max-age=3600;');

// 使用 expires
res.setHeader('Set-Cookie', 'mycookie=123; expires=Thu, 01 Dec 2023 12:00:00 GMT;');

httpOnly

httpOnly 是一個用於設定cookie屬性的布林值，它的主要目的是增強Web應用程式的安全性。

httpOnly 屬性的用途

  • 用途：當 httpOnly 設定為 true 時，它會指示瀏覽器不允許透過JavaScript的 document.cookie API訪問該cookie。這意味著，即使cookie儲存在使用者的瀏覽器中，也無法透過客戶端指令碼（如JavaScript）讀取它。
  • 安全性：這個屬性可以防止跨站指令碼攻擊（XSS），因為即使攻擊者透過指令碼注入攻擊控制了使用者的會話，他們也無法透過指令碼獲取到設定了 httpOnly 的cookie。

設定 httpOnly

  • 值：httpOnly 可以是 true 或 false。如果是 true，則設定HttpOnly屬性；如果是 false 或未設定，則不設定HttpOnly屬性。
  • 預設值：預設情況下，httpOnly 屬性是不設定的。

實際應用

在實際應用中，建議對所有涉及身份驗證、敏感資訊的cookie設定 httpOnly 屬性。例如，對於儲存使用者會話ID的cookie，應該始終設定 httpOnly。

以下是如何在設定cookie時使用 httpOnly 屬性的示例：

// 設定 httpOnly 為 true
res.setHeader('Set-Cookie', 'sessionToken=abc123; httpOnly;');

// 在某些伺服器框架中，可能需要這樣設定
// res.cookie('sessionToken', 'abc123', { httpOnly: true });

注意事項

  • 當 httpOnly 設定為 true 時，請確保您的JavaScript程式碼中不要嘗試透過 document.cookie 訪問該cookie，因為這會導致錯誤。
  • 由於 httpOnly cookie不能透過客戶端指令碼訪問，因此如果您需要在客戶端指令碼中使用這些cookie（例如，用於客戶端邏輯或顯示），則需要考慮其他方法來安全地傳輸所需的資訊。

透過使用 httpOnly，您可以顯著提高應用程式的安全性，減少XSS攻擊的風險。

secure

secure 是另一個用於設定cookie屬性的布林值，它的目的是確保cookie僅透過安全的HTTPS連線傳送到伺服器。下面是關於 secure 屬性的詳細資訊：

secure 屬性的用途

  • 用途：當 secure 設定為 true 時，cookie將只透過HTTPS連線傳送。這意味著如果瀏覽器嘗試透過不安全的HTTP連線傳送設定了 secure 屬性的cookie，瀏覽器會忽略這個cookie，並且不會將其傳送到伺服器。
  • 安全性：這個屬性有助於防止中間人攻擊，因為它確保了cookie在客戶端和伺服器之間傳輸時的加密。

設定 secure

  • 值：secure 可以是 true 或 false。如果是 true，則設定Secure屬性；如果是 false 或未設定，則不設定Secure屬性。
  • 預設值：預設情況下，secure 屬性是不設定的。

實際應用

在實際應用中，對於包含敏感資訊的cookie，如會話cookie，通常建議設定 secure 屬性為 true。

以下是如何在設定cookie時使用 secure 屬性的示例：

// 設定 secure 為 true
res.setHeader('Set-Cookie', 'sessionToken=abc123; secure;');

注意事項

  • HTTPS連線：當 secure 設定為 true 時，如果網站沒有啟用HTTPS，那麼設定了 secure 屬性的cookie不會被髮送到伺服器。這可能導致使用者在瀏覽器中看到“無法連線到伺服器”的錯誤訊息，或者在某些情況下，可能導致所謂的“hydration錯誤”，即伺服器無法識別客戶端傳送的cookie。
  • 混合內容：如果網站中包含一些透過HTTP載入的靜態資源（如圖片、CSS、JavaScript檔案），並且設定了 secure 屬性的cookie，那麼這些資源可能會因為瀏覽器嘗試傳送安全的cookie而不被正確載入。
  • 相容性：大多數現代瀏覽器都支援 secure 屬性，但在某些舊版瀏覽器中可能不支援。

domain

domain 屬性在設定 Set-Cookie 的時候用於指定 cookie 的作用域。這個屬性允許你定義 cookie 可以被哪些子域名或頂級域訪問。預設情況下，cookie 只在當前請求的域內有效。

domain 屬性的用途

  • 定義作用域：domain 屬性允許你指定 cookie 的作用域，使得 cookie 可以在指定的域及其所有子域下被訪問。
  • 跨域共享：透過設定 domain 屬性，可以讓 cookie 跨越多個子域共享，這對於需要在不同子域間共享狀態資訊的網站特別有用。

實際應用

以下是如何在設定 cookie 時使用 domain 屬性的示例：

// 設定 domain 為 'example.com'
res.setHeader('Set-Cookie', 'sessionToken=abc123; domain=example.com;');

注意事項

  1. 子域相容性：確保所有子域都支援相同的 domain 值。如果不相容，可能會導致 cookie 不被正確設定或訪問。
  2. 安全性：設定 domain 為頂級域（如 .example.com）可以增加安全性，因為這限制了 cookie 的訪問範圍。然而，這也會限制了跨子域的 cookie 使用。
  3. 瀏覽器相容性：大多數現代瀏覽器都支援 domain 屬性，但在一些舊版瀏覽器中可能不支援。

示例

假設你有一個包含多個子域的網站，例如 www.example.com、sub.example.com 和 api.example.com。如果你想讓一個 cookie 能在所有這些子域下被訪問，你可以設定 domain 為 example.com：

res.setHeader('Set-Cookie', 'sessionToken=abc123; domain=example.com;');

這樣設定後，sessionToken 將在 www.example.com、sub.example.com 和 api.example.com 下都能被訪問。

path

path 屬性在設定 Set-Cookie 的時候用於指定 cookie 的有效路徑。這個屬性允許你定義 cookie 可以被哪些路徑下的請求訪問。預設情況下，路徑被設定為當前請求的路徑。

path 屬性的用途

  • 定義有效路徑：path 屬性允許你指定 cookie 的有效路徑，使得 cookie 只能在指定的路徑及其子路徑下被訪問。
  • 路徑限制：透過設定 path 屬性，可以限制 cookie 的使用範圍，從而提高安全性。

實際應用

以下是如何在設定 cookie 時使用 path 屬性的示例：

// 設定 path 為 '/admin'
res.setHeader('Set-Cookie', 'sessionToken=abc123; path=/admin;');

注意事項

  1. 路徑匹配：路徑是字首匹配的，所以設定 path=/admin 意味著 cookie 在 /admin、/admin/settings 等路徑下都有效。
  2. 預設路徑：如果沒有指定 path 屬性，預設路徑是當前請求的路徑。例如，如果請求的路徑是 /user/profile，那麼預設路徑就是 /user/profile。
  3. 安全性：透過設定 path 屬性，可以限制 cookie 的使用範圍，從而提高安全性。例如，將 cookie 限制在 /admin 路徑下，可以防止它在其他非管理區域被訪問。

示例

假設你有一個網站，其中 /admin 路徑下的內容需要特殊的 cookie 來驗證使用者許可權。你可以設定 path 為 /admin：

res.setHeader('Set-Cookie', 'adminToken=xyz789; path=/admin;');

這樣設定後，adminToken 只能在 /admin 及其子路徑（如 /admin/settings）下被訪問。

SameSite

encode和decode

default

watch

示例1：

示例2：

API路由中的Cookies

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog

往期文章歸檔：

  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog

相關文章