next.js - 添加到 next.config.js 的 secret 安全性

Question

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

我想知道的是 next.config.js 中的设置在示例中。它将 Auth0 和其他 secret 放入客户端(通过 Webpack)。这不会让这些 secret 面临风险吗？由于它们位于客户端代码中的某个位置，因此有可能发出访问 secret 的请求。

示例 in this Auth0 article还将 secret 放在客户端中。

我还没有找到 Webpack 如何处理变量的运气，我希望社区能够对此有所了解。在将其放置到位之前，我们正在努力确保我们的模式是安全的。

从示例中， secret 被添加到客户端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

---

原始答案:

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

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

因此，这意味着您的 secret 将位于公开的 bundle 内。

确认它在客户端中公开，

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

它将在其中一个 bundle 中找到它。