内容安全策略，Next JS和AMP

如何解决内容安全策略，Next JS和AMP

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

初始错误是：

拒绝从“ blob：”创建工作器，因为它违反了以下“内容安全策略”指令：“ default-src *数据：'unsafe-eval''unsafe-inline'”。请注意，未明确设置“ worker-src”，因此将“ default-src”用作备用。

好，我理解了这个错误，我可以看到默认情况下下一个JS发送的标头是default-src * data: 'unsafe-eval' 'unsafe-inline'，并且不允许加载blob:，因此浏览器拒绝加载AMP的脚本

因此，我在next.config.js中添加了标头（我正在使用具有此新功能的下一个9.5）以允许工人使用blob：

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

通过这种配置，我可以看到响应中正确添加了标题，但是现在有两个标题，nextJS默认仍在发送他的标题：

所以现在我在响应中有两个标头，第一个是我的并且定义了worker-src，第二个是下一个JS默认值，并且没有定义worker-src。
我希望浏览器能够理解它，但是它无法正常工作，我仍然遇到相同的错误，浏览器无法接收我的worker-src策略。

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

注2：工作进程仅由某些AMP组件加载，我认为主要组件是amp-bind和amp-script。有了很多组件，我就没有这个问题。

有人对此有解决方案吗？

非常感谢您阅读。

解决方法

对于多个CSP，浏览器将仅允许所有CSP中允许的内容。即使您的自定义CSP允许，默认的下一个JS CSP也会阻止blob。您可能需要删除其中一个CSP，然后修改另一个以适合您的需求。

另请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy中的“多内容安全策略”部分

,

在删除helmet npm程序包后，一切正常。