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');