在 Next JS 中保护客户端环境变量答案

【问题标题】：Secure client side env variables in Next JS在 Next JS 中保护客户端环境变量
【发布时间】：2022-02-02 13:03:24
【问题描述】：

我担心我的各种功能的密钥会暴露给客户。我有这个功能

onRunOCR = async (event) => {
   const client = new SomeAPI({
     credentials: {
       accessKeyId: 'ffg23f23f23f32f23',
       secretAccessKey: 'GZMIKGDoISDGpsgjMIPSGMDIPG',
     },
   })
}

这基本上是我的类组件中的点击功能。这完全暴露给任何人吗？我怎样才能保护它。 NEXT_PUBLIC_ACCESS_KEY 会起作用还是同样只是将其存储为变量？

谢谢

【问题讨论】：

标签： next.js environment-variables

【解决方案1】：

是的，您的示例中公开了密钥。

任何人都可以访问暴露给浏览器的私钥。防止密钥泄漏的最常见方法是仅在服务器端使用它们。

您可以创建 API route 或自定义终端节点，例如您在 onClick 处理程序中调用的 AWS Lambda 函数。

在您的服务器端函数中使用env variables 是可以的，因为它们永远不会呈现给浏览器。

.env 文件

API_KEY_ID=123456
API_ACCESS_KEY=ABCDEF

API 路由

export default function handler(_, res) {
  const data = new SomeAPI({
    credentials: {
      accessKeyId: process.env.API_KEY_ID,
      secretAccessKey: process.env.API_ACCESS_KEY,
    },
  })
  res.status(200).json(data)
}

可以放置键的其他默认 Next.js 服务器端特性/功能是 getServerSideProps、getStaticProps、getStaticPaths 和 middleware。

【讨论】：