我想通过将所有cookie移动到本地存储来减少我网站上的加载时间,因为它们似乎具有相同的功能。除了明显的兼容性问题外,使用本地存储替代cookie功能有什么利与弊(尤其是性能方面)吗?


当前回答

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

LOCAl和Session存储数据为JSON格式,因此易于解析。但是cookie数据是字符串格式。

其他回答

关键的不同点:

容量:

本地存储:10MB 饼干:4 kb

浏览器支持:

本地存储:HTML5 Cookies: HTML4, HTML5

存储位置:

本地存储:仅限浏览器 cookie:浏览器和服务器

随请求发送:

本地存储:是 饼干:不

访问:

本地存储:任何窗口 Cookies:任何窗口。

到期日期:

本地存储:永不过期,直到javascript完成。 cookie:有,有有效期。

注意:使用它,适合你的。

在jwt上下文中,Stormpath写了一篇相当有用的文章,概述了存储jwt的可能方法,以及每种方法的优缺点。

它还简要介绍了XSS和CSRF攻击,以及如何对抗它们。

我在下面附上了这篇文章的一些片段,以防他们的文章下线/他们的网站瘫痪。

本地存储

问题:

Web Storage (localStorage/sessionStorage)可以在同一个域中通过JavaScript访问。这意味着在您的站点上运行的任何JavaScript都可以访问web存储,因此很容易受到跨站点脚本(XSS)攻击。简而言之,XSS是一种漏洞,攻击者可以在其中注入将在您的页面上运行的JavaScript。基本的XSS攻击尝试通过表单输入注入JavaScript,攻击者在表单输入中放置警报(“您被黑客攻击”);输入到表单中,以查看它是否由浏览器运行,是否可以由其他用户查看。

预防:

为了防止XSS,常见的响应是转义和编码所有不可信的数据。但这远不是故事的全部。2015年,现代web应用程序使用托管在cdn或外部基础设施上的JavaScript。现代网络应用包括用于A/B测试、漏斗/市场分析和广告的第三方JavaScript库。我们使用包管理器(如Bower)将其他人的代码导入到我们的应用中。 如果您使用的脚本中只有一个被破坏了怎么办?恶意的 JavaScript可以嵌入到页面中,Web Storage也可以 妥协。这些类型的XSS攻击可以获取每个人的Web存储 在他们不知情的情况下访问你的网站。这可能就是为什么a 很多组织都建议不要存储任何有价值或值得信任的东西 网络存储中的任何信息。这包括会话标识符和 令牌。 作为一种存储机制,Web storage并不强制执行任何安全性 转移过程中的标准。任何阅读和使用Web存储的人都必须这样做 尽职调查以确保他们总是通过HTTPS发送JWT 从不使用HTTP。

饼干

问题:

当与HttpOnly cookie标志一起使用时,cookie不能通过JavaScript访问,并且不受XSS影响。您还可以设置安全cookie标志,以确保cookie仅通过HTTPS发送。这是过去利用cookie来存储令牌或会话数据的主要原因之一。现代开发人员对使用cookie犹豫不决,因为它们传统上要求将状态存储在服务器上,从而破坏了RESTful的最佳实践。如果您在cookie中存储JWT,那么cookie作为一种存储机制不需要将状态存储在服务器上。这是因为JWT封装了服务器为请求服务所需的一切。 然而,cookie容易受到另一种类型的攻击: 跨站请求伪造(CSRF)。CSRF攻击是一种攻击 当恶意网站,电子邮件或博客导致用户的 Web浏览器在受信任的站点上执行不希望的操作 用户当前认证成功。这是如何利用 浏览器处理cookie。cookie只能被发送到域 这是允许的。默认情况下,这是最初的域 设置cookie。cookie将被发送给请求,不管 不管你是在galaxies.com还是hahagonnahackyou.com。

预防:

除了HttpOnly和Secure之外,现代浏览器还支持SameSite标志。该标志的作用是防止cookie在跨站请求中传输,防止多种CSRF攻击。 对于不支持SameSite的浏览器,可以通过使用同步令牌模式来防止CSRF。这 听起来很复杂,但是所有的现代web框架都支持 这一点。 例如,AngularJS有一个解决方案来验证cookie是否正确 只能通过您的域访问。直接来自AngularJS文档: 当执行XHR请求时,$http服务从 cookie(默认为XSRF-TOKEN),并将其设置为HTTP报头 (X-XSRF-TOKEN)。因为只有在你的域中运行的JavaScript可以 读取cookie,您的服务器可以确保XHR来自 JavaScript在您的域上运行。你可以让这个CSRF保护 通过包含xsrfToken JWT声明无状态: { “国际空间站”:“http://galaxies.com”, “实验”:1300819380, “scope”:[“explorer”,“solar harvester”,“seller”], “子”:“tom@andromeda.com”, :“xsrfToken d9b9714c - 7 - ac0 42 - e0 - 8696 - 2 dae95dbc33e” } 利用您的web应用程序框架的CSRF保护使cookie摇滚 固态存储JWT。CSRF也可以通过以下方法部分预防 检查API中的HTTP Referer和Origin头。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/

饼干:

可以通过JavaScript访问,所以Cookie的数据可以被XSS窃取 攻击(跨站点脚本攻击),但设置HttpOnly标志 Cookie阻止JavaScript访问Cookie的数据 保护免受XSS攻击。 是易受CSRF(跨站点请求伪造),但设置 带Lax到Cookie的SameSite标志可以缓解CSRF,而设置带Strict到Cookie的SameSite标志可以防止CSRF CSRF。 必须有到期日,所以当到期日过后,Cookie是 自动删除,所以即使你忘记删除Cookie, Cookie因过期而自动删除。 通常大小约为4KB(取决于浏览器)。

本地存储:

通过JavaScript访问本地存储的数据可以被XSS窃取 攻击(跨站脚本攻击),那么,根据我的研究, 对于本地存储的XSS没有简单的预防措施 攻击。 不容易受到CSRF(跨站点请求伪造)的攻击。 没有过期日期,因此如果您忘记删除本地存储 数据,本地存储数据可以永久保存。 一般大小约为5MB(取决于浏览器)。

我建议敏感数据使用Cookie,非敏感数据使用本地存储。

饼干:

在HTML5之前介绍。 有有效期。 通过JS或浏览器的“清除浏览数据”或过期日期清除。 将每个请求发送到服务器。 容量为4KB。 只有字符串可以存储在cookie中。 有两种类型的cookie:持久cookie和会话cookie。

本地存储:

由HTML5引入。 没有过期日期。 由JS或浏览器的“清除浏览数据”清除。 您可以选择何时必须将数据发送到服务器。 容量为5MB。 数据是无限存储的,必须是字符串。 只有一种。

本地存储速度很大程度上取决于客户端使用的浏览器以及操作系统。mac上的Chrome或Safari可能比PC上的Firefox快得多,尤其是使用了更新的api后。和往常一样,测试是你的朋友(我找不到任何基准测试)。

我真的没有看到cookie和本地存储有很大的区别。此外,你应该更担心兼容性问题:不是所有的浏览器都开始支持新的HTML5 api,所以cookie将是你在速度和兼容性方面的最佳选择。