Next JS与Vercel环境变量泄露问题：如何彻底隐藏敏感变量？

核心结论 #

永远不要将敏感环境变量（如private_key）通过getServerSideProps的props传递给客户端——只要变量进入客户端代码，就一定会在Network标签或浏览器开发者工具中暴露。正确的做法是让敏感变量只在服务端完成逻辑处理，仅将处理后的非敏感结果传给前端。

具体实现步骤 #

• 在服务端完成敏感操作：如果你的业务逻辑需要用到private_key（比如调用需要鉴权的第三方API），直接在getServerSideProps内部完成整个操作，只把最终需要展示或使用的非敏感数据返回给组件。
  示例代码：

  export async function getServerSideProps() {
    // 敏感变量仅在服务端读取，不会被序列化到客户端
    const privateKey = process.env.PRIVATE_KEY;
  
    // 服务端执行需要privateKey的逻辑（比如调用API）
    const apiResponse = await fetch('https://your-third-party-api.com/endpoint', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${privateKey}`
      }
    });
    const processedData = await apiResponse.json();
  
    // 仅传递处理后的非敏感数据给客户端
    return {
      props: { processedData }
    };
  }
  

• 正确配置环境变量：确保敏感变量没有添加NEXT_PUBLIC_前缀——Next.js中，带这个前缀的环境变量会被自动注入到客户端代码中，无论你是否主动传递。
• 排查代码漏洞：检查所有组件和页面代码，确保没有直接引用process.env.PRIVATE_KEY这类敏感变量（即使客户端会拿到undefined，也不要留下这种写法，避免后续误操作）。

关键提醒 #

不存在“既让客户端拿到敏感变量，又彻底隐藏它”的方法——只要数据到达客户端，就无法阻止用户通过开发者工具查看。唯一安全的方式是敏感逻辑全在服务端闭环处理，绝不把敏感信息暴露给前端。

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