fix(core, web): fix compatibility with TrustedTypes (#12383)

* fix(core, web): fix compatibility with TrustedTypes * update typos
firebase · Feb 27, 2024 · 6c1f73d · 6c1f73d
1 parent f24d0a7
commit 6c1f73d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/packages/firebase_core/firebase_core/example/web/index.html b/packages/firebase_core/firebase_core/example/web/index.html
@@ -19,10 +19,18 @@
     <meta charset="UTF-8" />
     <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
 
-    <meta
+    <!-- 
+      If you want to test the require-trusted-types-for CSP, uncomment the line below
+      and run the app in a browser that supports Trusted Types (e.g. Chrome 83+).
+      Note that you need to run the app in release mode until this issue is fixed:  
+      https://github.com/requirejs/requirejs/issues/1832
+
+      Quick script: flutter build web && serve build/web
+
+      <meta
       http-equiv="Content-Security-Policy"
       content="require-trusted-types-for 'script'"
-    />
+    /> -->
 
     <title>Firebase Core Example</title>
     <link rel="manifest" href="manifest.json" />

diff --git a/packages/firebase_core/firebase_core_web/lib/src/firebase_core_web.dart b/packages/firebase_core/firebase_core_web/lib/src/firebase_core_web.dart
@@ -105,7 +105,11 @@ class FirebaseCoreWeb extends FirebasePlatform {
   /// document.
   @visibleForTesting
   Future<void> injectSrcScript(String src, String windowVar) async {
-    web.TrustedScriptURL? trustedUrl;
+    final web.HTMLScriptElement script =
+        web.document.createElement('script') as web.HTMLScriptElement;
+    script.type = 'text/javascript';
+    script.crossOrigin = 'anonymous';
+
     final trustedTypePolicyName = _defaultTrustedPolicyName + windowVar;
     if (web.window.nullableTrustedTypes != null) {
       web.console.debug(
@@ -117,31 +121,38 @@ class FirebaseCoreWeb extends FirebasePlatform {
           trustedTypePolicyName,
           web.TrustedTypePolicyOptions(
             createScriptURL: ((JSString url) => src).toJS,
+            createScript: ((JSString script, JSString? type) => script).toJS,
           ),
         );
-        trustedUrl = policy.createScriptURLNoArgs(src);
+        final trustedUrl = policy.createScriptURLNoArgs(src);
+        final stringUrl = (trustedUrl as JSObject).callMethod('toString'.toJS);
+        final trustedScript = policy.createScript(
+          '''
+            window.ff_trigger_$windowVar = async (callback) => {
+              console.debug("Initializing Firebase $windowVar");
+              callback(await import("$stringUrl"));
+            };
+          ''',
+          null,
+        );
+
+        script.trustedScript = trustedScript;
+
+        web.document.head!.appendChild(script);
       } catch (e) {
         throw TrustedTypesException(e.toString());
       }
-    }
-
-    final web.HTMLScriptElement script =
-        web.document.createElement('script') as web.HTMLScriptElement;
-    script.type = 'text/javascript';
-    script.crossOrigin = 'anonymous';
-    final stringUrl = trustedUrl != null
-        // Necessary for the JS interop to work correctly on Flutter Beta 3.19.
-        // ignore: unnecessary_cast
-        ? (trustedUrl as JSObject).callMethod('toString'.toJS)
-        : src;
-    script.text = '''
+    } else {
+      final stringUrl = src;
+      script.text = '''
       window.ff_trigger_$windowVar = async (callback) => {
         console.debug("Initializing Firebase $windowVar");
         callback(await import("$stringUrl"));
       };
     ''';
 
-    web.document.head!.appendChild(script);
+      web.document.head!.appendChild(script);
+    }
 
     Completer completer = Completer();
 

diff --git a/packages/firebase_core/firebase_core_web/lib/src/interop/package_web_tweaks.dart b/packages/firebase_core/firebase_core_web/lib/src/interop/package_web_tweaks.dart
@@ -32,7 +32,6 @@ extension CreateScriptUrlWithoutArgs on web.TrustedTypePolicy {
 /// This extension allows setting a TrustedScriptURL as the src of a script element,
 /// which currently only accepts a string.
 extension TrustedTypeSrcAttribute on web.HTMLScriptElement {
-  ///
-  @JS('src')
-  external set srcTT(web.TrustedScriptURL value);
+  @JS('text')
+  external set trustedScript(web.TrustedScript value);
 }