fix(core): do not trigger CSP alert/report in Firefox and Chrome

goldens/size-tracking/aio-payloads.json

@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 451406,
+        "main-es2015": 450883,
         "polyfills-es2015": 52630
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 429710,
+        "main-es2015": 429200,
         "polyfills-es2015": 52195
       }
     }

goldens/size-tracking/integration-payloads.json

@@ -30,7 +30,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 136302,
+        "main-es2015": 135533,
         "polyfills-es2015": 37248
       }
     }
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 246085,
+        "main-es2015": 245488,
         "polyfills-es2015": 36938,
         "5-es2015": 751
       }

packages/core/src/render3/i18n.ts

@@ -9,7 +9,7 @@ import '../util/ng_i18n_closure_mode';
 
 import {DEFAULT_LOCALE_ID, getPluralCase} from '../i18n/localization';
 import {getTemplateContent, SRCSET_ATTRS, URI_ATTRS, VALID_ATTRS, VALID_ELEMENTS} from '../sanitization/html_sanitizer';
-import {InertBodyHelper} from '../sanitization/inert_body';
+import {getInertBodyHelper} from '../sanitization/inert_body';
 import {_sanitizeUrl, sanitizeSrcset} from '../sanitization/url_sanitizer';
 import {addAllToArray} from '../util/array_utils';
 import {assertDataInRange, assertDefined, assertEqual} from '../util/assert';
