CSP Origin Restrictions Between Live Reload and Production Bundles

Direct answer

Use 'self' in default-src and connect-src so the policy follows the document origin in both modes. During live reload, 'self' resolves to the dev server IP and port; in production it resolves to capacitor://localhost on iOS and http(s)://localhost on Android. Add only the dev origin and its WebSocket scheme to the development CSP, and exclude them from the production bundle. Generate the correct <meta http-equiv="Content-Security-Policy"> at build time through your bundler's HTML transform; do not try to rewrite a meta CSP after the page loads.

Likely explanation

The violation appears because the document origin changes between schemes, so an allow-list that worked under http://192.168.x.x:PORT no longer matches capacitor://localhost. Native Capacitor plugin calls cross the native bridge and are not governed by connect-src; only HTTP/fetch targets and WebSocket connections need explicit origins.

Confirmed behavior

• 'self' adapts to the WebView document origin in both development and production.
• A meta CSP cannot reliably be changed after load and cannot express frame-ancestors, sandbox, or report-only directives.
• Shipping the dev IP or port in production widens exfiltration surface and should be avoided.
• Android androidScheme defaults vary by Capacitor major version; pin it explicitly in capacitor.config.ts.

Steps for this case

1. Pin androidScheme (and iosScheme if needed) in Capacitor config so the production origin is stable across updates.
2. Write a base CSP using 'self' plus explicit external API hosts in connect-src and CDN hosts in script-src/style-src. Use relative URLs for app resources so one 'self' entry covers both schemes.
3. Create a dev variant that additionally allows the live-reload origin and ws:// or wss:// for HMR. Create a production variant without those entries.
4. Inject the variant into index.html at build time: Vite transformIndexHtml, Webpack HtmlWebpackPlugin template, or an Angular index-file transform, keyed off MODE or NODE_ENV.
5. Confirm the emitted production HTML contains no dev IP, dev port, or ws: entry.

Verification

1. Run the production build and inspect dist/index.html: grep -E "ws:|192\.168|localhost:PORT" dist/index.html should return nothing.
2. Install on a device and open the WebView inspector (Safari Web Inspector for iOS, chrome://inspect for Android). Confirm location.origin matches the pinned scheme and that no CSP errors appear.
3. Exercise each native plugin and external API call on the device; live-reload success alone does not validate the production scheme.

Assumptions and uncertainty: This assumes a standard Capacitor WebView and a bundler that transforms index.html. Exact placeholder syntax and config keys vary by Capacitor and bundler version; verify against the versions installed in the project. Treat the androidScheme default as version-dependent until confirmed.

Missing diagnostic detail: Which bundler or framework generates your index.html (Vite, Webpack, Angular, or another)? The injection hook changes with that choice.