Question

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

我想知道的是示例中next.config.js中的设置。它将Auth0和其他秘密放置在客户端中（通过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

请勿将任何秘密的env变量放在客户端可以访问的位置。

我不确定此<meta name="viewport" content="width=device-width, initial-scale=1">属性的下一步是什么，它只是configures一个Webpack env，它将DefinePlugin的用法替换为它的值。

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

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

打开开发工具
打开控制台由按 esc
点击process.env.VAR标签
输入您的秘密密钥

它将在捆绑软件之一中找到它。

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

1 个答案: