CSP Issue: Unable to Create Web Worker in Vosk-Browser Deployed via DFX Canister

Hi Community,

I’m facing an issue when deploying a Vosk-Browser-based project as an Internet Computer canister using dfx deploy. Everything works perfectly when running the app locally (e.g., with npm run dev), but when accessing the app through the deployed canister, the Vosk model fails to initialize due to Content Security Policy (CSP) restrictions.

Here’s the specific error message I receive in the browser console:

  1. Refused to create a worker from ‘blob:127.0.0.1:4943…’
    because it violates the following Content Security Policy directive: “script-src ‘self’”.
    Note that ‘worker-src’ was not explicitly set, so ‘script-src’ is used as a fallback.
  2. Initializing Vosk Error: SecurityError: Failed to construct ‘Worker’: Access to the script at ‘blob:h**p://127.0.0.1:4943/…’ is denied by the document’s Content Security Policy.

I’ve tried the following:

  1. Set CSP in dfx.json: Added the worker-src ‘self’ blob: directive to the Content-Security-Policy header:
    “headers”: {
    “Content-Security-Policy”: “default-src ‘self’; worker-src ‘self’ blob:; script-src ‘self’;”
    }
  2. Added CSP meta tag in index.html:
  3. Explored alternatives to Blob-based Workers: I attempted to modify the Vosk-Browser library to load the worker from a static file, but capturing the worker’s contents and adapting the library is complex and not ideal.

Has anyone else faced a similar issue when using Web Workers in an Internet Computer canister? If so, how did you resolve it? Any guidance or suggestions would be greatly appreciated!

Thanks in advance for your help!

Can you check what CSP is attached to the response after updating the CSP and redeploying? Occasionally dfx fails to sync headers. In that case I recommend redeploying the canister with --mode reinstall.

Aside: you say you specified your own CSP in dfx.json. Is that a typo? Headers usually go in .ic-assets.json5` files

Hi Severin, this is the response Headers CSP values:

It looks like my settings didn’t work.

Yes, I set csp in dfx.json and index.html tag. If this is not right, I look forward to your advice. Thanks in advance.

The problem has been solved by setting csp and allowing microphone permissions in the public/.ic-asset.json5 file. Thanks Severin.

1 Like