成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

yck / 3653人閱讀

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

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

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

Set-Cookie

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

Set-Cookie: =

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

Set-Cookie 有幾個可選項(xiàng)：

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 標(biāo)識指定了哪些主機(jī)可以接受 Cookie。若沒有設(shè)置則是當(dāng)前主機(jī)（不包括子域名）。否則則為設(shè)置的域名（包括子域名）。

Secure 和 HttpOnly

Secure 標(biāo)志 cookie 只能通過 https 傳輸?？梢苑乐?xss 攻擊。
HttpOnly 表示 cookie 無法通過 javascript 調(diào)用。 防止中間人劫持。

SameSite

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

第三方 cookie

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

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

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

對于 post，ajax 可以標(biāo)示 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 廣告商可以標(biāo)示用戶，從而進(jìn)行跟蹤。

javascript 和 cookie

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

現(xiàn)在我們來實(shí)現(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è)置過期時間來實(shí)現(xiàn)刪除， path也是必須，因?yàn)樾枰雷饔梅秶?，沒有設(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.hztianpu.com/yun/98447.html

相關(guān)文章

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

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

    fuyi501 評論0 收藏0

  • cookie詳解

    摘要：通過加密和安全傳輸技術(shù)，減少被破解的可能性。只在中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。限制每個與最多個和對于每個域的數(shù)量限制沒有硬性規(guī)定。安全性文件中可能含有涉密信息，可能會導(dǎo)致信息泄露。 一、 什么是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ù).常用在身份識別，登錄驗(yàn)證，數(shù)據(jù)傳輸?shù)?舉個例子，就像我們?nèi)コ匈I東西結(jié)賬的時候，我們要拿出我...

    SwordFly 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<