Use safevalues to fix trusted types issues reported by tsec

Author: dlarocque

packages/analytics/package.json

@@ -41,19 +41,20 @@
     "@firebase/app": "0.x"
   },
   "dependencies": {
+    "@firebase/component": "0.6.7",
     "@firebase/installations": "0.6.7",
     "@firebase/logger": "0.4.2",
     "@firebase/util": "1.9.6",
-    "@firebase/component": "0.6.7",
+    "safevalues": "^0.5.2",
     "tslib": "^2.1.0"
   },
   "license": "Apache-2.0",
   "devDependencies": {
     "@firebase/app": "0.10.5",
-    "rollup": "2.79.1",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "rollup": "2.79.1",
     "rollup-plugin-typescript2": "0.31.2",
     "typescript": "4.7.4"
   },

packages/analytics/src/helpers.test.ts

@@ -24,16 +24,12 @@ import {
   insertScriptTag,
   wrapOrCreateGtag,
   findGtagScriptOnPage,
-  promiseAllSettled,
-  createGtagTrustedTypesScriptURL,
-  createTrustedTypesPolicy
+  promiseAllSettled
 } from './helpers';
-import { GtagCommand, GTAG_URL } from './constants';
+import { GtagCommand } from './constants';
 import { Deferred } from '@firebase/util';
 import { ConsentSettings } from './public-types';
 import { removeGtagScripts } from '../testing/gtag-script-util';
-import { logger } from './logger';
-import { AnalyticsError, ERROR_FACTORY } from './errors';
 
 const fakeMeasurementId = 'abcd-efgh-ijkl';
 const fakeAppId = 'my-test-app-1234';
@@ -50,71 +46,6 @@ const fakeDynamicConfig: DynamicConfig = {
 };
 const fakeDynamicConfigPromises = [Promise.resolve(fakeDynamicConfig)];
 
