一、前言

早期為了解決“會話保持”的需求，社區(qū)中出現(xiàn)了「cookie 方案」并最終成為 W3C 標(biāo)準(zhǔn)：當(dāng)某個網(wǎng)站登錄成功后，客戶端(瀏覽器)收到一個 cookie 標(biāo)識(文本)并保存下來，在后續(xù)請求中會自動帶上這個字段，由此 Web 后臺可以判斷是否同一個用戶，從而使“會話”得以延續(xù)。

微信小程序沒有像瀏覽器一樣內(nèi)置實(shí)現(xiàn)了 cookie 方案，需要開發(fā)者自行模擬，而原先京東購物小程序及京喜小程序(現(xiàn)微信一級購物入口)是從微信及手 Q 購物入口 H5 中遷移迭代出來的，也就是說我們不僅要在小程序中模擬一套 cookie 方案，并且要保持和原業(yè)務(wù)對 cookie 處理邏輯的一致，為此我們將實(shí)現(xiàn)方向確定為“基于小程序開放能力，和瀏覽器保持一致”。

微信小程序開放了 數(shù)據(jù)緩存 Storage^[1] 和 網(wǎng)絡(luò) Network^[2] 這兩種能力，通過這兩套 API，我們可以自行 DIY 一個 cookie 方案。

PS：本文所有代碼及使用示例都可以 在這里^[3] 找到，閱讀本文時配合實(shí)踐，效果更佳。

二、瀏覽器中的 cookie

為了保持后端對 cookie 的處理邏輯和原來的 H5 一致，小程序的實(shí)現(xiàn)需要往瀏覽器看齊。

所以模擬小程序的 cookie 前，先看看瀏覽器的 cookie 機(jī)制，主要有以下幾個部分：

• 本地存儲：瀏覽器會在本地分配一塊空間，存儲 cookie
• 請求攜帶：每次發(fā)起請求，都會從本地取出 cookie 并追加在請求頭上
• 響應(yīng)設(shè)置：當(dāng)響應(yīng)頭有 Set-Cookie 字段時，需要解析并更新
• 過期時間：每個 cookie 字段有單獨(dú)的過期時間，并且到期會自動清除
• 讀寫操作：暴露 API 給前端 JS 調(diào)用，可進(jìn)行增刪改查操作
• 作用域：路徑 path、域名 domin
• 編碼：cookie 值，在網(wǎng)絡(luò)傳輸需要 encode，建議存儲也一樣
• 其它：HttpOnly、Secure、SameSite

在瀏覽器的 DevTools 中，可以看到當(dāng)前站點(diǎn)下的 Cookie 明細(xì)：

三、小程序中的 cookie 實(shí)現(xiàn)

方案設(shè)計(jì)

在小程序中模擬 Cookie，主要涉及五個部分：其中我們會重點(diǎn)關(guān)注 「Cookie 基礎(chǔ)庫」 的實(shí)現(xiàn)，另外也會給出「Request 基礎(chǔ)庫」的封裝示例。

本地存儲

小程序提供了 「數(shù)據(jù)緩存 Storage API」(可以理解為 Web 規(guī)范中的 LocalStorage)，支持存儲“原生類型、Date、及能夠通過 JSON.stringify 序列化的對象”。

我們可以利用這些 API，在 Storage 中新開一個 cookies 字段進(jìn)行存儲：

// 存：
wx.setStorageSync('cookies', cookies)
// 取：
wx.getStorageSync('cookies')

其中 cookies 的「存儲結(jié)構(gòu)」如下：

// cookies =
{
cookie1: { // “最小 cookie 單元” ==> cookieItem
name: 'cookie1', // cookie 名
value: 'xxx', // cookie 值
expires: 'Fri, 17 Jan 2020 08:49:41 GMT' // 過期時間，使用 GMT(格林威治標(biāo)準(zhǔn)時間)格式
}
},

上面的 cookie1 便是一個“最小 cookie 單元 cookieItem”，包含了 3 個字段(name、value、expires)，是本文中定義的「標(biāo)準(zhǔn) cookie 格式」，也是 cookie 操作的基本單元。

打開【微信開發(fā)工具】的 Storage 選項(xiàng)卡，可以查看本地存儲的情況：

讀寫操作

這部分主要作為“公共基礎(chǔ)庫“的角色，為外部業(yè)務(wù)提供增刪改查 cookie 的 API。

1. 獲取 cookie————getCookie()

步驟：從 Storage 中取出完整 cookies ==> 取出指定 name 的 cookie 項(xiàng) ==> 校驗(yàn)有效期 ==> 返回值 value

實(shí)現(xiàn)如下：

