資訊專欄INFORMATION COLUMN
摘要：詳解以及實(shí)現(xiàn)一個(gè)操作庫(kù)在前端有著大量的應(yīng)用，但有時(shí)我們對(duì)它還是一知半解。若沒(méi)有設(shè)置則是當(dāng)前主機(jī)不包括子域名。現(xiàn)在我們來(lái)實(shí)現(xiàn)一個(gè)的操作庫(kù)通過(guò)設(shè)置過(guò)期時(shí)間來(lái)實(shí)現(xiàn)刪除，也是必須，因?yàn)樾枰雷饔梅秶?，沒(méi)有設(shè)置則會(huì)生成一個(gè)空的同名屬性。
Cookie 詳解以及實(shí)現(xiàn)一個(gè) cookie 操作庫(kù)
cookie 在前端有著大量的應(yīng)用，但有時(shí)我們對(duì)它還是一知半解。下面來(lái)看看它的一些具體的用法
Set-Cookie服務(wù)器通過(guò)設(shè)置響應(yīng)頭來(lái)設(shè)置客戶端的 cookie，形如：
Set-Cookie:=
可以同時(shí)添加多個(gè) Set-Cookie，從而設(shè)置多個(gè) cookie 的值。
Set-Cookie 有幾個(gè)可選項(xiàng)：
Expires/Max-AgeExpires/Max-Age 可以設(shè)置過(guò)期時(shí)間。Expires 為某個(gè)日期 GMT 格式。Max-Age 為需要經(jīng)過(guò)的秒數(shù)。優(yōu)先級(jí)比 Expires 高。沒(méi)有設(shè)置過(guò)期時(shí)間，則表示是一個(gè)會(huì)話期 cookie，在關(guān)閉瀏覽器后，會(huì)被移除（瀏覽器支持會(huì)話恢復(fù)，保留 cookie）。設(shè)置了后叫做持久性 cookie。
Domain 和 PathPath 設(shè)置必須是匹配的路徑或者子路徑才會(huì)發(fā)送 cookie。Domain 標(biāo)識(shí)指定了哪些主機(jī)可以接受 Cookie。若沒(méi)有設(shè)置則是當(dāng)前主機(jī)（不包括子域名）。否則則為設(shè)置的域名（包括子域名）。
Secure 和 HttpOnlySecure 標(biāo)志 cookie 只能通過(guò) https 傳輸。可以防止 xss 攻擊。
HttpOnly 表示 cookie 無(wú)法通過(guò) javascript 調(diào)用。 防止中間人劫持。
可以設(shè)置 SameSite：SameSite=Strict SameSite=Lax。則 cookie 不跨域發(fā)送。
第三方 cookie如果發(fā)送的請(qǐng)求的域和接送的域不同，則請(qǐng)求仍有可能攜帶目標(biāo)域的 cookie。如：
new Image.src() = https://google.com/xxxx // 無(wú)論該鏈接是否存在都會(huì)發(fā)送
該請(qǐng)求會(huì)將 google 的 cookie 攜帶在請(qǐng)求中發(fā)送到 google 的服務(wù)器上。因此如果 google 只采用 cookie 鑒權(quán)的話。那惡意網(wǎng)站就可以為所欲為的進(jìn)行它想要的操作了。這就是 csrf 的原理之一。
對(duì)于 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é)議則無(wú)法關(guān)閉）。
通過(guò)第三方 cookie 廣告商可以標(biāo)示用戶，從而進(jìn)行跟蹤。
javascript 和 cookie通過(guò) document.cookie 我們可以獲取所有非 http-only 標(biāo)志的 cookie。document.cookie = newCookie 可以一個(gè)新的 cookie。
現(xiàn)在我們來(lái)實(shí)現(xiàn)一個(gè) mini 的 cookie 操作庫(kù)：
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) {
// 通過(guò)設(shè)置過(guò)期時(shí)間來(lái)實(shí)現(xiàn)刪除， path也是必須，因?yàn)樾枰雷饔梅秶瑳](méi)有設(shè)置則會(huì)生成一個(gè)空的同名屬性。
document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
}
};
參考鏈接
MDN: set-cookie
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98447.html
摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...
摘要：通過(guò)加密和安全傳輸技術(shù)，減少被破解的可能性。只在中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失。限制每個(gè)與最多個(gè)和對(duì)于每個(gè)域的數(shù)量限制沒(méi)有硬性規(guī)定。安全性文件中可能含有涉密信息，可能會(huì)導(dǎo)致信息泄露。 一、 什么是cookie A cookie is a small stub of information left by a website on a visitors computer th...
摘要：所謂的無(wú)連接就是服務(wù)器收到了客戶端的請(qǐng)求之后，響應(yīng)完成并收到客戶端的應(yīng)答之后，即斷開(kāi)連接。從而節(jié)省傳輸時(shí)間。協(xié)議對(duì)事務(wù)的處理沒(méi)有記憶能力。這種方式某種方面上講解放了服務(wù)器，但是卻不利于客戶端與服務(wù)器的連接。 session與cookie是什么? session與cookie屬于一種會(huì)話控制技術(shù).常用在身份識(shí)別，登錄驗(yàn)證，數(shù)據(jù)傳輸?shù)?舉個(gè)例子，就像我們?nèi)コ匈I(mǎi)東西結(jié)賬的時(shí)候，我們要拿出我...
閱讀 2258·2021-11-23 09:51
閱讀 1092·2021-11-22 15:35
閱讀 4893·2021-11-22 09:34
閱讀 1626·2021-10-08 10:13
閱讀 3029·2021-07-22 17:35
閱讀 2561·2019-08-30 15:56
閱讀 3094·2019-08-29 18:44
閱讀 3111·2019-08-29 15:32
