html - localstorage - token in cookie




本地存儲vs Cookie (4)

Cookie和本地存儲的用途各不相同。 Cookies主要用於讀取服務器端 ,本地存儲只能由客戶端讀取。 所以問題是,在您的應用程序中,誰需要這些數據 - 客戶端還是服務器?

如果它是你的客戶(你的JavaScript),那麼通過一切手段切換。 您通過發送每個HTTP標頭中的所有數據來浪費帶寬。

如果它是你的服務器,本地存儲不是很有用,因為你必須以某種方式轉發數據(使用Ajax或隱藏的表單域或其他)。 如果服務器只需要每個請求的總數據的一小部分,這可能是好的。

儘管如此,您仍然希望將會話cookie作為cookie保留。

根據技術差異,以及我的理解:

  1. 除了保存數據的舊方式之外,Cookie還為您提供了4096個字節(實際上為4095 字節)的限制,即每個Cookie。 本地存儲大小為每個域5MB - 所以問題也提到它

  2. localStorageStorage接口的實現。 它存儲的數據沒有過期日期只能通過JavaScript清除,或清除瀏覽器緩存/本地存儲的數據 - 不像cookie過期。

我想通過將所有Cookie移動到本地存儲中來減少我的網站上的加載時間,因為它們似乎具有相同的功能。 除了明顯的兼容性問題之外,使用本地存儲替換Cookie功能是否有任何優點/缺點(特別是性能方面)?


在JWTs的背景下 ,Stormpath寫了一篇相當有用的文章,概述了可能的存儲方法以及與每種方法有關的(dis-)優點。

它還簡要介紹了XSS和CSRF攻擊,以及如何對付它們。

我附上了以下文章的一些簡短摘要,以防他們的文章脫機/他們的網站停止運行。

本地存儲

問題:

Web存儲(localStorage / sessionStorage)可以通過JavaScript在同一個域上訪問。 這意味著您網站上運行的任何JavaScript都可以訪問Web存儲,並且因此可能容易受到跨站點腳本(XSS)攻擊的影響。 簡而言之,XSS是一種攻擊者可以注入將在您的頁面上運行的JavaScript的漏洞。 基本的XSS攻擊嘗試通過表單輸入註入JavaScript,攻擊者在這裡輸入警報('你被黑客攻擊'); 轉換成表格以查看它是否由瀏覽器運行並且可以被其他用戶查看。

預防:

為了防止XSS,常見的反應是轉義和編碼所有不可信的數據。 但這遠不是完整的故事。 2015年,現代網絡應用使用託管在CDN或外部基礎架構上的JavaScript。 現代Web應用程序包括用於A / B測試,漏斗/市場分析和廣告的第三方JavaScript庫。 我們使用像Bower這樣的軟件包管理器將其他人的代碼導入到我們的應用中。

如果只使用其中一個腳本受到攻擊,該怎麼辦? 惡意JavaScript可以嵌入在頁面中,Web存儲受到威脅。 這些類型的XSS攻擊可以在不知情的情況下獲取訪問您網站的所有人的網絡存儲。 這可能是為什麼一些組織建議不要在Web存儲中存儲任何有價值的東西或信任任何信息。 這包括會話標識符和令牌。

作為存儲機制,Web存儲在傳輸過程中不執行任何安全標準。 無論誰讀取Web Storage並使用它,都必須進行盡職調查,以確保他們始終通過HTTPS發送JWT,而不會使用HTTP。

餅乾

問題:

Cookie與HttpOnly cookie標誌一起使用時,不能通過JavaScript訪問,並且不受XSS影響。 您還可以設置安全cookie標誌以保證cookie僅通過HTTPS發送。 這是過去利用cookie存儲令牌或會話數據的主要原因之一。 現代開發人員不願意使用cookie,因為他們傳統上要求將狀態存儲在服務器上,從而打破了RESTful最佳實踐。 如果您要在Cookie中存儲JWT,則作為存儲機制的Cookie不需要將狀態存儲在服務器上。 這是因為JWT封裝了服務器為請求提供服務所需的所有內容。

