flutter config_error ai_generated true

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

ID: flutter/flutter-web-csp-violation

Also available as: JSON · Markdown · 中文
88%Fix Rate
84%Confidence
1Evidence
2024-05-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Flutter 3.16 active — — —
Dart 3.2 active — — —
Chrome 120 active — — —
Firefox 121 active — — —

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.

generic

中文

Flutter Web 应用需要内联脚本（例如用于 CanvasKit 或 Service Worker），但服务器的内容安全策略（CSP）标头阻止了它们，通常是由于缺少 'unsafe-inline' 或 nonce。

Official Documentation

https://docs.flutter.dev/deployment/web#content-security-policy

Workarounds

  1. 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'";` 
    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. 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}'`. 
    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. 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. 
    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.

中文步骤

  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'";`
  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}'`.
  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.

Dead Ends

Common approaches that don't work:

  1. 60% fail

    Disabling CSP exposes the app to XSS attacks and violates security best practices; many hosting providers enforce CSP at the infrastructure level.

  2. 50% 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.

  3. 70% fail

    If the server already sends a CSP header, the meta tag is ignored; the more restrictive policy applies, so the error persists.