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:
- 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. - 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:
- 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’;”
} - Added CSP meta tag in index.html:
- 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!