拒绝从 'blob:https://... p5.sound.min.js:..' 创建工作人员，因为它违反了以下内容安全策略指令答案

【问题标题】：Refused to create a worker from 'blob:https://... p5.sound.min.js:..' because it violates the following Content Security Policy directive拒绝从 'blob:https://... p5.sound.min.js:..' 创建工作人员，因为它违反了以下内容安全策略指令
【发布时间】：2021-07-02 01:41:15
【问题描述】：

我正在尝试在 Chrome 上使用 p5 声音，但尝试时遇到错误。

拒绝从 'blob:https://... p5.sound.min.js:..' 创建工作者因为它违反了以下内容安全政策指令： “default-src 'self' 'unsafe-inline'”。请注意，'worker-src' 不是显式设置，因此 'default-src' 用作后备。

后来我遇到：

未捕获的类型错误：p5.Envelope 不是构造函数

我尝试寻找答案并在我的 index html 文件中添加了一个元标记，我对 CSP 指令上的所有页面感到困惑。

<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;">

我获取库的 html 代码如下所示

<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="worker-src 'self' 'unsafe-inline';">
  <meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="p5.sound.min.js"></script>
  <script language="javascript" type="text/javascript" src="circle_music.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <meta property="og:image" content="cover.png" />
  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>
</body>
</html>

我的代码在 Firefox 上运行良好，但在 Chrome 上尝试时却无法运行。我不知道这是否只是由于 p5 声音库，还是实际上是由于内容安全策略。

【问题讨论】：

标签： javascript html processing p5.js

【解决方案1】：

根据违规消息判断，您已经发布了带有 default-src 'self' 'unsafe-inline' 规则的内容安全策略指令 (CSP)。我猜它是通过 HTTP 标头完成的，你可以很容易地check 这个。

您不能通过在元标记中添加另一个 CSP 来放松此 CSP。在有多个 CSP 的情况下，所有源都应通过两个 CPS 而不会出现划痕，但您的第一个 CSP 不允许将 blob: 用于工作人员。

因此，使用两个元标记是个坏主意：

<meta http-equiv="Content-Security-Policy" content="worker-src 'self' 'unsafe-inline';">
<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;">

生成的规则将只是 worker-src 'self'，因为只有 'self' 源能够通过两个 CSP。

您必须弄清楚default-src 'self' 'unsafe-inline' CSP 标头的发布位置并将blob: 添加到其中：

default-src 'self' 'unsafe-inline' blob:;

或

default-src 'self' 'unsafe-inline'; worker-src blob:;

我的代码在 Firefox 上运行良好，但在 Chrome 上尝试时却无法运行。

Chrome 和 Firefox 从单独的 JS 文件中创建与 worker 相关的行为不同：Chrome 为 worker 继承父页面的 CSP，但 Firefox - is not。

【讨论】：

非常感谢