Nextjs 预加载脚本被严格的 CSP 阻止

Question

我正在尝试设置 strict CSP in my next app based on the next.js example。在我的 _document.js 中，我有以下内容：

const cspHashOf = (text) => {
  const hash = crypto.createHash('sha256')
  hash.update(text)
  return `'sha256-${hash.digest('base64')}'`
}

let cspStr = ''
for (let k in csp) {
  cspStr += `${k} ${csp[k]}; `
}

...

    render() {
    const nonce = crypto.randomBytes(8).toString('base64')

    let csp = {
      'object-src': "'none'",
      'base-uri': "'self'",
      'script-src': `'nonce-${nonce}' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http: ${cspHashOf(
        NextScript.getInlineScriptSource(this.props)
      )}`,
    }

    let cspStr = ''
    for (let k in csp) {
      cspStr += `${k} ${csp[k]}; `
    }

    return (
      <Html>
        <Head>
          <meta httpEquiv="Content-Security-Policy" content={cspStr} />
          ...
        </Head>
        <body>
          ...
          <NextScript nonce={nonce} />
        </body>
      </Html>
    )

在呈现的页面中，所有这些来自 Next 的预加载块都被阻止了

<link rel="preload" href="/_next/static/chunks/8be9d4c0d98df170721d8fe575c2a4bcd5b2fbe4.e7c8a9ea6074f4dcaa51.js" as="script">
<link rel="preload" href="/_next/static/chunks/863050a7585a2b3888f2e4b96c75689f1ae4a93d.a73c594ed7ed04a682dc.js" as="script">
<link rel="preload" href="/_next/static/chunks/be8560b560b3990e61cbef828a20e51dc9370d83.4acbf8ef4e1b51b0bc0f.js" as="script">
<link rel="preload" href="/_next/static/chunks/be8560b560b3990e61cbef828a20e51dc9370d83_CSS.6164c81b6ed04bb13dbd.js" as="script">

如何防止它们被阻止？

Answer 1

我最终能够通过将 nonce 作为道具传递给 Head

来解决这个问题

<Head nonce={nonce}>

Next.js 中关于此的文档不存在！如果有人找到它来分享 link

，我会很高兴

Nextjs 预加载脚本被严格的 CSP 阻止

Nextjs preloaded scripts blocked with strict CSP

content-security-policy

next.js