-describe('Trusted Types policies and functions', () => {
-  if (window.trustedTypes) {
-    describe('Trusted types exists', () => {
-      let ttStub: SinonStub;
-
-      beforeEach(() => {
-        ttStub = stub(
-          window.trustedTypes as TrustedTypePolicyFactory,
-          'createPolicy'
-        ).returns({
-          createScriptURL: (s: string) => s
-        } as any);
-      });
-
-      afterEach(() => {
-        removeGtagScripts();
-        ttStub.restore();
-      });
-
-      it('Verify trustedTypes is called if the API is available', () => {
-        const trustedTypesPolicy = createTrustedTypesPolicy(
-          'firebase-js-sdk-policy',
-          {
-            createScriptURL: createGtagTrustedTypesScriptURL
-          }
-        );
-
-        expect(ttStub).to.be.called;
-        expect(trustedTypesPolicy).not.to.be.undefined;
-      });
-
-      it('createGtagTrustedTypesScriptURL verifies gtag URL base exists when a URL is provided', () => {
-        expect(createGtagTrustedTypesScriptURL(GTAG_URL)).to.equal(GTAG_URL);
-      });
-
-      it('createGtagTrustedTypesScriptURL rejects URLs with non-gtag base', () => {
-        const NON_GTAG_URL = 'http://iamnotgtag.com';
-        const loggerWarnStub = stub(logger, 'warn');
-        const errorMessage = ERROR_FACTORY.create(
-          AnalyticsError.INVALID_GTAG_RESOURCE,
-          {
-            gtagURL: NON_GTAG_URL
-          }
-        ).message;
-
-        expect(createGtagTrustedTypesScriptURL(NON_GTAG_URL)).to.equal('');
-        expect(loggerWarnStub).to.be.calledWith(errorMessage);
-      });
-    });
-  }
-  describe('Trusted types does not exist', () => {
-    it('Verify trustedTypes functions are not called if the API is not available', () => {
-      delete window.trustedTypes;
-      const trustedTypesPolicy = createTrustedTypesPolicy(
-        'firebase-js-sdk-policy',
-        {
-          createScriptURL: createGtagTrustedTypesScriptURL
-        }
-      );
-
-      expect(trustedTypesPolicy).to.be.undefined;
-    });
-  });
-});
-
 describe('Gtag wrapping functions', () => {
   afterEach(() => {
     removeGtagScripts();

packages/analytics/src/helpers.ts

@@ -24,25 +24,12 @@ import {
 import { DynamicConfig, DataLayer, Gtag, MinimalDynamicConfig } from './types';
 import { GtagCommand, GTAG_URL } from './constants';
 import { logger } from './logger';
-import { AnalyticsError, ERROR_FACTORY } from './errors';
+import { trustedResourceUrl } from 'safevalues';
+import { safeScriptEl } from 'safevalues/dom';
 
 // Possible parameter types for gtag 'event' and 'config' commands
 type GtagConfigOrEventParams = ControlParams & EventParams & CustomParams;
 
-/**
- * Verifies and creates a TrustedScriptURL.
- */
-export function createGtagTrustedTypesScriptURL(url: string): string {
-  if (!url.startsWith(GTAG_URL)) {
-    const err = ERROR_FACTORY.create(AnalyticsError.INVALID_GTAG_RESOURCE, {
-      gtagURL: url
-    });
-    logger.warn(err.message);
-    return '';
-  }
-  return url;
-}
-
 /**
  * Makeshift polyfill for Promise.allSettled(). Resolves when all promises
  * have either resolved or rejected.
@@ -55,29 +42,6 @@ export function promiseAllSettled<T>(
   return Promise.all(promises.map(promise => promise.catch(e => e)));
 }
 
-/**
- * Creates a TrustedTypePolicy object that implements the rules passed as policyOptions.
- *
- * @param policyName A string containing the name of the policy
- * @param policyOptions Object containing implementations of instance methods for TrustedTypesPolicy, see {@link https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicy#instance_methods
- * | the TrustedTypePolicy reference documentation}.
- */
-export function createTrustedTypesPolicy(
-  policyName: string,
-  policyOptions: Partial<TrustedTypePolicyOptions>
-): Partial<TrustedTypePolicy> | undefined {
-  // Create a TrustedTypes policy that we can use for updating src
-  // properties
-  let trustedTypesPolicy: Partial<TrustedTypePolicy> | undefined;
-  if (window.trustedTypes) {
-    trustedTypesPolicy = window.trustedTypes.createPolicy(
-      policyName,
-      policyOptions
-    );
-  }
-  return trustedTypesPolicy;
-}
-
 /**
  * Inserts gtag script tag into the page to asynchronously download gtag.
  * @param dataLayerName Name of datalayer (most often the default, "_dataLayer").
@@ -86,21 +50,17 @@ export function insertScriptTag(
   dataLayerName: string,
   measurementId: string
 ): void {
-  const trustedTypesPolicy = createTrustedTypesPolicy(
-    'firebase-js-sdk-policy',
-    {
-      createScriptURL: createGtagTrustedTypesScriptURL
-    }
-  );
-
   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.
-
-  const gtagScriptURL = `${GTAG_URL}?l=${dataLayerName}&id=${measurementId}`;
-  (script.src as string | TrustedScriptURL) = trustedTypesPolicy
-    ? (trustedTypesPolicy as TrustedTypePolicy)?.createScriptURL(gtagScriptURL)
-    : gtagScriptURL;
+  //
+  // We also have to ensure the template string before the first expression constitutes a valid URL
+  // start, as this is what the initial validation focuses on. If the template literal begins
+  // directly with an expression (e.g. `${GTAG_SCRIPT_URL}`), the validation fails due to an
+  // empty initial string.
+  const url = trustedResourceUrl`https://www.googletagmanager.com/gtag/js?l=${dataLayerName}&id=${measurementId}`;
+  safeScriptEl.setSrc(script, url);
 
   script.async = true;
   document.head.appendChild(script);

packages/app-check/package.json

@@ -39,18 +39,19 @@
     "@firebase/app": "0.x"
   },
   "dependencies": {
-    "@firebase/util": "1.9.6",
     "@firebase/component": "0.6.7",
     "@firebase/logger": "0.4.2",
+    "@firebase/util": "1.9.6",
+    "safevalues": "^0.5.2",
     "tslib": "^2.1.0"
   },
   "license": "Apache-2.0",
   "devDependencies": {
     "@firebase/app": "0.10.5",
-    "rollup": "2.79.1",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "rollup": "2.79.1",
     "rollup-plugin-typescript2": "0.31.2",
     "typescript": "4.7.4"
   },

packages/app-check/src/recaptcha.ts

@@ -19,7 +19,12 @@ import { FirebaseApp } from '@firebase/app';
 import { getStateReference } from './state';
 import { Deferred } from '@firebase/util';
 import { getRecaptcha, ensureActivated } from './util';
+import { trustedResourceUrl } from 'safevalues';
+import { safeScriptEl } from 'safevalues/dom';
 
+// Note that these are used for testing. If they are changed, the URLs used in loadReCAPTCHAV3Script
+// and loadReCAPTCHAEnterpriseScript must also be changed. They aren't used to create the URLs
+// since trusted resource URLs must be created using template string literals.
 export const RECAPTCHA_URL = 'https://www.google.com/recaptcha/api.js';
 export const RECAPTCHA_ENTERPRISE_URL =
   'https://www.google.com/recaptcha/enterprise.js';
@@ -166,14 +171,20 @@ function renderInvisibleWidget(
 
 function loadReCAPTCHAV3Script(onload: () => void): void {
   const script = document.createElement('script');
-  script.src = RECAPTCHA_URL;
+  safeScriptEl.setSrc(
+    script,
+    trustedResourceUrl`https://www.google.com/recaptcha/api.js`
+  );
   script.onload = onload;
   document.head.appendChild(script);
 }
 
 function loadReCAPTCHAEnterpriseScript(onload: () => void): void {
   const script = document.createElement('script');
-  script.src = RECAPTCHA_ENTERPRISE_URL;
+  safeScriptEl.setSrc(
+    script,
+    trustedResourceUrl`https://www.google.com/recaptcha/enterprise.js`
+  );
   script.onload = onload;
   document.head.appendChild(script);
 }

packages/auth/package.json

@@ -130,8 +130,9 @@
     "@firebase/component": "0.6.7",
     "@firebase/logger": "0.4.2",
     "@firebase/util": "1.9.6",
-    "undici": "5.28.4",
-    "tslib": "^2.1.0"
+    "safevalues": "^0.5.2",
+    "tslib": "^2.1.0",
+    "undici": "5.28.4"
   },
   "license": "Apache-2.0",
   "devDependencies": {

packages/auth/src/platform_browser/index.ts

@@ -16,6 +16,8 @@
  */
 
 import { FirebaseApp, getApp, _getProvider } from '@firebase/app';
+import { safeAttrPrefix } from 'safevalues';
+import { safeElement } from 'safevalues/dom';
 
 import {
   initializeAuth,
@@ -124,7 +126,7 @@ _setExternalJSProvider({
     // TODO: consider adding timeout support & cancellation
     return new Promise((resolve, reject) => {
       const el = document.createElement('script');
-      el.setAttribute('src', url);
+      safeElement.setPrefixedAttribute([safeAttrPrefix`src`], el, 'src', url);
       el.onload = resolve;
       el.onerror = e => {
         const error = _createError(AuthErrorCode.INTERNAL_ERROR);

packages/auth/src/platform_browser/load_js.test.ts

@@ -18,6 +18,8 @@
 import { expect, use } from 'chai';
 import * as sinon from 'sinon';
 import sinonChai from 'sinon-chai';
+import { safeAttrPrefix } from 'safevalues';
+import { safeElement } from 'safevalues/dom';
 
 import {
   _generateCallbackName,
@@ -44,7 +46,12 @@ describe('platform-browser/load_js', () => {
         loadJS(url: string): Promise<Event> {
           return new Promise((resolve, reject) => {
             const el = document.createElement('script');
-            el.setAttribute('src', url);
+            safeElement.setPrefixedAttribute(
+              [safeAttrPrefix`src`],
+              el,
+              'src',
+              url
+            );
             el.onload = resolve;
             el.onerror = e => {
               const error = _createError(AuthErrorCode.INTERNAL_ERROR);
@@ -65,7 +72,9 @@ describe('platform-browser/load_js', () => {
 
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       _loadJS('http://localhost/url');
-      expect(el.setAttribute).to.have.been.calledWith(
+      expect(safeElement.setPrefixedAttribute).to.have.been.calledWith(
+        [safeAttrPrefix`src`],
+        el,
         'src',
         'http://localhost/url'
       );

packages/database/package.json

@@ -50,12 +50,13 @@
   "license": "Apache-2.0",
   "peerDependencies": {},
   "dependencies": {
-    "@firebase/logger": "0.4.2",
-    "@firebase/util": "1.9.6",
-    "@firebase/component": "0.6.7",
     "@firebase/app-check-interop-types": "0.3.2",
     "@firebase/auth-interop-types": "0.2.3",
+    "@firebase/component": "0.6.7",
+    "@firebase/logger": "0.4.2",
+    "@firebase/util": "1.9.6",
     "faye-websocket": "0.11.4",
+    "safevalues": "^0.5.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

packages/database/src/realtime/BrowserPollConnection.ts

@@ -16,6 +16,8 @@
  */
 
 import { base64Encode, isNodeSdk, stringify } from '@firebase/util';
+import { sanitizeHtml } from 'safevalues';
+import { safeDocument } from 'safevalues/dom';
 
 import { RepoInfo, repoInfoConnectionURL } from '../core/RepoInfo';
 import { StatsCollection } from '../core/stats/StatsCollection';
@@ -475,7 +477,7 @@ export class FirebaseIFrameScriptHolder {
       const iframeContents = '<html><body>' + script + '</body></html>';
       try {
         this.myIFrame.doc.open();
-        this.myIFrame.doc.write(iframeContents);
+        safeDocument.write(this.myIFrame.doc, sanitizeHtml(iframeContents));
         this.myIFrame.doc.close();
       } catch (e) {
         log('frame writing exception');

packages/messaging/package.json

@@ -54,18 +54,19 @@
     "@firebase/app": "0.x"
   },
   "dependencies": {
+    "@firebase/component": "0.6.7",
     "@firebase/installations": "0.6.7",
     "@firebase/messaging-interop-types": "0.2.2",
     "@firebase/util": "1.9.6",
-    "@firebase/component": "0.6.7",
     "idb": "7.1.1",
+    "safevalues": "^0.5.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@firebase/app": "0.10.5",
+    "@rollup/plugin-json": "4.1.0",
     "rollup": "2.79.1",
     "rollup-plugin-typescript2": "0.31.2",
-    "@rollup/plugin-json": "4.1.0",
     "ts-essentials": "9.3.0",
     "typescript": "4.7.4"
   },