时间戳

首页 > 解决方案 > Nextjs 预加载脚本被严格的 CSP 阻止

next.js - Nextjs 预加载脚本被严格的 CSP 阻止

问题描述

我正在尝试根据next.js 示例在我的下一个应用程序中设置严格的 CSP。在我的我有以下内容：_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">

如何防止它们被阻止？

标签： next.jscontent-security-policy

解决方案

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

<Head nonce={nonce}>

Next.js 的相关文档不存在！如果有人找到它来分享链接，我会很高兴

推荐阅读