function getCookie(name = '') {
let cookies = wx.getStorageSync('cookies') // try/catch 略過
let { value, expires } = cookies[name] || {}

return (name && expires && !isExpired(expires)) ? decodeURIComponent(cookieItem.value) : ''
}

2. 設(shè)置 cookie————setCookie()

步驟：從 Storage 中取出完整 cookies ==> 解析入?yún)?==> 覆蓋更新 ==> 同步到本地 Storage

首先看下本 API 設(shè)計(jì)需求：

• 設(shè)置單個/多個 cookie
• 直接傳值/傳 cookieItem(Object)
• 時間格式 maxAge/expires

調(diào)用示例如下：

setCookie({
cookie1: 12345,
cookie2: '12345'
})

setCookie({
cookie1: {
value: 12345,
maxAge: 3600 * 24 // 自定義有效期(這里示例是24小時)
},
cookie2: {
value: '12345',
expires: 'Wed, 21 Oct 2015 07:28:00 GMT' // 標(biāo)準(zhǔn) GMT 格式
}
})

這里可對入?yún)⒈闅v，而 cookie 子項(xiàng)無論直接傳值 value 還是傳了詳細(xì) object，都盡量的獲取 name/value/expires/maxAge，傳給格式化函數(shù)轉(zhuǎn)為標(biāo)準(zhǔn)的 cookieItem：

function setCookie(cookiesParam) {
let oldCookies = wx.getStorageSync('cookies') // try/catch 略過
let newCookies = {} // 由 cookiesParam 轉(zhuǎn)化為標(biāo)準(zhǔn)格式后的 cookies

for (let name in cookiesParam) {
if (isObject(cookiesParam[name])) { // 傳入是 Object 格式
let { value, expires, maxAge } = cookiesParam[name]
// 轉(zhuǎn)換為標(biāo)準(zhǔn) cookie 格式(cookieItem)
newCookies[name] = getStandardCookieItem({ name, value, expires, maxAge })
} else {
newCookies[name] = getStandardCookieItem({ name, value: cookiesParam[name] })
}
}

// 同步到本地 Storage
saveCookiesToStorage(Object.assign({}, oldCookies, newCookies))
}

3. 刪除 cookie————removeCookie()

步驟：從 Storage 中取出完整 cookies ==> 刪除指定的 cookie 項(xiàng) ==> 同步到本地 Storage

function removeCookie(cookieName) {
let cookies = wx.getStorageSync('cookies') // try/catch 略過

delete cookies[cookieName]

saveCookiesToStorage(Object.assign({}, cookies))
}

四、Cookie 在網(wǎng)絡(luò)中的傳遞

本節(jié)主要簡單實(shí)現(xiàn)設(shè)計(jì)圖中的【Request 基礎(chǔ)庫】部分

如上圖所示，Cookie 在網(wǎng)絡(luò)中的傳輸主要有四個過程：

• 客戶端發(fā)起 HTTP 請求
• 服務(wù)端響應(yīng)，并在響應(yīng)頭加上 Set-Cookie，客戶端接受并解析保存
• 下一次客戶端發(fā)起 HTTP 請求，在請求頭加上 Cookie
• 服務(wù)端識別出請求頭的 Cookie，作出相應(yīng)處理

以下是對一個請求的抓包示例：

在小程序中，請求發(fā)起有兩種方式：HTTP 和 WebSocket，這里以 HTTP 為例，先對請求 api 進(jìn)行「封裝」：

function requestPro({ url, data, header, method = 'GET' }) {
return new Promise((resolve, reject) => {
wx.request({
url,
data,
header: Object.assign({}, { 'Cookie': CookieLib.getCookiesStr() }, header), // 請求頭————帶上 Cookie
success (res) {
let { data : resData, header, statusCode } = res
let setCookieStr = header['Set-Cookie'] || header['set-cookie'] || ''

CookieLib.setCookieFromHeader(setCookieStr) // 響應(yīng)頭————解析 Set-Cookie
resolve(resData)
},
fail (err) {
reject(err)
}
})
})
}

如上代碼所示，Cookie 在前端側(cè)請求模塊中的處理主要有 3 點(diǎn)：

1. 請求攜帶

步驟：(每次發(fā)請求前)從 Storage 中取出完整 cookies ==> 轉(zhuǎn)化為 HTTP 規(guī)范的請求頭 Cookie 格式 ==> 設(shè)置到 Request Header 中

上面代碼中的 getCookiesStr() 直接取 cookies 拼接即可，返回示例：cookie1=xxx;cookie2=yyy。

2. 響應(yīng)設(shè)置

