好程序員Web前端教程分享新手應該了解的Cookie知識！
一、Cookie的出現(xiàn)
瀏覽器和服務(wù)器之間的通信少不了HTTP協(xié)議，但是因為HTTP協(xié)議是無狀態(tài)的，所以服務(wù)器并不知道上一次瀏覽器做了什么樣的操作，這樣嚴重阻礙了交互式Web應用程序的實現(xiàn)。
二、Cookie的傳輸
服務(wù)器端在實現(xiàn)Cookie標準的過程中，需要對任意HTTP請求發(fā)送Set-CookieHTTP頭作為響應的一部分：
1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;domain=.xxx.com;
瀏覽器端會存儲這樣的Cookie，并且為之后的每個請求添加CookieHTTP請求頭發(fā)送回服務(wù)器：
1.Cookie:name=value
服務(wù)器通過驗證Cookie值，來判斷瀏覽器發(fā)送請求屬于哪一個用戶。
三、瀏覽器中的Cookie
瀏覽器中的Cookie主要由以下幾部分組成：
·名稱：Cookie唯一的名稱，必須經(jīng)過URL編碼處理。(同名會出現(xiàn)覆蓋的情況)
·值：必須經(jīng)過URL編碼處理。
·域(domain)：默認情況下cookie在當前域下有效，你也可以設(shè)置該值來確保對其子域是否有效。
·路徑(path)：指定Cookie在哪些路徑下有效，默認是當前路徑下。
·失效時間(expires)：默認情況下，瀏覽器會話結(jié)束時會自動刪除Cookie;也可以設(shè)置一個GMT格式的日期，指定具體的刪除日期;如果設(shè)置的日期為以前的日期，那么Cookie會立即刪除。
·安全標志(secure)：指定之后只允許Cookie發(fā)送給https協(xié)議。
瀏覽器在發(fā)送請求時，只會將名稱與值添加到請求頭的Cookie字段中，發(fā)送給服務(wù)端。
瀏覽器提供了一個非常蹩腳的API來操作Cookie：
1.document.cookie
通過上述方法可以對該Cookie進行寫操作，每一次只能寫入一條Cookie字符串：
1.document.cookie='a=1;secure;path=/'
通過該方法還可以進行Cookie的讀操作：
1.document.cookie//"a=1"
由于上述方法操作Cookie非常的不直觀，一般都會寫一些函數(shù)來簡化Cookie讀取、設(shè)置和刪除操作。
對于Cookie的設(shè)置操作中，需要以下幾點：
對于名稱和值進行URL編碼處理，也就是采用JavaScript中的encodeURIComponent()方法;expires要求傳入GMT格式的日期，需要處理為更易書寫的方式，比如：設(shè)置秒數(shù)的方式;注意只有的屬性名的secure;
每一段信息需要采用分號加空格。
1.functionsetCookie(key,value,attributes){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.attributes=Object.assign({},{
6.path:'/'
7.},attributes)
8.
9.let{domain,path,expires,secure}=attributes
10.
11.if(typeofexpires==='number'){
12.expires=newDate(Date.now()+expires*1000)
13.}
14.if(expiresinstanceofDate){
15.expires=expires.toUTCString()
16.}else{
17.expires=''
18.}
19.
20.key=encodeURIComponent(key)
21.value=encodeURIComponent(value)
22.
23.letcookieStr=`${key}=${value}`
24.
25.if(domain){
26.cookieStr+=`;domain=${domain}`
27.}
28.
29.if(path){
30.cookieStr+=`;path=${path}`
31.}
32.
33.if(expires){
34.cookieStr+=`;expires=${expires}`
35.}
36.
37.if(secure){
38.cookieStr+=`;secure`
39.}
40.
41.return(document.cookie=cookieStr)
42.}
Cookie的讀操作需要注意的是將名稱與值進行URL解碼處理，也就是調(diào)用JavaScript中的decodeURIComponent()方法：
1.functiongetCookie(name){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.letcookies=[]
6.letjar={}
7.document.cookie&&(cookies=document.cookie.split(';'))
8.
9.for(leti=0,max=cookies.length;i 10.let[key,value]=cookies[i].split('=') 11.key=decodeURIComponent(key) 12.value=decodeURIComponent(value) 13.jar[key]=value 14.if(key===name){ 15.break 16.} 17.} 18. 19.returnname?jar[name]:jar 20.} 最后一個清除的方法就更加簡單了，只要將失效日期(expires)設(shè)置為過去的日期即可： 1.functionremoveCookie(key){ 2.setCookie(key,'',{expires:-1}) 3.} 介紹Cookie基本操作的封裝之后，還需要了解瀏覽器為了限制Cookie不會被惡意使用，規(guī)定了Cookie所占磁盤空間的大小以及每個域名下Cookie的個數(shù)。 四、服務(wù)端的Cookie 相比較瀏覽器端，服務(wù)端執(zhí)行Cookie的寫操作時，是將拼接好的Cookie字符串放入響應頭的Set-Cookie字段中;執(zhí)行Cookie的讀操作時，則是解析HTTP請求頭字段Cookie中的鍵值對。 與瀏覽器大的不同，在于服務(wù)端對于Cookie的安全性操碎了心 signed 當設(shè)置signed=true時，服務(wù)端會對該條Cookie字符串生成兩個Set-Cookie響應頭字段： 1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly 2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;httponly 這里通過再發(fā)送一條以.sig為后綴的名稱以及對值進行加密的Cookie，來驗證該條Cookie是否在傳輸?shù)倪^程中被篡改。 httpOnly 服務(wù)端Set-Cookie字段中新增httpOnly屬性，當服務(wù)端在返回的Cookie信息中含有httpOnly字段時，開發(fā)者是不能通過JavaScript來操縱該條Cookie字符串的。 這樣做的好處主要在于面對XSS(Cross-sitescripting)gongji時，***無法拿到設(shè)置httpOnly字段的Cookie信息。 此時，你會發(fā)現(xiàn)localStorage相比較Cookie，在XSSgongji的防御上就略遜一籌了。sameSite 在介紹這個新屬性之前，首先你需要明白：當用戶從http://a.com發(fā)起http://b.com的請求也會攜帶上Cookie，而從http://a.com攜帶過來的Cookie稱為第三方Cookie。 雖然第三方Cookie有一些好處，但是給CSRF(Cross-siterequestforgrey)gongji的機會。 為了從根源上解決CSRFgongji，sameSite屬性便閃亮登場了，它的取值有以下幾種： ·strict：瀏覽器在任何跨域請求中都不會攜帶Cookie，這樣可以有效的防御CSRFgongji，但是對于有多個子域名的網(wǎng)站采用主域名存儲用戶登錄信息的場景，每個子域名都需要用戶重新登錄，造成用戶體驗非常的差。 ·lax：相比較strict，它允許從三方網(wǎng)站跳轉(zhuǎn)過來的時候使用Cookie。 為了方便大家理解sameSite的實際效果，可以看這個例子： 1.//a.com服務(wù)端會在訪問頁面時返回如下Cookie 2.cookies.set('foo','aaaaa') 3.cookies.set('bar','bbbbb') 4.cookies.set('name','cccccc') 5. 6.//b.com服務(wù)端會在訪問頁面時返回如下Cookie 7.cookies.set('foo','a',{sameSite:'strict'}) 8.cookies.set('bar','b',{sameSite:'lax'}) 9.cookies.set('baz','c') 如何現(xiàn)在用戶在a.com中點擊鏈接跳轉(zhuǎn)到b.com，它的請求頭是這樣的： 1.RequestHeaders 2. 3.Cookie:bar=b;baz=c 五、網(wǎng)站性能優(yōu)化 Cookie在服務(wù)端和瀏覽器的通信中，主要依靠HTTP的響應頭和請求頭傳輸?shù)?，所以Cookie會占據(jù)一定的帶寬。 前面提到瀏覽器會為每一次HTPP請求自動攜帶上Cookie信息，但是對于同站內(nèi)的靜態(tài)資源，服務(wù)器并不需要處理其攜帶的Cookie，這無形中便浪費了帶寬。 另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
本文標題：好程序員Web前端教程分享新手應該了解的Cookie知識！-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/icpjo.html
重慶分公司
重慶分公司
