Worker and Blob URL Violations
Worker and Blob URL Violations
Web Workers and Blob URLs often cause CSP violations:
// Common Error: Worker blocked
// Console: Refused to create a worker from 'blob:...' because it violates the
// following Content Security Policy directive: "worker-src 'self'"
// SOLUTION 1: Add worker-src directive
Content-Security-Policy:
default-src 'self';
worker-src 'self' blob:;
script-src 'self' blob:;
// SOLUTION 2: Create CSP-compliant workers
class CSPCompliantWorkerFactory {
constructor(cspNonce) {
this.nonce = cspNonce;
}
createWorker(workerCode) {
// Method 1: External worker file (preferred)
if (typeof workerCode === 'string' && workerCode.endsWith('.js')) {
return new Worker(workerCode);
}
// Method 2: Blob URL with proper CSP
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
const worker = new Worker(workerUrl);
// Clean up blob URL after worker is created
worker.addEventListener('error', () => URL.revokeObjectURL(workerUrl));
return worker;
}
// Create worker from function
createWorkerFromFunction(fn) {
const workerCode = `
'use strict';
const workerFunction = ${fn.toString()};
workerFunction();
`;
return this.createWorker(workerCode);
}
}
// SOLUTION 3: Use external worker files
// Instead of inline worker:
const worker = new Worker(URL.createObjectURL(new Blob([`
self.onmessage = function(e) {
self.postMessage(e.data * 2);
}
`])));
// Use external file:
// worker.js
self.onmessage = function(e) {
self.postMessage(e.data * 2);
};
// main.js
const worker = new Worker('/js/worker.js');