ray
1.7 KiB
1.7 KiB
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
- Check browser console (F12) — CSP violations are logged clearly with the blocked directive and resource
- "violates content security policy directive 'connect-src'" → missing CDN in connect-src
- "'unsafe-eval' is not allowed" → missing in script-src
.mapfile blocked (source map) → cosmetic, can ignore- After CSP fix, hard refresh (Ctrl+Shift+R) to bypass cached CSP meta tag