jwt：为什么我的令牌显示在Chrome DevTools中？

Question

我在Express.js中有一个API，可以创建博客文章并将它们添加到我的数据库中。当我从DevTools内部的React应用程序发出请求时，它将显示我的JWT。我担心当我的网站上线时，人们可以看到我的令牌并从他们的网站发出请求以添加不需要的帖子。请告诉我发生了什么以及如何防止出现安全错误。

Answer 1

可以在Chrome Dev工具上看到JWT，因为您在API上创建新博客帖子时将其作为授权标题发送，并且您直接从React应用程序发出此请求。

如果JWT是敏感的，它永远不会在前端可用，你必须有一个像代理一样的服务器，它应该从React应用程序接收请求，然后用JWT作为授权头转发请求你的API。

这样做可以避免泄露JWT，但仍然可以让某人向您的代理发出请求，这些请求将转发给您的API。

如果您希望只有您的反应应用程序能够对您的代理执行请求，您可以创建一个中间件来验证传入请求的IP地址（更多详细信息here），如果它与您的React匹配应用程序地址然后您接受请求，否则，您将返回未经授权的错误。

如果您只希望特定人员能够创建博客帖子，那么您应该将认证放在反应应用程序上。

Answer 2

当您在标题中发送带有令牌的请求时，它将在开发人员工具的标题窗格中显示如下：

我认为这就是你想知道是否安全。

使用普通HTTP时，React应用程序和API之间的连接未加密。这使replay attack成为可能 - 前端和API之间的ISP或其他服务器可以读取令牌并假装您以后使用读取令牌。

最重要的解决方案是使用HTTPS，它是加密的HTTP。当您使用HTTPS时，潜在的攻击者无法嗅探和窃取令牌。当您处理用户名，密码等时，您应始终使用HTTPS。

HTTPS可以免费使用，而且设置起来也不是很难。有关详细信息，请参阅here。还有一个你可能想要阅读的有趣的讨论here。