JWT Token儲存在Cookie還是LocalStorage

21ca發表於2017-07-28
JWTCookie
JWT  是將web 應用無狀態化的一種方式。

1. 首先拿到JWT Token

HTTP/1.1
POST /token
Host: galaxies.com
Content-Type: application/x-www-form-urlencoded
username=abc&password=password

伺服器返回
HTTP/1.1 200 OK
{
  "access_token": "eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGxlL.mFrs3Zo8eaSNcxiNfvRh9dqKP4F1cB",
       "expires_in":3600
 }

下次請求時，需要帶上這個token，以便伺服器驗證。

2. 將Token儲存於LocalStorage或SessionStorage

function tokenSuccess(err, response) {
    if(err){
        throw err;
    }
    $window.sessionStorage.accessToken = response.body.access_token;
}

接下來的請求需要帶上Token：
HTTP/1.1
GET /stars/pollux
Host: galaxies.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGxlL.mFrs3Zo8eaSNcxiNfvRh9dqKP4F1cB


缺點：
由於LocalStorage 和 SessionStorage 都可以被 javascript 訪問，所以容易受到XSS攻擊。尤其是專案中用到很多第三方的Javascript類庫。
另外，需要應用程式來保證Token只在HTTPS下傳輸。

3. 將Token儲存於Cookie

HTTP/1.1 200 OK
Set-Cookie: access_token=eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGxlL.mFrs3Zo8eaSNcxiNfvRh9dqKP4F1cB; Secure; HttpOnly;

隨後的請求需要帶上Token
GET /stars/pollux
Host: galaxies.com
Cookie: access_token=eyJhbGciOiJIUzI1NiIsI.eyJpc3MiOiJodHRwczotcGxlL.mFrs3Zo8eaSNcxiNfvRh9dqKP4F1cB;

優點：
可以指定 httponly，來防止被Javascript讀取，也可以指定secure，來保證token只在HTTPS下傳輸。
缺點：
不符合Restful 最佳實踐。
容易遭受CSRF攻擊 （可以在伺服器端檢查 Refer 和 Origin）

4. 推薦使用Cookie來儲存Token

相比較而言，Web Storage比Cookie更容易受到攻擊。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/10742815/viewspace-2142725/，如需轉載，請註明出處，否則將追究法律責任。

相關文章