# CSP Requirements for Tesseract.js

When adding client-side OCR (Tesseract.js v5 via CDN) to an SPQ page, the Content Security Policy `<meta>` tag must be extended beyond the standard SPQ CSP. Without these, Tesseract.js silently fails — the UI shows "Running OCR..." forever because the Web Worker can't download WASM/language data.

## Required CSP directives

Tesseract.js v5 from `cdn.jsdelivr.net` needs:

| Directive | Addition | Why |
|---|---|---|
| `connect-src` | `https://cdn.jsdelivr.net blob:` | Worker fetches WASM core + `eng.traineddata` from CDN; blob worker communication |
| `worker-src` | `blob:` | Tesseract creates inline Web Workers via blob URLs |
| `script-src` | `'unsafe-eval'` | WASM compilation uses `new Function()` under Emscripten |

## Full CSP template

```
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com https://www.gstatic.com; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src 'self' https://cdn.jsdelivr.net blob:; img-src 'self' data: blob:; worker-src blob:; frame-src 'self';">
```

## Debugging checklist

1. Check browser console (F12) — CSP violations are logged clearly with the blocked directive and resource
2. "violates content security policy directive 'connect-src'" → missing CDN in connect-src
3. "'unsafe-eval' is not allowed" → missing in script-src
4. `.map` file blocked (source map) → cosmetic, can ignore
5. After CSP fix, hard refresh (Ctrl+Shift+R) to bypass cached CSP meta tag