使用Next Auth时getServerSideProps敏感信息泄露问题咨询

你的核心问题在于：敏感字符串直接硬编码在了客户端组件的JSX代码中，哪怕你用条件渲染控制了它的显示时机，这段字符串依然会被打包到客户端的JS bundle里，所以浏览器源码里能找到它。

为什么会这样？ #

Next.js的组件代码最终会被编译发送到浏览器执行，不管你在组件里写了什么条件判断，所有硬编码的字符串都会被包含在客户端代码中。你用useState+useEffect判断客户端的逻辑，只是控制了组件在浏览器端的渲染结果，但并没有阻止敏感内容被打包到前端代码里。

而getServerSideProps确实在服务端运行，但你没有利用它来管控敏感数据的传递——你没有把敏感数据放在服务端获取后通过props传给组件，而是直接写在了组件内部。

正确的解决方式 #

要让敏感内容只对授权用户可见且不泄露到客户端源码，你需要：

1. 在getServerSideProps中完成授权验证，未授权用户直接重定向，不返回敏感数据
2. 仅向授权用户传递敏感数据作为组件props，组件只渲染props中的数据

修改后的代码示例：

pages/protected.js

import { getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]"
import { Typography } from "@mui/material"
import { GetServerSidePropsContext } from "next"

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const session = await getServerSession(context.req, context.res, authOptions);
  
  // 未授权用户直接重定向到登录页
  if (!session) {
    return {
      redirect: {
        destination: '/api/auth/signin',
        permanent: false,
      },
    };
  }

  // 仅授权用户返回敏感数据
  return {
    props: {
      session,
      secretKey: '11c6c096-f677-4432-b7ca-2d1216df73a3'
    },
  };
}

export default function Profile({ secretKey }) {
  // 因为服务端已经完成授权验证，这里直接渲染即可
  return (
    <Typography>
      ACCESS GRANTED!!! SECRET: {secretKey}
    </Typography>
  );
}

关键要点 #

• 永远不要把敏感内容直接写在客户端组件代码中，哪怕是条件分支里，打包后这些内容会暴露在前端JS文件里
• getServerSideProps的核心作用之一就是在服务端做权限校验和敏感数据获取，只把授权用户需要的数据传递给组件，未授权用户连获取这些数据的机会都没有

内容的提问来源于stack exchange，提问作者engineer-x