CODEWITHSUNDEEP
javascripthtmlprocessingp5.js
A. Rad
A. Rad

Reputation: 43

Refused to create a worker from 'blob:https://... p5.sound.min.js:..' because it violates the following Content Security Policy directive

I am trying to use p5 sound on Chrome, but I am encountering an error when trying.

Refused to create a worker from 'blob:https://... p5.sound.min.js:..' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

And later on I encounter:

Uncaught TypeError: p5.Envelope is not a constructor

I have tried looking for an answer and have added a meta tag to my index html file, I was getting confused with what all the pages on CSP Directive.

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

My html code that fetches the libraries looks like this

<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>

My code works fine on Firefox, but when trying on Chrome it just doesn't work. I have no idea if it's just due to the p5 sound library, or if it is actually due to the Content Security Policy.

Upvotes: 1

Views: 10424

Answers (1)

granty
granty

Reputation: 8546

Judging by violation message, you are already published Content Security Policy directive (CSP) with default-src 'self' 'unsafe-inline' rule. I guess it is done via HTTP header, you can easily check this.

You can't relax this CSP by adding another CSP in meta tag. In case of multiple CSPs, all sources should pass through both CPS without scratches, but your first CSP does not allow using blob: for workers.

By this reason it's a bad idea to use two meta tags:

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

the resulting rule will be just worker-src 'self' because only the 'self' source will be able to pass through both CSPs.

You have to figure out where the default-src 'self' 'unsafe-inline' CSP header is published and add blob: into it:

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

or

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

My code works fine on Firefox, but when trying on Chrome it just doesn't work.

Chrome and Firefox have different behaviour related workers creation from the separate JS file: Chrome inherits for worker the CSP from parent page, but Firefox - is not.

Upvotes: 4

Related Questions