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

Question

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

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

示例in this Auth0 article 也将秘密放入客户端。

我不太幸运地发现了 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

更新 - 下一个 v9.4：

从 Next.js v9.4 开始，它只向 浏览器 公开前缀为 NEXT_PUBLIC_ 的环境变量。 欲了解更多信息，read this

---

原答案：

不要将任何秘密环境变量放在客户端可以访问的位置。

我不确定这个 env 属性接下来会做什么，它只是 configures 一个 webpack DefinePlugin 将 process.env.VAR 的用法替换为它的值。

因此，这意味着您的秘密将位于公开的捆绑包中。

要确认它在客户端中公开，

1. 打开开发工具
2. 通过以下方式打开控制台 按 esc
3. 点击search标签
4. 输入您的密钥

它会在其中一个包中找到它。