步驟：(每次收到響應(yīng)后)解析 Response Header 的 Set-Cookie 字段 ==> 轉(zhuǎn)為標(biāo)準(zhǔn) Cookie 格式 ==> setCookie()

這里處理 Set-Cookie 內(nèi)容時，有幾個點(diǎn)需要留意：- 最基本的格式：Set-Cookie: = - 可能同時包含多個 cookie 字段，以,分割(但需要排除時間值里的,) - 時間格式：Max-Age/Expires (不區(qū)分大小寫)

具體實(shí)現(xiàn)可在文末 Demo 中找到。

3. 編碼問題

「Cookie 值編碼方式」是容易產(chǎn)生困惑的地方，目前看到的廣泛做法都是使用「URL 編碼」。

但筆者翻閱 RFC6265^[4] 發(fā)現(xiàn)，原始規(guī)范中并沒有對編碼進(jìn)行指定，比如在第四章 Server Requirements (服務(wù)端)中是這樣描述：

To maximize compatibility with user agents, servers that wish to store arbitrary data in a cookie-value SHOULD encode that data, for example, using Base64 [RFC4648].

“為了最好的兼容效果，服務(wù)端應(yīng)該對 cookie 值進(jìn)行編碼，例如使用 Base64。”

而在第五章 User Agent Requirements (客戶端，也就是瀏覽器)，則是“建議以第四章服務(wù)端的實(shí)現(xiàn)為準(zhǔn)”。

總之規(guī)范并沒有指定使用「URL 編碼」，但基于該編碼方案已經(jīng)深入人心，也就順其自然成了“默認(rèn)選擇”。那這里也不做例外，瀏覽器怎么做，咱們小程序也保持一致。

在瀏覽器中，推薦 cookie 值經(jīng)過 encode 編碼后保存下來，所以直接取到的也是 encode 后的值，所以追加在請求頭 Cookie 字段，就不需要 decode 解碼了，直接拼接即可(但基礎(chǔ)庫 API 的 get 操作最終需要進(jìn)行 decode 解碼)。

而對于響應(yīng)頭 Set-Cookie 的值，我們認(rèn)為后端已經(jīng)做了 encode 編碼，所以前端不需要處理，直接存進(jìn) Storage 即可。

五、性能優(yōu)化(高頻讀寫)

前面實(shí)現(xiàn)中每次讀寫 cookie 都會調(diào)用小程序 Storage API(而且是同步的)，小程序框架會讀寫到本地 Storage。對于高頻場景，可以將 cookie 在內(nèi)存中維護(hù)一份，讀寫都直接走「內(nèi)存層」，有更新才同步到「Storage 層」。

1. 初始化

首先需要在內(nèi)存中聲明一個 _COOKIES(命名自行 diy)，建議在 cookie 基礎(chǔ)庫中聲明，便于統(tǒng)一維護(hù)。

2. 讀

前面初始化時已經(jīng)從 Storage 讀取一次 cookies，后續(xù) getCookie 就直接讀內(nèi)存的 _COOKIES 即可。

3. 寫

寫操作直接更新內(nèi)存，間接更新 Storage。如果有高頻寫場景，可以考慮做個任務(wù)隊(duì)列進(jìn)行節(jié)流。

六、單元測試

微信官方在 2019 年 5 月推出了「小程序自動化 SDK」 miniprogram-automator，經(jīng)過半年多的迭代，目前已基本穩(wěn)定下來。

在購物小程序場景試用了一下，cookie 相關(guān)的用例很快就完成了，簡直是開發(fā)者的福音：真香！！！

實(shí)際項(xiàng)目中，對 cookie 的單元測試可以分為兩類：

• 小程序全局范圍的 cookie 驗(yàn)證(比如初始化小程序后，有沒有種下版本號、訪問行為等關(guān)鍵 cookie)
• cookie 基礎(chǔ)庫 API 驗(yàn)證(比如 get/set/remove 等各個 API 是否正常工作)

以驗(yàn)證 setCookie()API 為例：

it('API 驗(yàn)證：setCookie()', async () => {
await miniProgram.evaluate(() => {
wx.CookieLib.setCookie({ // 調(diào)用 API
cookie1: 12345,
})
})

let { cookies } = await miniProgram.callWxMethod('getStorageSync', 'cookies')
expect(cookies['cookie1'].value).toBe(12345) // 期望成功設(shè)置 cookie1為12345
})

這里為了方便測試用例調(diào)用基礎(chǔ)庫 API，在小程序啟動前，把 Cookie 基礎(chǔ)庫(CookieLib)掛到了 wx 對象上，實(shí)現(xiàn)方式是使用 node 讀寫文件的 API 去【植入代碼】：

