本地存储与Cookie

#1 楼

Cookies和本地存储有不同的用途。 Cookies主要用于读取服务器端，本地存储只能由客户端读取。所以问题是，在您的应用程序中，谁需要此数据（客户端还是服务器）？

如果是您的客户端（您的JavaScript），则一定要切换。您通过在每个HTTP标头中发送所有数据来浪费带宽。

如果是服务器，本地存储就没那么有用了，因为您必须以某种方式（使用Ajax或隐藏的表单字段或其他内容）。如果服务器仅需要每个请求的全部数据的一小部分，这可能是可以的。 />：根据技术上的差异以及我的理解：


除了作为保存数据的旧方法之外，Cookie还可以限制4096字节（实际上为4095个字节）—每个Cookie。每个域的本地存储最大为5MB，因此Question也会提到它。
localStorage是Storage接口的实现。它存储没有到期日期的数据，并且仅通过JavaScript或清除浏览器缓存/本地存储的数据来清除-与cookie到期不同。

#2 楼

在JWT的上下文中，Stormpath写了一篇相当有帮助的文章，概述了存储它们的可能方法以及每种方法的（缺点）优点。

它还简要介绍了XSS和CSRF。攻击，以及如何加以打击。

我在下面附上了一些简短的摘录，以防它们的文章被下线/其站点出现故障。

本地存储

问题：


Web存储（localStorage / sessionStorage）可通过同一域上的JavaScript进行访问。这意味着您站点上运行的所有JavaScript都可以访问Web存储，因此，它很容易受到跨站点脚本（XSS）攻击的攻击。简而言之，XSS是攻击者可以注入将在您的页面上运行的JavaScript的一种漏洞。基本的XSS攻击尝试通过表单输入注入JavaScript，攻击者在其中输入警报（“您被黑”）；转换为一个表单，以查看它是否由浏览器运行并且可以被其他用户查看。


预防措施：常见的响应是转义和编码所有不受信任的数据。但这还远未达到完整的水平。 2015年，现代网络应用使用托管在CDN或外部基础架构上的JavaScript。现代网络应用程序包括用于A / B测试，渠道/市场分析和广告的第三方JavaScript库。我们使用Bower之类的程序包管理器将其他人的代码导入我们的应用程序。

如果仅破坏了您使用的一个脚本怎么办？恶意
JavaScript可以嵌入到页面中，并且Web存储受到损害。这些类型的XSS攻击可以使所有人的Web存储
在他们不知情的情况下访问您的网站。这可能就是为什么一堆组织建议不要在网络存储中存储任何有价值或信任的信息的原因。这包括会话标识符和
令牌。

作为一种存储机制，Web存储在传输过程中不会强制执行任何安全标准。读取并使用Web存储的人必须
进行尽职调查，以确保他们始终通过HTTPS发送JWT，而从不通过HTTP发送JWT。

问题：



Cookies与HttpOnly cookie标志一起使用时，不能通过JavaScript访问，并且不受XSS的影响。您还可以设置安全cookie标志，以确保仅通过HTTPS发送cookie。这是过去曾经利用cookie存储令牌或会话数据的主要原因之一。现代开发人员不愿使用Cookie，因为传统上他们要求将状态存储在服务器上，从而破坏了RESTful最佳实践。如果您将JWT存储在cookie中，则cookie作为一种存储机制不需要在服务器上存储状态。这是因为JWT封装了服务器处理请求所需的所有内容。

但是，cookie容易受到另一种攻击类型的攻击：跨站点请求伪造（CSRF）。 CSRF攻击是一种攻击类型，当恶意网站，电子邮件或博客导致用户的Web浏览器对用户信任的网站执行有害操作时，就会发生这种攻击。当前已认证。这是利用
浏览器处理cookie的方式。 Cookie只能发送到允许的
域中。默认情况下，这是最初
设置cookie的域。无论您是在galaxies.com还是hahagonnahackyou.com上，都将发送Cookie以发出请求，这是
预防措施：

/>除了SameSite和HttpOnly之外，现代浏览器还支持Secure标志。此标志的目的是防止cookie在跨站点请求中传输，从而防止多种CSRF攻击。

对于不支持SameSite的浏览器，可以通过使用同步令牌模式来防止CSRF。这
听起来很复杂，但是所有现代Web框架都支持
this。您的域。直接来自AngularJS文档：

