Getting "Refused to create worker from blob" error in video.min.js when looking at Chrome console

Question

Using 7.4.1, when I load a page with videojs on it, Chrome devtools is showing me this error:

Refused to create a worker from      
'blob:https://dev.culturediscovery.com/51e9879d-fa81-4044-9117-        
7328c0df4dd6' because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 'unsafe-inline'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @   video.min.js:1830
(anonymous) @   video.min.js:2
(anonymous) @   video.min.js:2

Can anyone help me figure out how to deal with this?

Answer 1

The error is related to Content Security Policy as traceback suggests. So if default-src or worker-src in CSP directive is present, every attempt to spawn worker in browser that supports CSP for workers must pass this directive or to throw error.

There is a special note about blob worker:

To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which requested the worker script itself.

The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker that created it.

source: MDN: CSP in workers

So page (or iframe) where blob url is created has CSP directive:

"default-src * data: 'unsafe-eval' 'unsafe-inline'"

Now consider following:

As defined above, special URL schemes that refer to specific pieces of unique content, such as "data:", "blob:" and "filesystem:" are excluded from matching a policy of * and must be explicitly listed.

source: W3: Security Considerations for GUID URL schemes

It means that you need explicitly add blob: data schema to default-src or worker-src:

"default-src * data: 'unsafe-eval' 'unsafe-inline' blob:"