好程序員Web前端教程分享新手應(yīng)該了解的Cookie知識(shí)！

10多年建站經(jīng)驗(yàn)， 網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)客戶(hù)的見(jiàn)證與正確選擇。成都創(chuàng)新互聯(lián)公司提供完善的營(yíng)銷(xiāo)型網(wǎng)頁(yè)建站明細(xì)報(bào)價(jià)表。后期開(kāi)發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

一、Cookie的出現(xiàn)

瀏覽器和服務(wù)器之間的通信少不了HTTP協(xié)議，但是因?yàn)镠TTP協(xié)議是無(wú)狀態(tài)的，所以服務(wù)器并不知道上一次瀏覽器做了什么樣的操作，這樣嚴(yán)重阻礙了交互式Web應(yīng)用程序的實(shí)現(xiàn)。

二、Cookie的傳輸

服務(wù)器端在實(shí)現(xiàn)Cookie標(biāo)準(zhǔn)的過(guò)程中，需要對(duì)任意HTTP請(qǐng)求發(fā)送Set-CookieHTTP頭作為響應(yīng)的一部分：

1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;domain=.xxx.com;

瀏覽器端會(huì)存儲(chǔ)這樣的Cookie，并且為之后的每個(gè)請(qǐng)求添加CookieHTTP請(qǐng)求頭發(fā)送回服務(wù)器：

1.Cookie:name=value

服務(wù)器通過(guò)驗(yàn)證Cookie值，來(lái)判斷瀏覽器發(fā)送請(qǐng)求屬于哪一個(gè)用戶(hù)。

三、瀏覽器中的Cookie

瀏覽器中的Cookie主要由以下幾部分組成：

·名稱(chēng)：Cookie唯一的名稱(chēng)，必須經(jīng)過(guò)URL編碼處理。(同名會(huì)出現(xiàn)覆蓋的情況)

·值：必須經(jīng)過(guò)URL編碼處理。

·域(domain)：默認(rèn)情況下cookie在當(dāng)前域下有效，你也可以設(shè)置該值來(lái)確保對(duì)其子域是否有效。

·路徑(path)：指定Cookie在哪些路徑下有效，默認(rèn)是當(dāng)前路徑下。

·失效時(shí)間(expires)：默認(rèn)情況下，瀏覽器會(huì)話(huà)結(jié)束時(shí)會(huì)自動(dòng)刪除Cookie;也可以設(shè)置一個(gè)GMT格式的日期，指定具體的刪除日期;如果設(shè)置的日期為以前的日期，那么Cookie會(huì)立即刪除。

·安全標(biāo)志(secure)：指定之后只允許Cookie發(fā)送給https協(xié)議。

瀏覽器在發(fā)送請(qǐng)求時(shí)，只會(huì)將名稱(chēng)與值添加到請(qǐng)求頭的Cookie字段中，發(fā)送給服務(wù)端。

瀏覽器提供了一個(gè)非常蹩腳的API來(lái)操作Cookie：

1.document.cookie

通過(guò)上述方法可以對(duì)該Cookie進(jìn)行寫(xiě)操作，每一次只能寫(xiě)入一條Cookie字符串：

1.document.cookie='a=1;secure;path=/'

通過(guò)該方法還可以進(jìn)行Cookie的讀操作：

1.document.cookie//"a=1"

由于上述方法操作Cookie非常的不直觀(guān)，一般都會(huì)寫(xiě)一些函數(shù)來(lái)簡(jiǎn)化Cookie讀取、設(shè)置和刪除操作。

對(duì)于Cookie的設(shè)置操作中，需要以下幾點(diǎn)：

對(duì)于名稱(chēng)和值進(jìn)行URL編碼處理，也就是采用JavaScript中的encodeURIComponent()方法;expires要求傳入GMT格式的日期，需要處理為更易書(shū)寫(xiě)的方式，比如：設(shè)置秒數(shù)的方式;注意只有的屬性名的secure;

每一段信息需要采用分號(hào)加空格。

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的讀操作需要注意的是將名稱(chēng)與值進(jìn)行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<max;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.}

最后一個(gè)清除的方法就更加簡(jiǎn)單了，只要將失效日期(expires)設(shè)置為過(guò)去的日期即可：

1.functionremoveCookie(key){

2.setCookie(key,'',{expires:-1})

3.}

介紹Cookie基本操作的封裝之后，還需要了解瀏覽器為了限制Cookie不會(huì)被惡意使用，規(guī)定了Cookie所占磁盤(pán)空間的大小以及每個(gè)域名下Cookie的個(gè)數(shù)。

