从getServerSideProps传递环境变量为组件Props是否安全？如何防泄露？

问题根源 #

你当前的写法会把PRIVATE_KEY直接作为props传给客户端——因为getServerSideProps返回的props会被序列化后嵌入页面HTML或服务器响应中，浏览器自然能在网络标签或页面源码里看到这个私钥，等于直接暴露了敏感信息。

正确处理方式 #

绝对不要把私钥、敏感凭证传递给客户端，所有需要用到PRIVATE_KEY的操作都必须在服务器端完成，只把处理后的结果传给客户端。具体步骤如下：

1. 确认环境变量配置：在Vercel里确保PRIVATE_KEY没有加NEXT_PUBLIC_前缀（带这个前缀的变量会被默认暴露给客户端），这样它只会在服务器侧生效。
2. 敏感逻辑移至服务器端：在getServerSideProps内部完成需要私钥的操作（比如调用鉴权接口、处理加密逻辑等），仅将处理后的业务数据作为props传给组件。

修改后的代码示例 #

假设你原本要在客户端用私钥调用第三方接口，现在改成在服务器端完成调用：

const Home: NextPage = (props: { apiData: any }) => {
  // 直接使用服务器端处理好的数据，无需接触私钥
  return (      
    <HomeView data={props.apiData} />  
  );
};

export default Home;

export async function getServerSideProps() {
  try {
    // 在服务器端用PRIVATE_KEY完成鉴权请求
    const apiResponse = await fetch('https://your-third-party-api.com/protected', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${process.env.PRIVATE_KEY}`
      }
    });

    const apiData = await apiResponse.json();

    // 仅返回处理后的业务数据给客户端
    return { props: { apiData } };
  } catch (error) {
    // 处理请求错误，返回兜底数据
    return { props: { apiData: null, error: 'Failed to fetch data' } };
  }
}

额外建议 #

如果多个页面都需要用到这类敏感逻辑，可以封装成独立的服务器端函数，或者使用Next.js的API路由（在pages/api目录下创建接口）：让客户端调用你的API路由，再由你的API路由去调用第三方接口并使用私钥，这样逻辑更清晰且易于维护。

内容的提问来源于stack exchange，提问作者Voley