我们正在努力将 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
},
}
最佳答案
更新 - 下一个 v9.4:
自 Next.js v9.4 起,它仅向浏览器公开带有前缀 NEXT_PUBLIC_
的环境变量。
欲了解更多信息,read this
原始答案:
不要将任何 secret 环境变量放在客户端可以访问的位置。
我不确定接下来会如何处理这个 env
属性,它只是 configures一个 webpack DefinePlugin
,它将 process.env.VAR
的用法替换为它的值。
因此,这意味着您的 secret 将位于公开的 bundle 内。
确认它在客户端中公开,
- 打开开发工具
- 通过以下方式打开控制台 按esc
- 点击
搜索
标签 - 输入您的 key
它将在其中一个 bundle 中找到它。
关于next.js - 添加到 next.config.js 的 secret 安全性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59296692/