ray
28 lines
1.7 KiB
Markdown
28 lines
1.7 KiB
Markdown
# 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
|