Javascript 拒绝从'；水滴：https://... p5.sound.min.js:…'；因为它违反了以下内容安全策略指令_Javascript_Html_Processing_P5.js

Javascript 拒绝从'；水滴：https://... p5.sound.min.js:…'；因为它违反了以下内容安全策略指令

javascript html processing

Javascript 拒绝从'；水滴：https://... p5.sound.min.js:…'；因为它违反了以下内容安全策略指令,javascript,html,processing,p5.js,Javascript,Html,Processing,P5.js,我试图在Chrome上使用p5声音，但在尝试时遇到了一个错误拒绝从“blob:https://... p5.sound.min.js:…' 因为它违反了以下内容安全策略指令： “默认src‘自我’‘不安全内联’”。请注意，“worker src”不是显式设置，因此“default src”用作回退后来我遇到：未捕获的TypeError:p5。信封不是构造函数我试图寻找答案，并在我的索引html文件中添加了一个元标记，我对CSP指令上的所有页面感到困惑 <meta http-equ

我试图在Chrome上使用p5声音，但在尝试时遇到了一个错误

拒绝从“blob:https://... p5.sound.min.js:…' 因为它违反了以下内容安全策略指令： “默认src‘自我’‘不安全内联’”。请注意，“worker src”不是显式设置，因此“default src”用作回退

后来我遇到：

未捕获的TypeError:p5。信封不是构造函数

我试图寻找答案，并在我的索引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>


正文{填充：0；边距：0；}

我的代码在Firefox上运行得很好，但在Chrome上尝试时就不起作用了。我不知道这是因为p5声音库，还是因为内容安全策略。

根据违规消息判断，您已经发布了内容安全策略指令（CSP），其中包含

默认src“self”“unsafe inline”

规则。我想这是通过HTTP头完成的，你可以很容易地做到这一点

您不能通过在meta标记中添加另一个CSP来放松此CSP。在多个CSP的情况下，所有震源都应通过两个CP，无划痕，但您的第一个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:;">

或

我的代码在Firefox上运行得很好，但在Chrome上尝试时就不起作用了

Chrome和Firefox在单独的JS文件中创建了不同的行为相关工作者：Chrome从父页面为工作者继承CSP，但是Firefox-。

非常感谢

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

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