1 前言

1.1 詳細(xì)介紹

• 名稱和值：Cookie由一個(gè)名稱和對(duì)應(yīng)的值組成。名稱是一個(gè)字符串，用于標(biāo)識(shí)Cookie，而值則是與名稱相關(guān)聯(lián)的數(shù)據(jù)。
• 域名：每個(gè)Cookie都與特定的域名相關(guān)聯(lián)。Cookie只會(huì)被發(fā)送到與其關(guān)聯(lián)的域名下的請(qǐng)求中。
• 路徑：Cookie可以與特定的路徑相關(guān)聯(lián)。當(dāng)瀏覽器向指定路徑下的服務(wù)器發(fā)送請(qǐng)求時(shí)，與該路徑相關(guān)聯(lián)的Cookie將被附加到請(qǐng)求中。
• 過(guò)期時(shí)間：Cookie可以設(shè)置一個(gè)過(guò)期時(shí)間，以指定Cookie的有效期限。一旦超過(guò)該時(shí)間，瀏覽器將不再發(fā)送該Cookie。
• 安全標(biāo)志：通過(guò)設(shè)置安全標(biāo)志，可以將Cookie限制為僅在通過(guò)HTTPS（安全的加密協(xié)議）進(jìn)行通信時(shí)發(fā)送。
• HTTP Only標(biāo)志：設(shè)置HTTP Only標(biāo)志后，Cookie將無(wú)法通過(guò)客戶端的腳本訪問(wèn)，這有助于防止跨站點(diǎn)腳本攻擊（XSS）。

1.2 Cookie的工作流程

• 服務(wù)器發(fā)送一個(gè)包含Cookie的HTTP響應(yīng)頭給瀏覽器，響應(yīng)頭中包含了名稱、值和其他相關(guān)信息。
• 瀏覽器接收到響應(yīng)后，會(huì)將Cookie存儲(chǔ)在本地的Cookie存儲(chǔ)中。
• 當(dāng)瀏覽器向同一域名下的服務(wù)器發(fā)送后續(xù)請(qǐng)求時(shí)，會(huì)自動(dòng)附加存儲(chǔ)在本地的Cookie信息到請(qǐng)求的HTTP頭中。
• 服務(wù)器接收到請(qǐng)求后，可以讀取Cookie中的值并根據(jù)需要做出相應(yīng)的處理。

通過(guò)使用Cookie，服務(wù)器可以在不同的HTTP請(qǐng)求之間保持會(huì)話狀態(tài)、記錄用戶首選項(xiàng)、實(shí)現(xiàn)購(gòu)物車(chē)功能、進(jìn)行用戶跟蹤等。然而，Cookie也有一些限制，包括存儲(chǔ)容量的限制、跨域訪問(wèn)的限制以及安全性方面的考慮。

值得注意的是，由于隱私和安全的考慮，最近幾年來(lái)，瀏覽器對(duì)Cookie的限制和隱私保護(hù)機(jī)制也有所增加，例如同源策略、Cookie的SameSite屬性和用戶對(duì)Cookie的控制選項(xiàng)等

2 如何減小Cookie使用風(fēng)險(xiǎn)

在開(kāi)發(fā)中，減少Cookie的風(fēng)險(xiǎn)是確保用戶隱私和提高安全性的重要方面。以下是一些減少Cookie風(fēng)險(xiǎn)的最佳實(shí)踐：

• 最小化Cookie的數(shù)據(jù)量：只存儲(chǔ)必要的信息在Cookie中，避免存儲(chǔ)敏感或不必要的數(shù)據(jù)。僅將標(biāo)識(shí)用戶會(huì)話或授權(quán)令牌等必要的信息存儲(chǔ)在Cookie中。
• 使用安全標(biāo)志：對(duì)于需要在安全通信（通過(guò)HTTPS）中傳輸?shù)腃ookie，設(shè)置"Secure"標(biāo)志，這樣可以確保Cookie只在加密的連接中傳輸。這有助于防止通過(guò)網(wǎng)絡(luò)攔截或竊聽(tīng)攻擊獲取Cookie的值。
• 設(shè)置HttpOnly標(biāo)志：對(duì)于存儲(chǔ)敏感信息的Cookie，設(shè)置"HttpOnly"標(biāo)志，防止客戶端腳本訪問(wèn)Cookie。這可以減少跨站點(diǎn)腳本攻擊（XSS）的風(fēng)險(xiǎn)，因?yàn)楣粽邿o(wú)法通過(guò)腳本訪問(wèn)或竊取Cookie的值。
• 使用適當(dāng)?shù)倪^(guò)期時(shí)間：設(shè)置適當(dāng)?shù)倪^(guò)期時(shí)間來(lái)限制Cookie的有效期。確保Cookie的生命周期僅限于需要的時(shí)間范圍，避免過(guò)長(zhǎng)時(shí)間的持久性Cookie，以減少風(fēng)險(xiǎn)。
• 采用同源策略：瀏覽器遵循同源策略，限制Cookie只在與其關(guān)聯(lián)的域名下發(fā)送。這可以防止惡意網(wǎng)站訪問(wèn)其他域名下的Cookie信息。
• 使用SameSite屬性：通過(guò)將Cookie的SameSite屬性設(shè)置為Strict或Lax，可以限制Cookie只在同一站點(diǎn)發(fā)起的請(qǐng)求中發(fā)送，從而減少跨站點(diǎn)請(qǐng)求偽造（CSRF）攻擊的風(fēng)險(xiǎn)。
• 適當(dāng)處理敏感信息：對(duì)于包含敏感信息的Cookie，需要采取額外的保護(hù)措施，例如加密或哈希處理敏感數(shù)據(jù)，以及在存儲(chǔ)和傳輸過(guò)程中使用適當(dāng)?shù)募用艽胧?/li>
• 定期審查和清理Cookie：定期審查應(yīng)用程序中使用的Cookie，確保不再需要的Cookie及時(shí)刪除。及時(shí)清理無(wú)效或過(guò)期的Cookie，減少不必要的風(fēng)險(xiǎn)。

除了上述最佳實(shí)踐，密切關(guān)注最新的Web安全標(biāo)準(zhǔn)和更新，并遵循相關(guān)的安全建議和建議也是非常重要的。同時(shí)，定期進(jìn)行安全性評(píng)估和漏洞掃描，以確保系統(tǒng)和Cookie的安全性。

3 實(shí)戰(zhàn)操作

3.1 設(shè)置 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 測(cè)試

// 設(shè)置名為"username"的Cookie，有效期為7天，路徑為根路徑
setCookie("username", "有勇氣的牛排", 7, "/");
// 獲取名為"username"的Cookie的值
let username = getCookie("username");
console.log(username); // 輸出: "JohnDoe"
// 刪除名為"username"的Cookie
deleteCookie("username");

總結(jié) 

到此這篇關(guān)于前端js操作Cookie超詳細(xì)介紹與實(shí)戰(zhàn)案例的文章就介紹到這了,更多相關(guān)前端js操作Cookie內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論