问题描述
我正在尝试在 Chrome 上使用 p5 声音,但在尝试时遇到错误。
拒绝从“blob:https://... p5.sound.min.js:...”创建一个worker 因为它违反了以下内容安全策略指令: “默认 src 'self' 'unsafe-inline'”。请注意,'worker-src' 不是 显式设置,因此“default-src”用作后备。
后来我遇到:
我尝试寻找答案并在我的索引 html 文件中添加了一个元标记,但我对 CSP 指令上的所有页面的内容感到困惑。
<Meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;">
<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。