內容安全策略、Next JS 和 AMP 的問題

Question

我正在使用 Next JS 開發一個 AMP 應用程序，它在 localhost 中運行良好，但在生產中，我遇到了來自 AMP 的錯誤，不允許加載其工作程序。

初始錯誤是：

拒絕從“blob:”創建工作線程，因為它違反了以下內容安全策略指令：“default-src * data: 'unsafe-eval' 'unsafe-inline'”。 請注意，'worker-src' 未明確設置，因此使用 'default-src' 作為后備。

好的我理解這個錯誤，我可以看到默認default-src * data: 'unsafe-eval' 'unsafe-inline'下下一個 JS 發送的標頭是default-src * data: 'unsafe-eval' 'unsafe-inline'並且它不允許blob:被加載，所以瀏覽器是拒絕加載 AMP 的腳本。

因此，我在next.config.js添加了一個標頭（我正在使用具有此新功能的 next 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：worker 僅由一些 AMP 組件加載，我認為主要是 amp-bind 和 amp-script。 有很多組件，我沒有這個問題。

有沒有人對此有解決方案？

非常感謝您的閱讀。

Answer 1

對於多個 CSP，瀏覽器將只允許所有 CSP 中允許的內容。 即使您的自定義 CSP 允許，默認的下一個 JS CSP 也會阻止 blob。 您可能需要刪除其中一個 CSP 並修改另一個以滿足您的需要。

另請參閱https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy 中的“多內容安全策略”部分

Answer 2

刪除helmet npm 包后一切正常。