Cookie 詳解以及實現一個 cookie 操作庫

yck 發布于2019-08-23 12:24 / 3581人閱讀

摘要：詳解以及實現一個操作庫在前端有著大量的應用，但有時我們對它還是一知半解。若沒有設置則是當前主機不包括子域名。現在我們來實現一個的操作庫通過設置過期時間來實現刪除，也是必須，因為需要知道作用范圍，沒有設置則會生成一個空的同名屬性。

Cookie 詳解以及實現一個 cookie 操作庫

cookie 在前端有著大量的應用，但有時我們對它還是一知半解。下面來看看它的一些具體的用法

Set-Cookie

服務器通過設置響應頭來設置客戶端的 cookie，形如：

Set-Cookie: =

可以同時添加多個 Set-Cookie，從而設置多個 cookie 的值。

Set-Cookie 有幾個可選項：

Expires/Max-Age

Expires/Max-Age 可以設置過期時間。Expires 為某個日期 GMT 格式。Max-Age 為需要經過的秒數。優先級比 Expires 高。沒有設置過期時間，則表示是一個會話期 cookie，在關閉瀏覽器后，會被移除（瀏覽器支持會話恢復，保留 cookie）。設置了后叫做持久性 cookie。

Domain 和 Path

Path 設置必須是匹配的路徑或者子路徑才會發送 cookie。Domain 標識指定了哪些主機可以接受 Cookie。若沒有設置則是當前主機（不包括子域名）。否則則為設置的域名（包括子域名）。

Secure 和 HttpOnly

Secure 標志 cookie 只能通過 https 傳輸。可以防止 xss 攻擊。
HttpOnly 表示 cookie 無法通過 javascript 調用。防止中間人劫持。

SameSite

可以設置 SameSite：SameSite=Strict SameSite=Lax。則 cookie 不跨域發送。

第三方 cookie

如果發送的請求的域和接送的域不同，則請求仍有可能攜帶目標域的 cookie。如：

new Image.src() = https://google.com/xxxx // 無論該鏈接是否存在都會發送

該請求會將 google 的 cookie 攜帶在請求中發送到 google 的服務器上。因此如果 google 只采用 cookie 鑒權的話。那惡意網站就可以為所欲為的進行它想要的操作了。這就是 csrf 的原理之一。

對于 post，ajax 可以標示 withCredentials 從而跨域攜帶 cookie，fetch 可以設置 credentials:"include"。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://a.test/hhh12");
xhr.withCredentials = true;
xhr.send();

fetch("http://a.test/hhhaaaaa12", { credentials: "include" });

瀏覽器可以關閉第三方 cookie。（如果應用了 p3p 協議則無法關閉）。

通過第三方 cookie 廣告商可以標示用戶，從而進行跟蹤。

javascript 和 cookie

通過 document.cookie 我們可以獲取所有非 http-only 標志的 cookie。document.cookie = newCookie 可以一個新的 cookie。

現在我們來實現一個 mini 的 cookie 操作庫：

const Minicookie = {
  getItem(cookieName) {
    const cookies = document.cookie;
    const cookieList = cookies ? cookies.split("; ") : [];
    for (const cookieItem of cookieList) {
      const [, _cookieName, _cookieValue] = cookieItem.match(/^(.*?)=(.*)/);
      if (_cookieName === cookieName) {
        return _cookieValue;
      }
    }
    return void 0;
  },
  setItem(key, value) {
    document.cookie = `${key}=${value}`
  },
  removeItem(key) {
    // 通過設置過期時間來實現刪除， path也是必須，因為需要知道作用范圍，沒有設置則會生成一個空的同名屬性。
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
  }
};

參考鏈接

MDN: set-cookie

GPU云服務器云服務器 cookie和session詳解 jquery操作cookie Cookie cdn cookie

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98447.html

前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
cookie詳解

摘要：通過加密和安全傳輸技術，減少被破解的可能性。只在中存放不敏感數據，即使被盜也不會有重大損失。限制每個與最多個和對于每個域的數量限制沒有硬性規定。安全性文件中可能含有涉密信息，可能會導致信息泄露。一、什么是cookie A cookie is a small stub of information left by a website on a visitors computer th...

qingshanli1988 2019-08-22 11:01 評論0 收藏0
cookie與session詳解

摘要：所謂的無連接就是服務器收到了客戶端的請求之后，響應完成并收到客戶端的應答之后，即斷開連接。從而節省傳輸時間。協議對事務的處理沒有記憶能力。這種方式某種方面上講解放了服務器，但是卻不利于客戶端與服務器的連接。 session與cookie是什么? session與cookie屬于一種會話控制技術.常用在身份識別，登錄驗證，數據傳輸等.舉個例子，就像我們去超市買東西結賬的時候，我們要拿出我...

SwordFly 2019-07-01 11:03 評論0 收藏0