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

Question

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

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

我正在返回一个类似的对象，其中包含 CredentialsProviders 的 authorize 属性中的 token ，而我的 session 回调如下所示:

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

我在我的客户端代码中使用 useSession Hook ，如下所示:

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

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

Answer 1

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

如果你不放心，可以把token放在cookies里确定一下。尽管即便如此，也有将此 token 用于恶意目的的方式。最好的方法是保护自己免受 XSS 攻击，然后就没有什么好担心的了，开箱即用的 React(嗯，包括 next)有很好的保护机制。

一般来说，由于我们谈论的是访问 token ，这是标识用户的东西，这对您在客户端中使用它应该不是问题，您应该更加小心应用程序的 secret ，比如用于加密token的secret，那么如果你让客户端访问它，就会有安全问题。

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

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