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 有两种预渲染模式：静态站点生成（SSG）和服务器端渲染（SSR）。第一个无法更新 HTML 代码中的 nonce='value'，但是当 SSG 时，您可以使用 ./pages/_document.tsx 为内联样式和脚本传递 'nonce' 属性。

查看example for CSP header 和meta tag CSP example。

关于问题：

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 渲染器。

1. 在生产环境中为 styles 指定 'unsafe-inline' 不是安全问题。例如https://accounts.google.com 页面允许内联样式（它甚至没有style-src/default-src 指令，但它仔细控制脚本）。

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

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