拒绝从“blob:https://... p5.sound.min.js:...”创建工作线程，因为它违反了以下内容安全策略指令

如何解决拒绝从“blob:https://... p5.sound.min.js:...”创建工作线程，因为它违反了以下内容安全策略指令

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

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

后来我遇到：

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

我尝试寻找答案并在我的索引 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 声音库，还是实际上是因为内容安全政策。

解决方法

根据违规消息判断，您已经发布了具有 vec <- c(0.857,0.210,924894.259,1) sprintf(paste0("%0.",pmax(floor(3 - log(abs(vec)+0.001,10)),0),"f"),vec) # [1] "0.857" "0.210" "924894" "1.00" 规则的内容安全策略指令 (CSP)。我想它是通过 HTTP 标头完成的，您可以轻松地check 这样做。

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

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

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' 源才能通过两个 CSP。

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

blob:

或

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

我的代码在 Firefox 上运行良好，但在 Chrome 上尝试时却不起作用。

Chrome 和 Firefox 具有从单独的 JS 文件创建的与工作线程相关的不同行为：Chrome 为工作线程从父页面继承了 CSP，但 Firefox - is not。