Content-Security-Policy、Next JS 和 AMP 的问题

Question

我正在使用 Next JS 开发一个 AMP 应用程序，它在本地主机上运行良好，但在生产中我遇到了来自 AMP 的错误，不允许加载其工作程序。

初始错误是：

Refused to create a worker from 'blob:' because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 'unsafe-inline'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

好的我明白了这个错误，我可以看到next JS默认发送的header是default-src * data: 'unsafe-eval' 'unsafe-inline'并且不允许加载blob:，所以浏览器拒绝加载 AMP 的脚本。

所以我在 next.config.js 中添加了一个 header（我正在使用具有此新功能的下一个 9.5）以允许 blob 用于工作人员：

async function headers() {
  return [
    {
      source: "/",
      headers: [
        {
          key: "Content-Security-Policy",
          value: "default-src * data:  'unsafe-eval' 'unsafe-inline'; worker-src blob:;",
        },
      ],
    }
  ];
}

通过这个配置，我可以看到 header 被正确地添加到响应中，但是现在有两个 headers，nextJS 仍然默认发送他的 header ：

所以现在我的响应中有两个header，第一个是我的并且定义了worker-src，第二个是下一个JS默认的并且没有定义[=41] =].
我希望浏览器能够理解它，但它不起作用，我仍然有同样的错误，浏览器没有接受我的 worker-src 政策。

注意：我无法使用标签 <meta http-esquiv="content-security-policy" />，因为它不是有效的 AMP。

注2：worker只被部分AMP组件加载，我认为主要是amp-bind和amp-script。有很多组件我没有这个问题。

有人对此有解决方案吗？

非常感谢您的阅读。

Answer 1

对于多个 CSP，浏览器将只允许所有 CSP 中允许的内容。默认的下一个 JS CSP 将阻止 blob，即使您的自定义 CSP 允许它。您可能需要删除其中一个 CSP 并修改另一个以满足您的需要。

另请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

中的“多个内容安全策略”部分

Content-Security-Policy、Next JS 和 AMP 的问题

Problem with Content-Security-Policy, Next JS and AMP

javascript

next.js

amp-html

content-security-policy