如何保护 API access_token (React, Laravel)答案

【问题标题】：How to Secure API access_token (React, Laravel)如何保护 API access_token (React, Laravel)
【发布时间】：2020-05-14 16:23:07
【问题描述】：

我正在开发一个应用程序（前端：React，后端：Laravel）。当我发出登录请求时，我会从 Laravel 服务器获得 access_token。我将这个 access_token 保存在 localStorage 中。

现在的问题是任何人都可以在浏览器的开发人员工具中看到 access_token。 access_token 在请求标头中也可见。

如果用户有一段时间没有坐在他的座位上，那么其他用户可以窃取此 access_token 并粘贴到他的浏览器中，现在其他用户将能够作为第一个用户访问该应用程序。此外，我在其他网站上看到一些关于 localStorage 容易受到 XSS 攻击的讨论。

我的问题是这个 access_token 应该存储在哪里。如果我将 access_token 保存在某个 javascript 变量中，那么当用户关闭并重新打开浏览器或用户刷新页面时，access_token 就会丢失。并且会要求他重新登录，这对用户体验很不利。

如何保护 access_token 免受未经授权的访问？最佳做法是什么？

【问题讨论】：

为什么令牌生命周期应该是 1 小时或 30 分钟，然后在刷新令牌的帮助下过期后，您可以生成新令牌
您可能应该将令牌存储在一个变量中，并支持一种在用户关闭浏览器时重新验证用户身份的方法。虽然，你离开座位的例子在任何情况下都很容易受到攻击，但这就像把门开着一样，你几乎无法做任何事情来阻止人们得到它。这可能包含有用的信息：auth0.com/docs/tokens/guides/store-tokens
您可能想使用状态管理来存储它。无论你使用 prop Drill 还是 Redux。

【解决方案1】：

虽然这种类型的劫持在 facebook 和其他网站上也是可能的，但这里有一些建议

选项 1

为您的实际应用制作一些登录页面。
在该登录页面上添加一些按钮，通过使用 javascript 打开新窗口（例如

www.yoursite.com/secure_login?abc=3jfj834y7827875448548hffhjdhfd8
直接浏览链接 (www.yoursite.com/secure_login) 时出现错误。您的动态令牌将用作会话密钥等。它就像 CSRF 功能一样。
在您的网站上禁用右键单击和 F12。
如果在浏览器设置中禁用了 java 脚本，请不要打开您的网站。所以强制用户先启用 java-script。
现在检查元素非常困难。

使用蜜点名称制作多个 access_token 类似键，例如security_key、authourization_token、access_token、login_session 等。您的实际密钥必须与 Web 框架中全局使用的默认密钥不同。
使用一些随机值并应用 sha256 等加密来初始化它们。
使用刷新令牌概念，因为您的会话字符串将不断刷新和更改
在发出请求时检查这些令牌是否丢失，然后阻止该 IP 一段时间（例如登录限制以防止暴力附加）
现在，如果您假设 12 个键只有一个或两个实际上使用了这种方式，则很难获取所有变量（就像您提到的，如果用户离开座位一段时间），您可以用多个名称来欺骗他们。
您甚至可以实际使用这些多个会话
您还可以缩短到期时间

【讨论】：