前端 js 操作 Cookie 詳細介紹與案例
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
1 前言 1.1 詳細介紹 名稱和值:Cookie由一個名稱和對應的值組成。名稱是一個字符串,用于標識Cookie,而值則是與名稱相關聯的數據。 域名:每個Cookie都與特定的域名相關聯。Cookie只會被發送到與其關聯的域名下的請求中。 路徑:Cookie可以與特定的路徑相關聯。當瀏覽器向指定路徑下的服務器發送請求時,與該路徑相關聯的Cookie將被附加到請求中。 過期時間:Cookie可以設置一個過期時間,以指定Cookie的有效期限。一旦超過該時間,瀏覽器將不再發送該Cookie。 安全標志:通過設置安全標志,可以將Cookie限制為僅在通過HTTPS(安全的加密協議)進行通信時發送。 HTTP Only標志:設置HTTP Only標志后,Cookie將無法通過客戶端的腳本訪問,這有助于防止跨站點腳本攻擊(XSS)。 1.2 Cookie的工作流程 服務器發送一個包含Cookie的HTTP響應頭給瀏覽器,響應頭中包含了名稱、值和其他相關信息。 瀏覽器接收到響應后,會將Cookie存儲在本地的Cookie存儲中。 當瀏覽器向同一域名下的服務器發送后續請求時,會自動附加存儲在本地的Cookie信息到請求的HTTP頭中。 服務器接收到請求后,可以讀取Cookie中的值并根據需要做出相應的處理。 通過使用Cookie,服務器可以在不同的HTTP請求之間保持會話狀態、記錄用戶首選項、實現購物車功能、進行用戶跟蹤等。然而,Cookie也有一些限制,包括存儲容量的限制、跨域訪問的限制以及安全性方面的考慮。 值得注意的是,由于隱私和安全的考慮,最近幾年來,瀏覽器對Cookie的限制和隱私保護機制也有所增加,例如同源策略、Cookie的SameSite屬性和用戶對Cookie的控制選項等 2 如何減小Cookie使用風險 在開發中,減少Cookie的風險是確保用戶隱私和提高安全性的重要方面。以下是一些減少Cookie風險的最佳實踐: 最小化Cookie的數據量:只存儲必要的信息在Cookie中,避免存儲敏感或不必要的數據。僅將標識用戶會話或授權令牌等必要的信息存儲在Cookie中。 使用安全標志:對于需要在安全通信(通過HTTPS)中傳輸的Cookie,設置"Secure"標志,這樣可以確保Cookie只在加密的連接中傳輸。這有助于防止通過網絡攔截或竊聽攻擊獲取Cookie的值。 設置HttpOnly標志:對于存儲敏感信息的Cookie,設置"HttpOnly"標志,防止客戶端腳本訪問Cookie。這可以減少跨站點腳本攻擊(XSS)的風險,因為攻擊者無法通過腳本訪問或竊取Cookie的值。 使用適當的過期時間:設置適當的過期時間來限制Cookie的有效期。確保Cookie的生命周期僅限于需要的時間范圍,避免過長時間的持久性Cookie,以減少風險。 采用同源策略:瀏覽器遵循同源策略,限制Cookie只在與其關聯的域名下發送。這可以防止惡意網站訪問其他域名下的Cookie信息。 使用SameSite屬性:通過將Cookie的SameSite屬性設置為Strict或Lax,可以限制Cookie只在同一站點發起的請求中發送,從而減少跨站點請求偽造(CSRF)攻擊的風險。 適當處理敏感信息:對于包含敏感信息的Cookie,需要采取額外的保護措施,例如加密或哈希處理敏感數據,以及在存儲和傳輸過程中使用適當的加密措施。 定期審查和清理Cookie:定期審查應用程序中使用的Cookie,確保不再需要的Cookie及時刪除。及時清理無效或過期的Cookie,減少不必要的風險。 除了上述最佳實踐,密切關注最新的Web安全標準和更新,并遵循相關的安全建議和建議也是非常重要的。同時,定期進行安全性評估和漏洞掃描,以確保系統和Cookie的安全性。 3 實戰操作 3.1 設置 Cookie function setCookie(name, value, expires, path, domain, secure) { let cookieString = name + "=" + encodeURIComponent(value); if (expires) { let expirationDate = new Date(); expirationDate.setTime(expirationDate.getTime() + expires * 24 * 60 * 60 * 1000); cookieString += "; expires=" + expirationDate.toUTCString(); } if (path) { cookieString += "; path=" + path; } if (domain) { cookieString += "; domain=" + domain; } if (secure) { cookieString += "; secure"; } document.cookie = cookieString; } 3.2 獲取 Cookie function getCookie(name) { let cookieName = name + "="; let cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { let cookie = cookies[i].trim(); if (cookie.indexOf(cookieName) === 0) { return decodeURIComponent(cookie.substring(cookieName.length)); } }
return null; } 3.3 刪除 Cookie function deleteCookie(name, path, domain) { if (getCookie(name)) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; } if (path) { document.cookie = name + "=; path=" + path; } if (domain) { document.cookie = name + "=; domain=" + domain; } } 3.4 測試 // 設置名為"username"的Cookie,有效期為7天,路徑為根路徑 setCookie("username", "有勇氣的牛排", 7, "/"); // 獲取名為"username"的Cookie的值 let username = getCookie("username"); console.log(username); // 輸出: "JohnDoe" // 刪除名為"username"的Cookie deleteCookie("username"); ———————————————— 版權聲明:本文為CSDN博主「有勇氣的牛排」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。 原文鏈接:https://blog.csdn.net/zx77588023/article/details/131387450 該文章在 2023/12/25 15:55:40 編輯過 |
關鍵字查詢
相關文章
正在查詢... |