# Content Security Policy: The page's settings blocked the loading of a resource at inline-script

- **ID:** `flutter/flutter-web-csp-violation`
- **Domain:** flutter
- **Category:** config_error
- **Verification:** ai_generated
- **Fix Rate:** 88%

## Root Cause

Flutter web app requires inline scripts (e.g., for CanvasKit or service workers) but the server's Content Security Policy (CSP) header blocks them, often due to missing 'unsafe-inline' or nonce.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| Flutter 3.16 | active | — | — |
| Dart 3.2 | active | — | — |
| Chrome 120 | active | — | — |
| Firefox 121 | active | — | — |

## Workarounds

1. **Update the server's CSP header to include 'script-src 'self' 'unsafe-inline' 'unsafe-eval';' for Flutter web apps. For nginx: `add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'";`** (90% success)
   ```
   Update the server's CSP header to include 'script-src 'self' 'unsafe-inline' 'unsafe-eval';' for Flutter web apps. For nginx: `add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'";`
   ```
2. **Use a nonce-based CSP: generate a random nonce per request and add it to the script tag in the HTML template, then set `script-src 'self' 'nonce-{nonce}'`.** (85% success)
   ```
   Use a nonce-based CSP: generate a random nonce per request and add it to the script tag in the HTML template, then set `script-src 'self' 'nonce-{nonce}'`.
   ```
3. **Build Flutter web with `--web-renderer canvaskit --csp` to enable CSP-compatible mode, then adjust the server CSP to allow only 'self' for scripts and styles.** (80% success)
   ```
   Build Flutter web with `--web-renderer canvaskit --csp` to enable CSP-compatible mode, then adjust the server CSP to allow only 'self' for scripts and styles.
   ```

## Dead Ends

- **** — Disabling CSP exposes the app to XSS attacks and violates security best practices; many hosting providers enforce CSP at the infrastructure level. (60% fail)
- **** — Switching renderers may change visual behavior and performance; it also doesn't resolve CSP issues if the app still uses inline scripts for other purposes. (50% fail)
- **** — If the server already sends a CSP header, the meta tag is ignored; the more restrictive policy applies, so the error persists. (70% fail)