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

标签 reactjs authentication next.js session-cookies next-auth

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

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

我正在返回一个类似的对象,其中包含 CredentialsProvidersauthorize 属性中的 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 为重点。

最佳答案

很多时候,我们在授权后使用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

关于reactjs - 在 Next.js next-auth 的 session 中保存 jwt accessToken 是否安全?然后使用 useSession Hook 在客户端访问它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72353608/

相关文章:

reactjs - 如何在 jest/enzyme React 中的表单提交处理程序之后测试函数和内部语句

reactjs - 使用 react-select 和 react-hook-form 返回正确的值

security - 如何成为 SAML 服务提供商

javascript - Nextjs : How to register the quill-blot-formatter to dynamically imported react-quill on client side rendering only?

javascript - 在 React 中调用制表函数

javascript - 从需要发送 header 的服务器加载图像

http - 如何在 DataZen 中使用 header 认证?

android - 为什么我的 android 自定义帐户不显示在 "Accounts and Settings"中?

javascript - vercel中的nextjs不支持可选链吗?

reactjs - 为 nextjs 项目设置关键 css 和删除不需要的 CSS 的正确方法