Fix trusted types violation

Author: Kian Jamali

packages/auth/package.json

@@ -127,6 +127,7 @@
     "@firebase/component": "0.7.0",
     "@firebase/logger": "0.5.0",
     "@firebase/util": "1.13.0",
+    "safevalues": "1.2.0",
     "tslib": "^2.1.0"
   },
   "license": "Apache-2.0",

packages/auth/src/platform_browser/iframe/gapi.test.ts

@@ -26,6 +26,7 @@ import { testAuth, TestAuth } from '../../../test/helpers/mock_auth';
 import { _window } from '../auth_window';
 import * as js from '../load_js';
 import { _loadGapi, _resetLoader } from './gapi';
+import { unwrapResourceUrl } from 'safevalues';
 
 use(sinonChai);
 use(chaiAsPromised);
@@ -41,7 +42,7 @@ describe('platform_browser/iframe/gapi', () => {
 
   beforeEach(async () => {
     loadJsStub = sinon.stub(js, '_loadJS').callsFake(url => {
-      onJsLoad(url.split('onload=')[1]);
+      onJsLoad(unwrapResourceUrl(url).split('onload=')[1]);
       return Promise.resolve(new Event('load'));
     });
 

packages/auth/src/platform_browser/iframe/gapi.ts

@@ -106,7 +106,7 @@ function loadGapi(auth: AuthInternal): Promise<gapi.iframes.Context> {
       };
       // Load GApi loader.
       return js
-        ._loadJS(appendParams(js._gapiScriptUrl(), { onload: cbName }))
+        ._loadJS(appendParams(js._gapiScriptUrl(), new Map([['onload', cbName]])))
         .catch(e => reject(e));
     }
   }).catch(error => {

packages/auth/src/platform_browser/index.ts

@@ -16,7 +16,7 @@
  */
 
 import { FirebaseApp, getApp, _getProvider } from '@firebase/app';
-import { trustedResourceUrl } from 'safevalues';
+import { TrustedResourceUrl, trustedResourceUrl } from 'safevalues';
 import { setScriptSrc } from 'safevalues/dom';
 
 import {
@@ -122,7 +122,7 @@ function getScriptParentElement(): HTMLDocument | HTMLHeadElement {
 }
 
 _setExternalJSProvider({
-  loadJS(url): Promise<Event> {
+  loadJS(url: TrustedResourceUrl): Promise<Event> {
     // TODO: consider adding timeout support & cancellation
     return new Promise((resolve, reject) => {
       const el = document.createElement('script') as HTMLScriptElement;
@@ -141,7 +141,8 @@ _setExternalJSProvider({
 
   gapiScript: trustedResourceUrl`https://apis.google.com/js/api.js`,
   recaptchaV2Script: trustedResourceUrl`https://www.google.com/recaptcha/api.js`,
-  recaptchaEnterpriseScript: trustedResourceUrl`https://www.google.com/recaptcha/enterprise.js?render=`
+  recaptchaEnterpriseScript:
+    trustedResourceUrl`https://www.google.com/recaptcha/enterprise.js`
 });
 
 registerAuth(ClientPlatform.BROWSER);

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

@@ -26,6 +26,8 @@ import {
 } from './load_js';
 import { _createError } from '../core/util/assert';
 import { AuthErrorCode } from '../core/errors';
+import { TrustedResourceUrl, trustedResourceUrl, unwrapResourceUrl } from 'safevalues';
+import { setScriptSrc } from 'safevalues/dom';
 
 use(sinonChai);
 
@@ -41,10 +43,10 @@ describe('platform-browser/load_js', () => {
   describe('_loadJS', () => {
     it('sets the appropriate properties', () => {
       _setExternalJSProvider({
-        loadJS(url: string): Promise<Event> {
+        loadJS(url: TrustedResourceUrl): Promise<Event> {
           return new Promise((resolve, reject) => {
             const el = document.createElement('script');
-            el.setAttribute('src', url);
+            setScriptSrc(el, url);
             el.onload = resolve;
             el.onerror = e => {
               const error = _createError(AuthErrorCode.INTERNAL_ERROR);
@@ -55,20 +57,18 @@ describe('platform-browser/load_js', () => {
             el.charset = 'UTF-8';
           });
         },
-        gapiScript: 'https://gapiScript',
-        recaptchaV2Script: 'https://recaptchaV2Script',
-        recaptchaEnterpriseScript: 'https://recaptchaEnterpriseScript'
+        gapiScript: trustedResourceUrl`https://gapiScript`,
+        recaptchaV2Script: trustedResourceUrl`https://recaptchaV2Script`,
+        recaptchaEnterpriseScript: trustedResourceUrl`https://recaptchaEnterpriseScript`
       });
       const el = document.createElement('script');
       sinon.stub(el); // Prevent actually setting the src attribute
       sinon.stub(document, 'createElement').returns(el);
 
+      const testUrl = trustedResourceUrl`http://localhost/url`;
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      _loadJS('http://localhost/url');
-      expect(el.setAttribute).to.have.been.calledWith(
-        'src',
-        'http://localhost/url'
-      );
+      _loadJS(testUrl);
+      expect(el.src).to.eq(unwrapResourceUrl(testUrl));
       expect(el.type).to.eq('text/javascript');
       expect(el.charset).to.eq('UTF-8');
     });

packages/auth/src/platform_browser/load_js.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TrustedResourceUrl } from 'safevalues';
+import { TrustedResourceUrl, trustedResourceUrl } from 'safevalues';
 
 interface ExternalJSProvider {
   loadJS(url: TrustedResourceUrl): Promise<Event>;
@@ -24,42 +24,33 @@ interface ExternalJSProvider {
   gapiScript: TrustedResourceUrl;
 }
 
-// externalJSProvider is set in index.ts
-let externalJSProvider: ExternalJSProvider;
+let externalJSProvider: ExternalJSProvider = {
+  loadJS(url: TrustedResourceUrl): Promise<Event> {
+    throw new Error('Unable to load external scripts');
+  },
+
+  recaptchaV2Script: trustedResourceUrl``,
+  recaptchaEnterpriseScript: trustedResourceUrl``,
+  gapiScript: trustedResourceUrl``
+};
 
 export function _setExternalJSProvider(p: ExternalJSProvider): void {
   externalJSProvider = p;
 }
 
 export function _loadJS(url: TrustedResourceUrl): Promise<Event> {
-  // externalJSProvider is not defined during initialization.
-  if (!externalJSProvider) {
-    throw new Error('ExternalJSProvider not set.');
-  }
   return externalJSProvider.loadJS(url);
 }
 
 export function _recaptchaV2ScriptUrl(): TrustedResourceUrl {
-  // externalJSProvider is not defined during initialization.
-  if (!externalJSProvider) {
-    throw new Error('ExternalJSProvider not set.');
-  }
   return externalJSProvider.recaptchaV2Script;
 }
 
 export function _recaptchaEnterpriseScriptUrl(): TrustedResourceUrl {
-  // externalJSProvider is not defined during initialization.
-  if (!externalJSProvider) {
-    throw new Error('ExternalJSProvider not set.');
-  }
   return externalJSProvider.recaptchaEnterpriseScript;
 }
 
 export function _gapiScriptUrl(): TrustedResourceUrl {
-  // externalJSProvider is not defined during initialization.
-  if (!externalJSProvider) {
-    throw new Error('ExternalJSProvider not set.');
-  }
   return externalJSProvider.gapiScript;
 }
 

packages/auth/src/platform_browser/recaptcha/recaptcha_enterprise_verifier.ts

@@ -25,7 +25,7 @@ import {
   RecaptchaAuthProvider,
   EnforcementState
 } from '../../api';
-import { appendParams } from 'safevalues';
+import { appendParams, unwrapResourceUrl } from 'safevalues';
 
 import { Auth } from '../../model/public_types';
 import { AuthInternal } from '../../model/auth';
@@ -142,12 +142,12 @@ export class RecaptchaEnterpriseVerifier {
               );
               return;
             }
-            const url = jsHelpers._recaptchaEnterpriseScriptUrl();
-            // Append site key as query parameter.
-            const urlWithParams = appendParams(url, new Map([['render', siteKey]]));
-
+            let url = jsHelpers._recaptchaEnterpriseScriptUrl();
+            if (unwrapResourceUrl(url).toString().length !== 0) {
+              url = appendParams(url, new Map([['render', siteKey]]));
+            }
             jsHelpers
-              ._loadJS(urlWithParams)
+              ._loadJS(url)
               .then(() => {
                 retrieveRecaptchaToken(siteKey, resolve, reject);
               })

packages/auth/src/platform_browser/recaptcha/recaptcha_loader.ts

@@ -90,11 +90,11 @@ export class ReCaptchaLoaderImpl implements ReCaptchaLoader {
         resolve(recaptcha);
       };
 
-      const url = appendParams(jsHelpers._recaptchaV2ScriptUrl(), {
-        onload: _JSLOAD_CALLBACK,
-        render: 'explicit',
-        hl
-      });
+      const url = appendParams(jsHelpers._recaptchaV2ScriptUrl(), new Map([
+        ['onload', _JSLOAD_CALLBACK],
+        ['render', 'explicit'],
+        ['hl', hl]
+      ]));
 
       jsHelpers._loadJS(url).catch(() => {
         clearTimeout(networkTimeout);

yarn.lock

@@ -14237,6 +14237,11 @@ safe-stable-stringify@^2.3.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+safevalues@1.2.0:
+  version "1.2.0"
+  resolved "https://us-npm.pkg.dev/artifact-foundry-prod/ah-3p-staging-npm/safevalues/-/safevalues-1.2.0.tgz#f9e646d6ebf31788004ef192d2a7d646c9896bb2"
+  integrity sha512-zIsuhjYvJCjfsfjoim2ab6gLKFYAnTiDSJGh0cC3T44L/4kNLL90hBG2BzrXPrHA3f8Ms8FSJ1mljKH5dVR1cw==
+
 sauce-connect-launcher@^1.2.7:
   version "1.3.2"
   resolved "https://registry.npmjs.org/sauce-connect-launcher/-/sauce-connect-launcher-1.3.2.tgz#dfc675a258550809a8eaf457eb9162b943ddbaf0"