Trusted types violation in analytics/src/helpers.ts

[jacobsimionato]

Describe your environment

• Operating System version: any
• Browser version: Chrome
• Firebase SDK version: 8.3.1
• Firebase Product: Analytics

Describe the problem

Google Flutter web apps using Firebase plugins that rely on Firebase analytics JS are receiving browser error reports through the TrustedTypes browser APIs. Specifically, the script injection code in insertScriptTag is not adhering to the standards and is causing errors to be logged.

Steps to reproduce:

1. Create an example app
2. Enable trusted types enforcement, e.g. by adding:

     <meta
       http-equiv="Content-Security-Policy"
       content="require-trusted-types-for 'script'"
     />
   

3. Load page, and look for errors in the JS console

A similar issue was reported and fixed in the FlutterFire plugin at firebase/flutterfire#10311 - it shows an example of adding a trusted types policy.

Also see internal Google issue b/265347604 for more details.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[dwyfrequency]

Replicated the issue using in a firebase project that uses analytics
Added the below to an html file

<meta
      http-equiv="Content-Security-Policy"
      content="require-trusted-types-for 'script'"
    />

Resolved issue by editing firebase-js-sdk/packages/analytics/src/helpers.ts

let _ttPolicy: Partial<TrustedTypePolicy>;
// Create TrustedTypes policy to attach scripts...
if (window.trustedTypes) {
  _ttPolicy = window.trustedTypes.createPolicy('firebase-js-sdk-policy', {
    createScriptURL: (url: string) => url
  });
}
...
...
export function insertScriptTag(
  dataLayerName: string,
  measurementId: string
): void {
  const script = document.createElement('script');
  // We are not providing an analyticsId in the URL because it would trigger a `page_view`
  // without fid. We will initialize ga-id using gtag (config) command together with fid.

  // New function code
  const gtagScriptURL = `${GTAG_URL}?l=${dataLayerName}&id=${measurementId}`;
  (script.src as string | TrustedScriptURL) = _ttPolicy
    ? (_ttPolicy as TrustedTypePolicy)?.createScriptURL(gtagScriptURL)
    : gtagScriptURL;
  // End new function code

  script.async = true;
  document.head.appendChild(script);
}

We'll work on building a more robust solution to resolve this.

[jacobsimionato]

Fantastic! Thanks so much for looking into this :-D