请停止使用本地存储

我不知道它是什么，它是什么，这使得这么多开发人员在本地存储中的商店信息，但无论原因如何：练习都需要消亡。事情易于失控。

几乎每天我都偶然地跨过一个新的网站，在本地存储中存储敏感的用户信息，并困扰我知道这么多开发人员通过这样做开启灾难性的安全问题。

让我们有一颗核心，谈谈本地存储以及为什么要将其暂停存储会话数据。

如果我早些时候有点脾气暴躁，我很抱歉。你不值得！哎呀，您甚至可以熟悉本地存储的情况，更不用说将它用作存储的会话信息！

让我们从基础上开始：本地存储是HTML5的新功能，允许您（一个Web开发人员）使用JavaScript存储您希望的浏览器中所需的任何信息。简单，对吗？

在实践中，本地存储只是您将数据到（或从中删除数据）的一个大型旧旧JavaScript对象。这是一些JavaScript代码·存储在本地存储中的一些个人信息的示例，将其回馈给我，然后（可选）删除它：

//您可以使用syntaxlocalstorage.username =＆＃34存储本地存储中的数据; rdegges＆＃34; localstorage.setItem（＆＃34; favicitecolor＆＃34;＆＃34;黑色＆＃34;）; //一次数据在localstorage，它＆＃39; ll永远留在那里，直到它是//明确的recumentalealert（localstorage.username +＆＃34;真的喜欢颜色＆＃34; + localstorage.favoritecolor +＆＃34;。＆＃34 ;）; //从本地存储中删除数据也很容易。下面取消注释下面的行//销毁条目// localstorage.removeItem（＆＃34;用户名＆＃34;）; // localstorage.removeItem（＆＃34; preyitecolor＆＃34;）;

如果在测试HTML页面上的浏览器中运行上面的JavaScript代码，那么您将“rdegges真的喜欢颜色黑色”短语。在警报消息中。如果您将打开开发人员工具，您将能够看到用户名和收藏的变量都存储在本地存储中的inyour浏览器中：

现在您可能想知道是否有某种方式使用本地存储，以便在某些时候自动删除您存储的Thedata，并且您不需要划分您放入那里的每个变量。幸运的是，HTML5WORKING组（喊道！）有你的背部。他们为HTML5添加了一个叫做的东西，它与本地存储完全相同，除了用户关闭“字符”选项卡时会自动删除其存储的所有数据。

现在我们在同一页面上关于本地存储的情况，让我们谈谈什么让它变得很酷！即使本文的全部点是对Distuadeyou使用本地存储来存储会话数据，本地存储仍然具有一些有趣的属性。

一方面：它是纯粹的javascript！关于Cookie的讨厌的事情之一（对本地存储的唯一真实替代品）是他们需要通过19 Web服务器创建。嘘！ Web服务器很无聊，很复杂，难以使用。

如果您正在构建静态站点（例如单页应用程序，例如单页应用程序），usingsomething就像本地存储一样意味着您的网页可以独立于AnyWeb服务器运行。它们不需要任何后端语言或逻辑来存储Browser中的数据：它们可以按照它们进行。

这是一个非常强大的概念和本地存储与开发人员击中的主要原因之一。

关于本地存储的另一个完整的事情是它没有像cookie一样多的sizeConstrains。本地存储提供至少5MB的数据StorageAcross所有主要的Web浏览器，它是您可以存储在cookie中的4kb（最大大小）的大量的位置。

这使本地存储特别有用，如果要在浏览器中缓存可编组数据以供以后使用。自4KB（cookie max size）以来并不大量，本地存储是您唯一的真正替代选项之一。

好的。我们谈到了好的，现在让我们花一分钟（或两个！）谈论坏。

本地存储是SOOOO BASIC。哇。我感觉更好地脱离了MyChest。本地存储只是一个令人难以置信的基本，简单的API。

我觉得大多数开发人员都没有意识到基本的本地存储实行：

