在 Next.js next-auth 的会话中保存 jwt accessToken 是否安全？然后使用 useSession hook 在客户端访问它？

Question

我使用 next-auth 进行身份验证，并使用凭证提供程序进行登录，我的 API 返回一个包含 accessToken 的对象，如下所示：

{ "token" : "UzI1NiIsInR5cCI..." },

我返回一个类似的对象，其中包含authorize属性中的令牌CredentialsProviders，而我的session回调如下所示：

session({ session, token }) {
  session.data = {
    ...session.user,
    ...token.user,
  };
  session.accessToken = token.accessToken;
  return session;
}

我useSession在客户端代码中使用该钩子，如下所示：

const { data: session, status } = useSession();

访问用户的令牌以发出 API 请求。这安全吗？或者还有其他方法可以实现这一目标吗？请记住，尽管我使用的是 Next.js，但该应用程序将完全在客户端呈现，因此请记住这一点。我问这个问题是因为 Next.js 的大多数文档都是以 SSR 为重点的。

Answer 1

很多时候，我们在授权后会使用localStorage来存储token，当然，由于localStorage是浏览器api，这意味着我们将token存储在客户端，这实际上与您的情况类似。我没有看到太多的安全问题，尽管它确实使令牌容易受到 XSS 攻击，因此 cookie 被认为是存储令牌的更安全的方式，因为它无法从脚本端检索（如果您设置仅 http 的 cookie 选项）。

如果你担心的话，可以把token放到cookie中来确定。尽管如此，还是有办法利用这个token来达到恶意目的。最好的方法是保护自己免受 XSS 攻击，然后就没有什么可担心的了，react（好吧，包括 next）开箱即有良好的保护机制。

一般来说，由于我们讨论的是访问令牌，因此它是识别用户的东西，这对于您在客户端中使用它来说应该不是问题，您应该更加小心应用程序的秘密，例如用于加密令牌的秘密，如果您允许客户端访问它，则会出现安全问题。

如果您仍然不想在客户端使用令牌（您可能不需要），您可以getSession在服务器端使用 nextjs 进行授权请求，并通过 next 代理您的请求到后端，使用 next 作为 api也是一种常见的做法。

总而言之，由于您使用的是 next-auth 库，因此您无需担心，因为它解决了大部分安全问题。 https://next-auth.js.org/getting-started/introduction#secure-by-default