[firebase_core] CSP support on Flutter web

[atoka93]

Goal: make Firebase Analytics work on web and avoid adding unsafe-inline to script-src.

The content security policy for script-src is failing with Content Security Policy blocks inline execution of scripts at t1.head.appendChild(script);, _injectSrcScript$body$FirebaseCoreWeb.

Tested with: firebase_core: 1.20.0 and firebase_analytics: 9.3.0.

Including a fixed version of the firebase-app.js, firebase-analytics.js and using the old initializer used to work, but with the updated Firebase initialization (Firebase.initializeApp(options: ...)), which became mandatory to use, and automatic abstracted Firebase web initialization I didn't manage to make it work anymore and I can't think of a workaround.

Latest version of the dependencies that worked (right before the JS Firebase SDK version was updated from 8.10.1 to 9+):

  firebase_analytics: 9.1.12
  firebase_analytics_platform_interface: 3.1.10
  firebase_analytics_web: 0.4.0+17
  firebase_core: 1.19.1
  firebase_core_platform_interface: 4.4.3
  firebase_core_web: 1.6.6

[atoka93]

My teammates figured out a workaround:

Setting up an npm package with firebase:

import * as firebaseCore from 'firebase/app';
import * as firebaseAnalytics from 'firebase/analytics';

window.firebase_core = firebaseCore;
window.firebase_analytics = firebaseAnalytics;

and using webpack to generate a Firebase bundle javascript file
which is then statically imported into the Flutter web/index.html
makes the new/abstracted initialization work.

Kinda big workaround to circumvent

flutterfire/packages/firebase_core/firebase_core_web/lib/src/firebase_core_web.dart

Lines 84 to 88 in 5b5f477

	script.text = '''
	window.ff_trigger_$windowVar = async (callback) => {
	callback(await import("$src"));
	};
	''';

and avoid using unsafe-inline 😕

[AlexDochioiu]

Thanks for your comment @atoka93! was of great help!

For those looking for a step-by-step guide on how to do this, see my comment here:

#9817 (comment)