Search code examples
safariblobweb-workercontent-security-policy

Safari unable to create Worker from blob due to Content-Security-Policy issue


I'm trying to create Worker on my web page:

const url = URL.createObjectURL(blob);
const worker = new Worker(url);

And Safari displays the following error in console:

Refused to load blob:https://my.address.com/5fa7b5e6-cb10-4b7c-967b-e95cae58cd71 because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.

I have the following Content-Security-Policy tag on the page:

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

But looks like Safari ignores it. I bet I tried all possible combinations of SCP directives (such as worker-src, object-src, script-src, child-src, etc.) and sources (*, blob:, 'unsafe-eval', 'unsafe-inline', etc.)

Appreciate any ideas!

Notes:

  1. When I open my web page in Safari via http Worker is created without any errors. The problem is when opening via https.
  2. Worker works fine in Chrome, Firefox, Edge
  3. I have only one Content-Security-Policy tag on the page
  4. When inspecting Http Response Headers in Safari they look good

Solution

  • Safari does not support worker-src directive (v 12 was tested) and just ignores it, check the console for Unrecognized Content Security Policy directive 'worker-src' message.

    Fallback chain for worker-src is: child-src -> script-src -> default-src, therefore to support Safari you have to use child-src with the same rules as worker-src. The child-src blob: works in Safari (push the 'blob:' button to see).

    The message because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy is unclear. Do you already have child-src / default-src with some rules in the policy?
    Because <meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:"> just ignores by Safari and should not block worker.