fs.appendFileSync('./your_project/app.js', ''\n wx.CookieUtil = require(\'./lib/cookie.js\');\n'')

七、Cookie 安全

Cookie 安全是一個比較大的話題，這里只簡單列出和小程序相關(guān)的幾個點(diǎn)。

path、domin、HttpOnly、Secure、SameSite

小程序中已經(jīng)做了一些安全措施，比如只能走 HTTPS、合法域名需要管理員到微信后臺進(jìn)行配置、Storage 只能由寫入它的小程序中訪問，等等。因此 path、domin、HttpOnly、Secure、SameSite 這些字段在小程序環(huán)境下的價(jià)值沒有瀏覽器環(huán)境大，本例中沒有使用(懶..)，而實(shí)際業(yè)務(wù)場景可以按自身情況決定是否要使用。

白名單機(jī)制

1 前端維護(hù)(大小/數(shù)量)

通常瀏覽器保持的 Cookie 數(shù)據(jù)不超過 4k，部分瀏覽器限制同一站點(diǎn)最多 cookie 數(shù)為 20 個。

如果業(yè)務(wù)龐大的話，建議在 Cookie 基礎(chǔ)庫做一套「白名單」機(jī)制，在白名單內(nèi)才可以寫入，以此防止“非法寫入”或“內(nèi)容超大導(dǎo)致信息丟失”的問題。

2 后臺維護(hù)(網(wǎng)關(guān)白名單)

同樣的，建議從網(wǎng)關(guān)層面，建立一個“可信 cookie”白名單，自動過濾請求中的“非法 cookie”字段。

前端防篡改

小程序前端更多是防“誤改”————即在操作 Cookie 過程中，發(fā)生了意料之外的修改。通常發(fā)生在 JS “引用拷貝”特性上，比如前面提到的內(nèi)存維護(hù)一個 _Cookies，如果有一個 API getAllCookies() 直接將這份內(nèi)存版 cookies 暴露出去，對象引用容易被連帶修改。所以 cookie 基礎(chǔ)庫需要控制暴露 API 的能力范圍，并對取值進(jìn)行“深拷貝”。

Session

Session 機(jī)制將用戶狀態(tài)放在了服務(wù)端維護(hù)，具備更好的安全性，而且目前各種后端對于 session 的存儲和同步都有很成熟的技術(shù)方案，有條件的業(yè)務(wù)應(yīng)以 Session 為主做會話保持。

指紋上報(bào)

用戶訪問時生成設(shè)備指紋并上報(bào)(通常是登錄/結(jié)算等環(huán)節(jié))，業(yè)務(wù)后臺配合風(fēng)控系統(tǒng)，遇到異常請求時下發(fā)驗(yàn)證環(huán)節(jié)。

八、完整小程序?qū)崿F(xiàn) Demo

代碼片段：https://developers.weixin.qq.com/s/x4sFASmh7xdq

九、小結(jié)

本文先解析了瀏覽器的 Cookie 機(jī)制 運(yùn)作原理，然后使用「數(shù)據(jù)緩存」和「網(wǎng)絡(luò)」能力，以 公共基礎(chǔ)庫 的形式，在小程序中實(shí)現(xiàn)了一套 Cookie 方案。希望對大家有所幫助。

十、相關(guān)鏈接

• RFC6265(HTTP 狀態(tài)管理機(jī)制規(guī)范)^[5]
• HTTP Cookies Explained^[6]
• 小程序數(shù)據(jù)緩存 Storage API^[7]
• 小程序網(wǎng)絡(luò) Network API^[8]
• 小程序自動化 SDK^[9]
• 小程序?qū)崿F(xiàn) Demo^[10]

參考資料

[1]

數(shù)據(jù)緩存 Storage: https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

[2]

網(wǎng)絡(luò) Network: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

[3]

在這里: https://developers.weixin.qq.com/s/x4sFASmh7xdq

[4]

RFC6265: https://tools.ietf.org/html/rfc6265

[5]

RFC6265(HTTP 狀態(tài)管理機(jī)制規(guī)范): https://tools.ietf.org/html/rfc6265

[6]

HTTP Cookies Explained: https://humanwhocodes.com/blog/2009/05/05/http-cookies-explained/

[7]

小程序數(shù)據(jù)緩存 Storage API: https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

[8]

小程序網(wǎng)絡(luò) Network API: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

[9]

小程序自動化 SDK: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/

[10]

小程序?qū)崿F(xiàn) Demo: https://developers.weixin.qq.com/s/x4sFASmh7xdq

總結(jié)

以上是生活随笔為你收集整理的前端怎么获取cookie的值_京东购物小程序cookie方案实践（附Demo）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。