添加到 next.config.js 的机密安全性

Question

我们正在将 Auth0 添加到我们的 Next.js 网站并引用此示例。

我想知道的是示例中next.config.js中的设置。它将 Auth0 和其他机密放在客户端（通过 Webpack）。这不会让这些秘密处于危险之中吗？由于它们位于客户端代码的某个位置，因此有可能发出访问机密的请求。

这篇 Auth0 文章中的示例也将机密放在客户端中。

我没有很幸运地发现 Webpack 如何处理变量，我希望社区对此有所了解。我们正在努力确保我们的模式在放置之前是安全的。

例如，将机密添加到客户端next.config.js：

const dotenv = require('dotenv')
dotenv.config()

module.exports = {
  env: {
    AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
    AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET,
    AUTH0_SCOPE: 'openid profile',
    REDIRECT_URI:
      process.env.REDIRECT_URI || 'http://localhost:3000/api/callback',
    POST_LOGOUT_REDIRECT_URI:
      process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000/',
    SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET,
    SESSION_COOKIE_LIFETIME: 7200, // 2 hours
  },
}

Answer 1

不要将任何秘密的 env 变量放在客户端可以访问的地方。

我不确定这个env属性接下来会做什么，它只是配置一个 webpackDefinePlugin来替换process.env.VAR它的值的用法。

因此，这意味着您的秘密将在public 的包中。

要确认它在客户端中暴露，

1. 打开开发工具
2. 按打开控制台 esc
3. 单击search选项卡
4. 输入您的密钥

它将在其中一个捆绑包中找到它。

更新 - 下一个 v9.4

由于Next.js V9.4，它暴露的前缀只ENV变量NEXT_PUBLIC_的浏览器。有关更多信息，请阅读此