我目前正在使用ReactJS构建一个单页应用程序。
我读到不使用localStorage的原因之一是因为XSS漏洞。
既然React会转义所有用户输入，那么现在使用localStorage是否安全呢?
当前回答
看待这个问题的一种方法是考虑风险或伤害的水平。
你是否正在创造一款没有用户的应用，即POC/MVP?你是一家需要快速进入市场并测试应用程序的初创公司吗?如果是，我可能只会实施最简单的解决方案，并继续专注于寻找适合市场的产品。使用localStorage，因为它通常更容易实现。
你是在开发一款拥有大量日活跃用户的应用的v2版本，还是一款人们/企业非常依赖的应用?被黑客攻击是否意味着几乎没有恢复空间?如果是这样，我会仔细研究一下您的依赖关系，并考虑将令牌信息存储在仅http的cookie中。
使用localStorage和cookie/session存储都有各自的优缺点。
正如第一个答案所述:如果您的应用程序有XSS漏洞，那么两者都不能保护您的用户。由于大多数现代应用程序都有十几个或更多不同的依赖项，因此越来越难以保证应用程序的某个依赖项不受XSS攻击。
如果您的应用程序确实存在XSS漏洞，并且黑客已经能够利用它，那么黑客将能够代表您的用户执行操作。黑客可以通过从localStorage检索令牌来执行GET/POST请求，或者如果令牌存储在http-only cookie中，则可以执行POST请求。
在本地存储中存储令牌的唯一缺点是黑客将能够读取您的令牌。
其他回答
如果你使用CDN是不安全的:
恶意JavaScript可以嵌入到页面中，Web存储就会受到威胁。这些类型的XSS攻击可以在不知情的情况下获取访问您站点的每个人的Web存储。这可能就是为什么许多组织建议不要在网络存储中存储任何有价值的东西或信任任何信息的原因。这包括会话标识符和令牌。 通过stormpath
您从外部需要的任何脚本都可能被破坏，并可能从客户机的存储中获取任何JWTS，并将个人数据发送回攻击者的服务器。
基本上可以将JWT存储在localStorage中。
我认为这是一个好方法。 如果我们谈论的是XSS, XSS使用CDN，这也是一个潜在的风险，获得您客户的登录/通行证。将数据存储在本地至少可以防止CSRF攻击。
你需要了解这两点，然后选择你想要的。这两种攻击都不是你所需要注意的，只要记住:你的整个应用程序的安全性仅与你的应用程序的最不安全的点一样。
再次重申，存储是OK的，易受XSS, CSRF，…不是
Philippe De Ryck博士写了一篇有用的文章，深入分析了漏洞(尤其是XSS)的真正影响。
这篇文章让人大开眼界!
简而言之，开发人员最关心的应该是保护web应用程序不受XSS的影响，而不应该太担心使用哪种类型的存储区域。
菲利普医生建议采取以下3个步骤:
Don't worry too much about the storage area. Saving an access token in localStorage area will save the developer a massive amount of time for development of next phases of the application. Review your app for XSS vulnerabilities. Perform a through code review and learn how to avoid XSS within the scope of your templating framework. Build a defense-in-depth mechanism against XSS. Learn how you could further lock down your application. E.g. utilising Content Security Policy (CSP) and HTML5 sandboxing.
记住，一旦你被XSS攻击了，游戏就结束了!
localStorage和httpOnly cookie都不能接受吗?关于一个妥协的第三方库，我所知道的唯一能减少/防止敏感信息被窃取的解决方案是强制执行子资源完整性。
子资源完整性(SRI)是一种安全特性 浏览器验证它们获取的资源(例如从CDN) 交付时没有意外的操作。它通过允许 您可以提供所获取资源必须的加密散列 匹配。
只要受感染的第三方库在您的网站上是活跃的，键盘记录程序就可以开始收集信息，如用户名，密码，以及您输入到网站的任何其他内容。
httpOnly cookie将阻止来自另一台计算机的访问，但不会阻止黑客操纵用户的计算机。
只要加密，将令牌存储在localStorage中是安全的。下面是一个压缩的代码片段，展示了许多方法中的一种。
import SimpleCrypto from 'simple-crypto-js';
const saveToken = (token = '') => {
const encryptInit = new SimpleCrypto('PRIVATE_KEY_STORED_IN_ENV_FILE');
const encryptedToken = encryptInit.encrypt(token);
localStorage.setItem('token', encryptedToken);
}
然后，在使用令牌之前，使用PRIVATE_KEY_STORED_IN_ENV_FILE对其进行解密