执行XHR请求时，$ http服务从
cookie（默认情况下为XSRF-TOKEN）读取令牌并将其设置为HTTP标头
（X-XSRF-TOKEN）。由于只有在您的域上运行的JavaScript可以读取cookie，因此可以确保您的服务器XHR来自在您的域上运行的JavaScript。您可以通过添加xsrfToken JWT声明来使CSRF保护成为无状态的：用于存储JWT。通过
从API检查HTTP Referer和Origin标头也可以部分阻止CSRF。 CSRF
攻击将具有与应用程序无关的Referer和Origin头。


全文可在此处找到：
https：/ /stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

他们还提供了有关如何最佳设计和实现JWT的有用文章，关于令牌本身的结构：
https://stormpath.com/blog/jwt-the-right-way/

#3 楼

使用localStorage，Web应用程序可以在用户的​​浏览器中本地存储数据。在HTML5之前，应用程序数据必须存储在cookie中，并包含在每个服务器请求中。大量数据可以存储在本地，而不会影响网站性能。尽管localStorage更现代，但两种技术都有其优缺点。永远存在）
永久数据
到期日期

缺点


每个域都将其所有cookie存储在单个字符串中，这样可以使
解析数据变得困难
数据未加密，这成为一个问题，因为... ...尽管
尺寸很小，但每个HTTP请求发送的Cookie都受到限制。 4KB）
可以从cookie中执行SQL注入

本地存储

专业人士


大多数现代浏览器都支持
直接存储在浏览器中的持久数据
同源规则适用于本地存储数据
不是随每个HTTP请求一起发送
每个域〜5MB存储（即5120KB）

缺点


以前不受任何支持：IE 8，Firefox 3.5，Safari 4，Chrome 4，Opera 10.5，iOS 2.0，Android 2.0 >如果服务器需要您蓄意发送的已存储客户端信息。

localStorage的用法与会话一的用法几乎相同。他们有很多精确的方法，因此从会话切换到localStorage确实是小孩子的游戏。但是，如果存储的数据对于您的应用程序确实至关重要，则可能会使用cookie作为备份，以防localStorage不可用。如果要检查浏览器对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
}

“ Secure（SSL）上的本地存储值页是孤立的”
有人注意到请记住，localStorage不会被
如果您将安全协议从“ http”切换为“ https”，则在
cookie仍可访问的地方可用。如果您使用安全协议，请务必注意
。

#4 楼

Cookies：


在HTML5之前引入。
具有到期日期。
通过JS或浏览器的清除浏览数据或到期日期之后的清除。
每个请求将发送到服务器。
容量为4KB。 br />只有字符串可以存储在cookie中。
cookie有两种类型：持久性和会话。

本地存储： HTML5引入。
没有到期日期。
通过JS或浏览器的清除浏览数据进行清理。
您可以选择何时必须将数据发送到服务器。
容量为5MB。
数据可以无限期存储，并且必须是字符串。
只有一种类型。

#5 楼

好吧，本地存储速度很大程度上取决于客户端使用的浏览器以及操作系统。 Mac上的Chrome或Safari可能比PC上的Firefox快得多，尤其是使用较新的API时。与往常一样，测试是您的朋友（我找不到任何基准）。

我真的看不到Cookie与本地存储的巨大差异。另外，您应该更加担心兼容性问题：并不是所有的浏览器都已经开始支持新的HTML5 API，因此cookie是提高速度和兼容性的最佳选择。

#6 楼

还值得一提的是，当用户在某些版本的移动Safari中以“私有”模式浏览时，无法使用localStorage。

引自MDN（https://developer.mozilla.org/zh-CN / docs / Web / API / Window / localStorage）：


注意：从iOS 5.1开始，Safari Mobile将localStorage数据存储在缓存文件夹中，偶尔会按照操作系统的要求进行清理，通常是在空间不足的情况下。 Safari Mobile的Private
浏览模式还阻止完全写入localStorage。

#7 楼

本地存储最多可存储5mb的脱机数据，而会话也最多可存储5mb的数据。但是cookie只能以文本格式存储4kb数据。

LOCAl和Session以JSON格式存储数据，因此易于解析。但是Cookies数据是字符串格式。