NextJS 内容安全策略 (CSP)

Question

我目前正在为使用 Next.js 制作的生产应用程序制定内容安全策略 (CSP)。虽然我找到了使用该框架实施 CSP 的可靠文档，但我想确保正确解决一些问题。

问题#1：我读到，在 HTTP 标头中设置的安全策略更可取。但是，我找不到使用这种方法在生产中传递内联样式的“nonce”属性的方法。 https://nextjs.org/docs/advanced-features/security-headers

问题#2：我见过其他示例，其中开发人员将其 CSP 注入自定义文档（“./pages/_document.js”）。我对使用这种方法犹豫不决，因为我听说元标签 CSP 很容易被绕过。 https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp

我的问题：

1. 有没有办法在“next.config.js”中使用带有标头配置的“nonce”？如果是的话，怎么办？
2. 如果 Next.js 自动清理用户输入，那么在生产中为样式指定“unsafe-inline”是否会构成安全问题？我还应该提到，我还清理了 API 中的所有 mongo 数据库查询。
3. 问题 #2 中描述的元标记方法是否与 HTTP 标头方法一样安全？
4. 您建议我采取什么方法来使我的 CSP 对于我的网络应用程序尽可能强大？

祝一切顺利， -萨姆

Answer 1

NextJS 有 2 种预渲染模式：静态站点生成（SSG）和服务器端渲染（SSR）。第一个无法更新 HTML 代码中的

nonce='value'

，但是使用 SSR 时，您可以使用

'nonce'

为内联样式和脚本传递

./pages/_document.tsx

属性。

请参阅 CSP 标头示例 和 元标记 CSP 示例。

回复问题：

1. 我认为使用

   next.config.js

   是可能的，例如

   next-safe

   包在该文件中添加了 nextSafe() 函数来设置很多标头：

const nextSafe = require('next-safe')
const isDev = process.env.NODE_ENV !== 'production'
module.exports = {
  async headers () {
    return [
      {
        source: '/:path*',
        headers: nextSafe({ isDev }),
      },
    ]
  },
}

要将“nonce”设置到 CSP 标头中，您可以通过这种方式编写自己的函数。要将“nonce”属性设置为样式，您可以使用

_document.tsx

渲染器。

2. 在生产中为

   styles

   指定 'unsafe-inline' 不是安全问题。例如 https://accounts.google.com 页面允许内联样式（它甚至没有

   style-src

   /

   default-src

   指令，但它仔细控制脚本）。

3. 在 HTTP 标头中设置 CSP 是更好的选择，但这并不意味着元标记中的 CSP 很容易被绕过。只是元标记中的 CSP 有一些限制，如果您不使用受限制的功能，您可以安全地使用元标记来传递 CSP。

4. 您可以无限期地加强保护，花费大量的时间和资源。只要遵循主要原则“保护不应该比被保护的对象更昂贵”。