Content Security Policy blocking a blob resource

Read Time:1 Minute, 16 Second

I have a page with extensive use of a fairly old JavaScript library, that does not load properly in Firefox and I only get the error message:

Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:8080/32e24021-9c34-4bcf-ad29-a1bf9dd87066 (“script-src”).

This is strange, because the page does not contain this resource (it must be loaded dynamically). Also, the content security policy set in the header supposedly allows this script to load:

Content-Security-Policy: default-src 'self';style-src 'self' 'unsafe-inline';object-src 'none';frame-src 'none';frame-ancestors 'none';script-src 'self' 'unsafe-inline' 'unsafe-eval'

The page loads in Chrome, but there is also an error message there:

jstree.min.js:2 Refused to create a worker from 'blob:http://localhost:8080/212343a2-b80f-4ea5-8013-6cce3fa10265' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

This makes it a bit more clear, what’s happening:

This is a worker
Workers are controlled by worker-src, but as it’s not defined, script-src is the fallback option.
script-src is not enough to allow this worker (localhost is not covered by 'self', because this is a blob: and not just any resource)

The solution is to add worker-src blob: to the Content-Security-Policy header. Note that adding worker-src 'blob:' does not help.