它只能存储字符串数据。嘘。这使得StoringData非常无用，这甚至比简单的字符串稍微复杂。并确定，您可以将包括数据类型的所有内容序列化为本地存储，但是丑陋的黑客。

它是同步的。这意味着您运行的每个本地存储操作将受到一次性的。对于复杂的应用程序，这是一个很大的否，因为它会慢慢下降的应用程序的运行时。

Web工作者不能使用它意味着如果要构建利用Background处理的应用程序进行性能，Chrome扩展，那样的内容：您根本无法使用本地存储，因为它不是可供网络中使用。

它仍然限制了您可以存储的数据大小（跨所有主要贴手〜5MB）。这对诸如脱节的人的应用程序的人来说，这是一个相当低的限制。

页面上的任何JavaScript代码都可以访问本地存储：它没有任何数据轨灯。这是安全原因的重要原因（近年来我的头号宠物偷看）。

要保持简单，这是您应该使用localstorage的唯一情况：当您需要存储一些截然不同的信息时，不需要在高性能应用程序中使用，但尚未超过5MB，并包含纯粹的字符串数据。

如果您使用的应用程序不符合上面的描述：请勿使用localstorage。使用别的东西（稍后再使用更多）。

为什么本地存储是不安全的，您不应该使用它来存储敏感数据

这是交易：大多数关于本地存储的坏事并不巧克力。您仍然可以使用它，但您只需有一个略微的应用程序和轻微的开发人员烦恼。但安全性不同。本地存储的第四种形象非常重要，可以了解和理解，因为它将以您可能无法实现的方式大大影响您的网站。

关于本地存储的事情是它不安全！根本没有！每个都使用本地存储来存储敏感信息，如会话数据，用户详细信息，信用卡信息（甚至暂时！）以及您不希望公开发布到Facebook的其他任何东西都在犯错误。

本地存储不是设计用于在Arrowner中的安全存储机制。它旨在成为一个简单的字符串，只有键/值存储，那么该缩小员可以使用它来构建稍微复杂的单页应用。而已。

全世界最危险的是什么？那就对了！ JavaScript。

想一想这样的：当您将敏感信息存储在本地存储中时，您基本上使用世界上最危险的东西来存储最敏感的信息，在最常见的保险库中创建：不是最好的主意。

问题真正归结为跨站点脚本攻击（XSS）。我不会完全解释XSS，但这是高级：

如果攻击者可以在网站上运行JavaScript，他们可以检索您存储在本地存储中的所有Thedata，并将其发送到自己的域。您可以损害您在本地存储（如用户的会话Data）中敏感的任何敏感性。

现在，你可能会想到“那么是什么？我的网站是安全的。没有攻击者可以在我的网站上runjavascript。“

这是一个合理的观点。如果您的网站真正安全，并且在您的网站上没有攻击javaScript代码，那么您就在技术上是安全的，而是非常难以实现的。让我解释。

如果您的网站包含从域中的源中包含的任何第三方JavaScript代码：

然后，您目前处于在您的网站上运行攻击者JavaScript的风险。假设您的网站有嵌入其中嵌入的以下脚本标记：

......然后你完全搞砸了。在这种情况下，攻击者可以妥协损害您存储在本地存储中的任何内容，并且从未注意到。不理想。

作为工程师，我认为我们经常易于认为我们不会在我们的网站中嵌入第三方JavaScript。但在现实世界中，这个斯科诺赛很少发挥出来。

在大多数公司，营销团队直接管理使用Different Wysiwyg编辑和工具的公共网站。你真的可以确保无处可去的地方你使用第三方javascript吗？我争辩说“不”。

因此，在谨慎方面犯错并大大降低了您对Asecurity Infistict的风险：不要将任何敏感的东西存放在本地存储中。

虽然我觉得我很清楚你在上一节中的本地存储中永远不会在本地存储中的存储物中，但我觉得专门呼出了JSON Web令牌（JWTS）。

