Cookie就擺在那，爲何死活吃不到？

做者：codexu

_

瀏覽器裏明明存在的cookie，竟然獲取不到？？？

console.log(document.cookie);
// 沒有???

原由

近來閒來無事，打算了解一下後端，既然想一探究竟，就從基本的註冊登陸開始作起。

技術選型

做爲一名前端開發人員，用 Node.js 去體驗後端應該是最快上手的方式了。看了一下文檔，好長...沒那麼多時間看，直接...

• 框架 koa2
• 數據庫 Mysql，不會操做數據庫找到了 Sequelize
• 請求 Axios

思路

• 帳戶密碼，不作加密，直接明文。

• 登錄

  • 使用 jwt (jsonwebtoken) 生成 token 。
  • 使用 koa2 ctx.cookies.set 在後端設置 cookie ，保存 token 。
• 跨域請求 koa2-cors

問題來了

問題一：填好用戶名密碼，點擊登陸，瀏覽器中沒有被設置 cookie

解決辦法： 使用 Axios 請求時，增長屬性 withCredentials: true，這樣就請求就能夠攜帶 cookie 了。

產生這種狀況的緣由是由於 koa2-cors，若是在前端使用代理跨域不會出現這種狀況。

問題二：瀏覽器中雖然能看到 cookie 中已經存在 token，可是前端代碼中獲取不到

解決辦法：koa2 設置 cookie 時，設置 httpOnly: false 便可。

查找緣由

doucment.cookie 沒法獲取到 cookie 是由於 同源策略 和 HttpOnly 標記的緣由。

withCredentials：表示跨域請求時是否須要使用憑證，默認是 false

MDN
XMLHttpRequest.withCredentials 屬性是一個 Boolean 類型，它指示了是否該使用相似 cookies,authorization headers(頭部受權)或者TLS客戶端證書這一類資格證書來建立一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用 withCredentials 屬性是無效的。
此外，這個指示也會被用作響應中 cookies 被忽視的標示。默認值是 false。
若是在發送來自其餘域的 XMLHttpRequest 請求以前，未設置 withCredentials 爲true，那麼就不能爲它本身的域設置 cookie 值。而經過設置 withCredentials 爲true得到的第三方 cookies，將會依舊享受同源策略，所以不能被經過 document.cookie 或者從頭部相應請求的腳本等訪問。

httpOnly：服務器可訪問 cookie, 默認是 true

MDN
爲避免跨域腳本 (XSS) 攻擊，經過JavaScript的 Document.cookie API沒法訪問帶有 HttpOnly 標記的Cookie，它們只應該發送給服務端。若是包含服務端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調用，那麼就應該爲其設置 HttpOnly 標記。

換種方式

MDN 上說 可能會 XSS 攻擊，因此換種方式，存儲到 localstorage 裏吧。請求時，將 token 加在 header 中 Authorization。

總結

雖然繞了一圈，好像總結了兩個沒啥卵用的知識點，可是學習就是這樣，遇到坑就積累一下。

但願有大佬能指點一下，如何作一個安全的登陸。