@@ -1233,7 +1233,7 @@ function icuStart(
 function parseIcuCase(
     unsafeHtml: string, parentIndex: number, nestedIcus: IcuExpression[], tIcus: TIcu[],
     expandoStartIndex: number): IcuCase {
-  const inertBodyHelper = new InertBodyHelper(getDocument());
+  const inertBodyHelper = getInertBodyHelper(getDocument());
   const inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);
   if (!inertBodyElement) {
     throw new Error('Unable to generate inert body element');

packages/core/src/sanitization/html_sanitizer.ts

@@ -7,7 +7,7 @@
  */
 
 import {isDevMode} from '../util/is_dev_mode';
-import {InertBodyHelper} from './inert_body';
+import {getInertBodyHelper, InertBodyHelper} from './inert_body';
 import {_sanitizeUrl, sanitizeSrcset} from './url_sanitizer';
 
 function tagSet(tags: string): {[k: string]: boolean} {
@@ -245,7 +245,7 @@ let inertBodyHelper: InertBodyHelper;
 export function _sanitizeHtml(defaultDoc: any, unsafeHtmlInput: string): string {
   let inertBodyElement: HTMLElement|null = null;
   try {
-    inertBodyHelper = inertBodyHelper || new InertBodyHelper(defaultDoc);
+    inertBodyHelper = inertBodyHelper || getInertBodyHelper(defaultDoc);
     // Make sure unsafeHtml is actually a string (TypeScript types are not enforced at runtime).
     let unsafeHtml = unsafeHtmlInput ? String(unsafeHtmlInput) : '';
     inertBodyElement = inertBodyHelper.getInertBodyElement(unsafeHtml);

packages/core/src/sanitization/inert_body.ts

@@ -7,89 +7,29 @@
  */
 
 /**
- * This helper class is used to get hold of an inert tree of DOM elements containing dirty HTML
+ * This helper is used to get hold of an inert tree of DOM elements containing dirty HTML
  * that needs sanitizing.
- * Depending upon browser support we must use one of three strategies for doing this.
- * Support: Safari 10.x -> XHR strategy
- * Support: Firefox -> DomParser strategy
- * Default: InertDocument strategy
+ * Depending upon browser support we use one of two strategies for doing this.
+ * Default: DOMParser strategy
+ * Fallback: InertDocument strategy
  */
-export class InertBodyHelper {
-  private inertDocument: Document;
-
-  constructor(private defaultDoc: Document) {
-    this.inertDocument = this.defaultDoc.implementation.createHTMLDocument('sanitization-inert');
-    let inertBodyElement = this.inertDocument.body;
-
-    if (inertBodyElement == null) {
-      // usually there should be only one body element in the document, but IE doesn't have any, so
-      // we need to create one.
-      const inertHtml = this.inertDocument.createElement('html');
-      this.inertDocument.appendChild(inertHtml);
-      inertBodyElement = this.inertDocument.createElement('body');
-      inertHtml.appendChild(inertBodyElement);
-    }
-
-    inertBodyElement.innerHTML = '<svg><g onload="this.parentNode.remove()"></g></svg>';
-    if (inertBodyElement.querySelector && !inertBodyElement.querySelector('svg')) {
-      // We just hit the Safari 10.1 bug - which allows JS to run inside the SVG G element
-      // so use the XHR strategy.
-      this.getInertBodyElement = this.getInertBodyElement_XHR;
-      return;
-    }
-
-    inertBodyElement.innerHTML = '<svg><p><style><img src="</style><img src=x onerror=alert(1)//">';
-    if (inertBodyElement.querySelector && inertBodyElement.querySelector('svg img')) {
-      // We just hit the Firefox bug - which prevents the inner img JS from being sanitized
-      // so use the DOMParser strategy, if it is available.
-      // If the DOMParser is not available then we are not in Firefox (Server/WebWorker?) so we
-      // fall through to the default strategy below.
-      if (isDOMParserAvailable()) {
-        this.getInertBodyElement = this.getInertBodyElement_DOMParser;
-        return;
-      }
-    }
-
-    // None of the bugs were hit so it is safe for us to use the default InertDocument strategy
-    this.getInertBodyElement = this.getInertBodyElement_InertDocument;
-  }
+export function getInertBodyHelper(defaultDoc: Document): InertBodyHelper {
+  return isDOMParserAvailable() ? new DOMParserHelper() : new InertDocumentHelper(defaultDoc);
+}
 
+export interface InertBodyHelper {
   /**
    * Get an inert DOM element containing DOM created from the dirty HTML string provided.
-   * The implementation of this is determined in the constructor, when the class is instantiated.
    */
   getInertBodyElement: (html: string) => HTMLElement | null;
+}
 
-  /**
-   * Use XHR to create and fill an inert body element (on Safari 10.1)
-   * See
-   * https://github.com/cure53/DOMPurify/blob/a992d3a75031cb8bb032e5ea8399ba972bdf9a65/src/purify.js#L439-L449
-   */
-  private getInertBodyElement_XHR(html: string) {
-    // We add these extra elements to ensure that the rest of the content is parsed as expected
-    // e.g. leading whitespace is maintained and tags like `<meta>` do not get hoisted to the
-    // `<head>` tag.
-    html = '<body><remove></remove>' + html + '</body>';
-    try {
-      html = encodeURI(html);
-    } catch {
-      return null;
-    }
-    const xhr = new XMLHttpRequest();
-    xhr.responseType = 'document';
-    xhr.open('GET', 'data:text/html;charset=utf-8,' + html, false);
-    xhr.send(undefined);
-    const body: HTMLBodyElement = xhr.response.body;
-    body.removeChild(body.firstChild!);
-    return body;
-  }
-
-  /**
-   * Use DOMParser to create and fill an inert body element (on Firefox)
-   * See https://github.com/cure53/DOMPurify/releases/tag/0.6.7
-   *
-   */
-  private getInertBodyElement_DOMParser(html: string) {
+/**
+ * Uses DOMParser to create and fill an inert body element.
+ * This is the default strategy used in browsers that support it.
+ */
+class DOMParserHelper implements InertBodyHelper {
+  getInertBodyElement(html: string): HTMLElement|null {
     // We add these extra elements to ensure that the rest of the content is parsed as expected
     // e.g. leading whitespace is maintained and tags like `<meta>` do not get hoisted to the
     // `<head>` tag.
@@ -103,14 +43,30 @@ export class InertBodyHelper {
       return null;
     }
   }
+}
 
-  /**
-   * Use an HTML5 `template` element, if supported, or an inert body element created via
-   * `createHtmlDocument` to create and fill an inert DOM element.
-   * This is the default sane strategy to use if the browser does not require one of the specialised
-   * strategies above.
-   */
-  private getInertBodyElement_InertDocument(html: string) {
+/**
+ * Use an HTML5 `template` element, if supported, or an inert body element created via
+ * `createHtmlDocument` to create and fill an inert DOM element.
+ * This is the fallback strategy if the browser does not support DOMParser.
+ */
+class InertDocumentHelper implements InertBodyHelper {
+  private inertDocument: Document;
+
+  constructor(private defaultDoc: Document) {
+    this.inertDocument = this.defaultDoc.implementation.createHTMLDocument('sanitization-inert');
+
+    if (this.inertDocument.body == null) {
+      // usually there should be only one body element in the document, but IE doesn't have any, so
+      // we need to create one.
+      const inertHtml = this.inertDocument.createElement('html');
+      this.inertDocument.appendChild(inertHtml);
+      const inertBodyElement = this.inertDocument.createElement('body');
+      inertHtml.appendChild(inertBodyElement);
+    }
+  }
+
+  getInertBodyElement(html: string): HTMLElement|null {
     // Prefer using <template> element if supported.
     const templateEl = this.inertDocument.createElement('template');
     if ('content' in templateEl) {
@@ -164,15 +120,15 @@ export class InertBodyHelper {
 }
 
 /**
- * We need to determine whether the DOMParser exists in the global context.
- * The try-catch is because, on some browsers, trying to access this property
- * on window can actually throw an error.
+ * We need to determine whether the DOMParser exists in the global context and
+ * supports parsing HTML; HTML parsing support is not as wide as other formats, see
+ * https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility.
  *
  * @suppress {uselessCode}
  */
-function isDOMParserAvailable() {
+export function isDOMParserAvailable() {
   try {
-    return !!(window as any).DOMParser;
+    return !!new (window as any).DOMParser().parseFromString('', 'text/html');
   } catch {
     return false;
   }

packages/core/test/sanitization/html_sanitizer_spec.ts

@@ -9,6 +9,7 @@
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
 import {_sanitizeHtml} from '../../src/sanitization/html_sanitizer';
+import {isDOMParserAvailable} from '../../src/sanitization/inert_body';
 
 {
   describe('HTML sanitizer', () => {
@@ -229,18 +230,3 @@ import {_sanitizeHtml} from '../../src/sanitization/html_sanitizer';
     }
   });
 }
-
-/**
- * We need to determine whether the DOMParser exists in the global context.
- * The try-catch is because, on some browsers, trying to access this property
- * on window can actually throw an error.
- *
- * @suppress {uselessCode}
- */
-function isDOMParserAvailable() {
-  try {
-    return !!(window as any).DOMParser;
-  } catch (e) {
-    return false;
-  }
-}