四、服務(wù)端的Cookie

相比較瀏覽器端，服務(wù)端執(zhí)行Cookie的寫(xiě)操作時(shí)，是將拼接好的Cookie字符串放入響應(yīng)頭的Set-Cookie字段中;執(zhí)行Cookie的讀操作時(shí)，則是解析HTTP請(qǐng)求頭字段Cookie中的鍵值對(duì)。

與瀏覽器大的不同，在于服務(wù)端對(duì)于Cookie的安全性操碎了心

signed

當(dāng)設(shè)置signed=true時(shí)，服務(wù)端會(huì)對(duì)該條Cookie字符串生成兩個(gè)Set-Cookie響應(yīng)頭字段：

1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly

2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;httponly

這里通過(guò)再發(fā)送一條以.sig為后綴的名稱(chēng)以及對(duì)值進(jìn)行加密的Cookie，來(lái)驗(yàn)證該條Cookie是否在傳輸?shù)倪^(guò)程中被篡改。

httpOnly

服務(wù)端Set-Cookie字段中新增httpOnly屬性，當(dāng)服務(wù)端在返回的Cookie信息中含有httpOnly字段時(shí)，開(kāi)發(fā)者是不能通過(guò)JavaScript來(lái)操縱該條Cookie字符串的。

這樣做的好處主要在于面對(duì)XSS(Cross-sitescripting)gongji時(shí)，***無(wú)法拿到設(shè)置httpOnly字段的Cookie信息。

此時(shí)，你會(huì)發(fā)現(xiàn)localStorage相比較Cookie，在XSSgongji的防御上就略遜一籌了。sameSite

在介紹這個(gè)新屬性之前，首先你需要明白：當(dāng)用戶(hù)從http://a.com發(fā)起http://b.com的請(qǐng)求也會(huì)攜帶上Cookie，而從http://a.com攜帶過(guò)來(lái)的Cookie稱(chēng)為第三方Cookie。

雖然第三方Cookie有一些好處，但是給CSRF(Cross-siterequestforgrey)gongji的機(jī)會(huì)。

為了從根源上解決CSRFgongji，sameSite屬性便閃亮登場(chǎng)了，它的取值有以下幾種：

·strict：瀏覽器在任何跨域請(qǐng)求中都不會(huì)攜帶Cookie，這樣可以有效的防御CSRFgongji，但是對(duì)于有多個(gè)子域名的網(wǎng)站采用主域名存儲(chǔ)用戶(hù)登錄信息的場(chǎng)景，每個(gè)子域名都需要用戶(hù)重新登錄，造成用戶(hù)體驗(yàn)非常的差。

·lax：相比較strict，它允許從三方網(wǎng)站跳轉(zhuǎn)過(guò)來(lái)的時(shí)候使用Cookie。

為了方便大家理解sameSite的實(shí)際效果，可以看這個(gè)例子：

1.//a.com服務(wù)端會(huì)在訪(fǎng)問(wèn)頁(yè)面時(shí)返回如下Cookie

2.cookies.set('foo','aaaaa')

3.cookies.set('bar','bbbbb')

4.cookies.set('name','cccccc')

5.

6.//b.com服務(wù)端會(huì)在訪(fǎng)問(wèn)頁(yè)面時(shí)返回如下Cookie

7.cookies.set('foo','a',{sameSite:'strict'})

8.cookies.set('bar','b',{sameSite:'lax'})

9.cookies.set('baz','c')

如何現(xiàn)在用戶(hù)在a.com中點(diǎn)擊鏈接跳轉(zhuǎn)到b.com，它的請(qǐng)求頭是這樣的：

1.RequestHeaders

2.

3.Cookie:bar=b;baz=c

五、網(wǎng)站性能優(yōu)化

Cookie在服務(wù)端和瀏覽器的通信中，主要依靠HTTP的響應(yīng)頭和請(qǐng)求頭傳輸?shù)?，所以Cookie會(huì)占據(jù)一定的帶寬。

前面提到瀏覽器會(huì)為每一次HTPP請(qǐng)求自動(dòng)攜帶上Cookie信息，但是對(duì)于同站內(nèi)的靜態(tài)資源，服務(wù)器并不需要處理其攜帶的Cookie，這無(wú)形中便浪費(fèi)了帶寬。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：好程序員Web前端教程分享新手應(yīng)該了解的Cookie知識(shí)！-創(chuàng)新互聯(lián)
標(biāo)題URL：http://jinyejixie.com/article20/icpjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、軟件開(kāi)發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、Google、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)