但是,Cookie容易受到不同類型的攻擊:跨站請求偽造(CSRF)。 CSRF攻擊是指當惡意網站,電子郵件或博客導致用戶的Web瀏覽器在用戶當前通過身份驗證的受信任站點上執行不需要的操作時發生的一種攻擊。 這是瀏覽器如何處理cookie的一個漏洞。 Cookie只能發送到允許的域名。 默認情況下,這是最初設置Cookie的域。 無論您是在galaxies.com還是hahagonnahackyou.com,Cookie都會發送請求。

預防:

通過使用同步的令牌模式可以防止CSRF。 這聽起來很複雜,但所有現代Web框架都支持這一點。

例如,AngularJS有一個解決方案來驗證該cookie只能被您的域訪問。 直接從AngularJS文檔:

執行XHR請求時,$ http服務從cookie(默認為XSRF-TOKEN)讀取一個標記,並將其設置為HTTP標頭(X-XSRF-TOKEN)。 由於只有在您的域上運行的JavaScript才能讀取Cookie,因此您的服務器可以確保XHR來自運行在您的域上的JavaScript。 您可以通過包含xsrfToken JWT聲明來使此CSRF保護無狀態:

{
  "iss": "http://galaxies.com",
  "exp": 1300819380,
  "scopes": ["explorer", "solar-harvester", "seller"],
  "sub": "[email protected]",
  "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e"
}

利用您的Web應用程序框架的CSRF保護功能,Cookie可以穩固地存儲JWT。 通過檢查API的HTTP Referer和Origin頭,也可以部分阻止CSRF。 CSRF攻擊將具有與您的應用程序無關的Referer和Origin標頭。

完整的文章可以在這裡找到: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/ : https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

他們也有一篇關於如何最好地設計和實現JWT的有用文章,關於令牌本身的結構: https://stormpath.com/blog/jwt-the-right-way/ ://stormpath.com/blog/jwt-the-right-way/


本地存儲可以存儲高達10MB的離線數據,而會話可以存儲高達5 MB的數據。 但Cookie可以僅以文本格式存儲4kb數據。


通過localStorage ,Web應用程序可以在用戶的瀏覽器中本地存儲數據。 在HTML5之前,應用程序數據必須存儲在cookie中,並包含在每個服務器請求中。 localStorage更安全,並且可以在本地存儲大量數據,而不會影響網站性能。 儘管localStorage更現代化,但這兩種技術都有一些優點和缺點。

餅乾

優點

  • 傳統支持(它一直存在)
  • 持久數據
  • 到期日期

缺點

  • 每個域都將其所有cookie存儲在一個字符串中,這可能會使解析數據變得困難
  • 數據是未加密的,這成為一個問題,因為......雖然規模很小,但Cookie隨每個HTTP請求一起發送。限制大小(4KB)
  • SQL注入可以從cookie執行

本地存儲

優點

  • 支持大多數現代瀏覽器
  • 持久數據直接存儲在瀏覽器中
  • 同源規則適用於本地存儲數據
  • 不會隨每個HTTP請求一起發送
  • 〜每個域5MB存儲空間(即5120KB)

缺點

  • 以前不支持的東西:IE 8,Firefox 3.5,Safari 4,Chrome 4,Opera 10.5,iOS 2.0,Android 2.0
  • 如果服務器需要存儲客戶端信息,您有意發送它。

localStorage使用與第一次使用幾乎相同。 他們有非常確切的方法,所以從會話切換到localStorage真的是孩子們的玩耍。 但是,如果存儲的數據對於您的應用程序非常重要,那麼在localStorage不可用的情況下,您可能會使用cookie作為備份。 如果你想檢查瀏覽器對localStorage支持,你所要做的就是運行這個簡單的腳本:

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

“安全(SSL)頁面上的localStorage值是孤立的”,因為有人注意到,如果您從“http”切換到“https”安全協議(即cookie仍然可訪問),localStorage將無法使用。 如果您使用安全協議,則需要注意這一點。





local-storage