Next JS 中的安全客户端环境变量

Question

我担心我的各种功能的Key暴露给客户端。我有这个功能

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

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

谢谢

Answer 1

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

任何人都可以访问暴露给浏览器的私钥。最常见的防止密钥泄露的方法就是只使用它们 server-side.

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

在 server-side 函数中使用 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.jsserver-sidefeatures/functions可以放key是getServerSideProps, getStaticProps, getStaticPaths, and middleware.

Next JS 中的安全客户端环境变量

Secure client side env variables in Next JS

environment-variables

next.js