我看到的最大的安全罪犯是我们在本地存储中存储JWTS（会话数据）的美国。许多人没有意识到JWTS是与用户名/密码相同的。

如果攻击者可以获得JWT的副本，他们可以代表您的网站向网站提出请求，您将永远不会知道。像您一样的JWTS将是信用卡号码或密码：不要在本地存储中超越他们。

有数以千计的教程，YouTube视频，甚至编程类别大学和编码Bootcamps错误地教授新的开发人员在本地存储中将JWTS TOSTORE JWTS作为身份验证机制。这个信息错误。如果你看到有人告诉你这样做，逃跑！

所以通过所有本地存储的缺点，你应该使用什么？让我们XSELORE替代品！

如果需要存储敏感数据，则应始终使用服务器侧面。敏感数据包括：

当用户登录到您的网站时，为它们创建一个会话标识符，并在加密签名的cookie中进行Stortore。如果您正在使用WebFramework，请查找“如何使用cookie创建用户会话”和“跟踪指南”。

确保Web Framework使用的任何cookie库都设置了httponly cookie标志。此标志使浏览器无法进行Readany Cookie，这是必需的，以便安全地使用Cookie的服务器端Sessions。阅读Jeff Atwood的文章更多信息。他是男人。

确保您的cookie库还设置Samesite = strict cookie标志（以防止csrfattacks），以及secure = true标志（以确保cookie只能通过加密连接丢弃）。

每次用户向您的网站发出请求时，使用他们的会话ID（从他们发送给您发送的cookie）以检索其帐户详细信息数据库或缓存（取决于您的网站的大大）

一旦您提取了用户的帐户信息并验证，请随意换下任何相关的敏感数据

这种模式简单，简单，最重要的是：安全。 Andyes，您最肯定会使用此模式扩展大型网站。不要让我说，JWTS是“无国籍”和“快速”，你必须使用当地的StorageTo商店他们：你错了！

如果您需要在浏览器中存储不敏感的浏览器中的数据而不是完全数据，则您的最佳选择是IndexedDB。它是一个API，它可以在浏览器中使用数据库 - esque对象存储。

什么是indexeddb的伟大是您可以使用它来存储键入的信息：整数，浮点等。您还可以定义主键，处理索引，和创建事务，以防止数据完整性问题。

如果您需要将应用程序脱机运行，您的最佳选择是使用以外的ADDB（上图）以及缓存API（这是服务工人的一部分）。

缓存API允许您缓存应用程序需要加载的网络资源。

现在我们有机会谈论本地存储，我希望你能理解你（可能）不应该使用它。

请不要，无论您做什么，请不要在本地存储中存储会话信息（如jsonweb令牌）。这是一个非常糟糕的主意，并将打开你的广泛攻击，这可能绝对扼杀用户。

注意：对于那些将此发出的人，谁想知道为什么我没有特定地调用内容安全策略，以减轻XS的影响，我特别选择不包括在内，因为它不能帮助在上面描述的情况下。即使您使用所有第三方JavaScript域名，即使第三方提供商是否受到损害，即使是任何第三方JavaScript域。

虽然我们在它：Subresource完整性（虽然很酷）也不是这个问题的全球解决方案。对于大多数MarketingTools，广告网络等（到目前为止最常用的聚会JavaScript），子资源完整性几乎从未使用则作为这些脚本的PropIders想要经常更改它们，因此它们可以为其用户提供更新功能。

更新：我不是唯一一个认为您永远不应该在本地存储中存储的人。 Owasp也是如此：

...换句话说，您的应用程序所需的任何身份验证都可以由具有本地权限的用户BeByp批准，以其存储数据的计算机。因此，建议不要储存任何敏感信息的Inlocal存储。

PS：如果您读到这一点，您可能希望在Twitter或Github上关注我，并通过下面的RSS或电子邮件订阅（I＆＃39;我在发布时电子邮件给你新的文章）。