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 对于我的 Web 应用程序尽可能强大？

祝一切顺利，-萨姆

Answer 1

NextJS 有 2 种预渲染模式：静态站点生成（SSG）和服务器端渲染（SSR）。第一个无法nonce='value'在 HTML 代码中更新，但是当 SSG 时，您可以'nonce'使用./pages/_document.tsx.

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

回复问题：

1. 我认为使用 anext.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. 在生产中指定'unsafe-inline'样式不是安全问题。例如https://accounts.google.com页面允许内联样式（它甚至没有/指令，但它仔细控制脚本）。style-srcdefault-src

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

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