国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Cookie 詳解以及實現(xiàn)一個 cookie 操作庫

yck / 3590人閱讀

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

Cookie 詳解以及實現(xiàn)一個 cookie 操作庫

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

Set-Cookie

服務(wù)器通過設(shè)置響應(yīng)頭來設(shè)置客戶端的 cookie，形如：

Set-Cookie: =

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

Set-Cookie 有幾個可選項：

Expires/Max-Age

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

Domain 和 Path

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

Secure 和 HttpOnly

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

SameSite

可以設(shè)置 SameSite：SameSite=Strict SameSite=Lax。則 cookie 不跨域發(fā)送。

第三方 cookie

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

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

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

對于 post，ajax 可以標示 withCredentials 從而跨域攜帶 cookie，fetch 可以設(shè)置 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" });

瀏覽器可以關(guān)閉第三方 cookie。（如果應(yīng)用了 p3p 協(xié)議則無法關(guān)閉）。

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

javascript 和 cookie

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

現(xiàn)在我們來實現(xiàn)一個 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) {
    // 通過設(shè)置過期時間來實現(xiàn)刪除， path也是必須，因為需要知道作用范圍，沒有設(shè)置則會生成一個空的同名屬性。
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
  }
};
參考鏈接


MDN: set-cookie

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98447.html

相關(guān)文章

  • 前端相關(guān)大雜燴

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

    fuyi501 評論0 收藏0

  • cookie詳解

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

    qingshanli1988 評論0 收藏0

  • cookie與session詳解

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

    SwordFly 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<