From f54c1e08e4b473c7fcf0d4cbee7fa8cb9be028f3 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Tue, 16 Jul 2019 16:20:54 +0200
Subject: [PATCH 01/11] Add trusted types to react on client side

---
 .../src/client/DOMPropertyOperations.js       |  9 +-
 .../react-dom/src/client/ReactDOMComponent.js | 16 ++--
 .../react-dom/src/client/ToStringValue.js     |  3 +-
 .../src/client/__tests__/trustedTypes-test.js | 85 +++++++++++++++++++
 packages/react-dom/src/client/setInnerHTML.js | 13 ++-
 .../src/shared/trustedTypesAwareToString.js   | 42 +++++++++
 6 files changed, 153 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-dom/src/client/__tests__/trustedTypes-test.js
 create mode 100644 packages/react-dom/src/shared/trustedTypesAwareToString.js

diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 6a2d0f7d244a6..aef9630c9adad 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -16,6 +16,7 @@ import {
   OVERLOADED_BOOLEAN,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
+import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
@@ -142,7 +143,7 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
-        node.setAttribute(attributeName, '' + (value: any));
+        node.setAttribute(attributeName, trustedTypesAwareToString(value));
       }
     }
     return;
@@ -168,13 +169,15 @@ export function setValueForProperty(
     const {type} = propertyInfo;
     let attributeValue;
     if (type === BOOLEAN || (type === OVERLOADED_BOOLEAN && value === true)) {
+      // If attribute type is boolean, we know for sure it won't be an execution sink
+      // and we won't require Trusted Type here.
       attributeValue = '';
     } else {
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
-      attributeValue = '' + (value: any);
+      attributeValue = trustedTypesAwareToString(value);
       if (propertyInfo.sanitizeURL) {
-        sanitizeURL(attributeValue);
+        sanitizeURL('' + attributeValue);
       }
     }
     if (attributeNamespace) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index af580be510bee..3c1918173d324 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -85,6 +85,7 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
 
 import {enableFlareAPI} from 'shared/ReactFeatureFlags';
 
@@ -416,15 +417,7 @@ export function createElement(
       );
     }
 
-    if (type === 'script') {
-      // Create the script via .innerHTML so its "parser-inserted" flag is
-      // set to true and it does not execute
-      const div = ownerDocument.createElement('div');
-      div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
-      // This is guaranteed to yield a script element.
-      const firstChild = ((div.firstChild: any): HTMLScriptElement);
-      domElement = div.removeChild(firstChild);
-    } else if (typeof props.is === 'string') {
+    if (typeof props.is === 'string') {
       // $FlowIssue `createElement` should be updated for Web Components
       domElement = ownerDocument.createElement(type, {is: props.is});
     } else {
@@ -773,7 +766,10 @@ export function diffProperties(
       const lastHtml = lastProp ? lastProp[HTML] : undefined;
       if (nextHtml != null) {
         if (lastHtml !== nextHtml) {
-          (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);
+          (updatePayload = updatePayload || []).push(
+            propKey,
+            trustedTypesAwareToString(nextHtml),
+          );
         }
       } else {
         // TODO: It might be too late to clear this if we have children
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 41826cd404e05..65a28107f9760 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -6,6 +6,7 @@
  *
  * @flow
  */
+import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
 
 export opaque type ToStringValue =
   | boolean
@@ -19,7 +20,7 @@ export opaque type ToStringValue =
 // around this limitation, we use an opaque type that can only be obtained by
 // passing the value through getToStringValue first.
 export function toString(value: ToStringValue): string {
-  return '' + (value: any);
+  return trustedTypesAwareToString(value);
 }
 
 export function getToStringValue(value: mixed): ToStringValue {
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
new file mode 100644
index 0000000000000..65455b15e4c3a
--- /dev/null
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
@@ -0,0 +1,85 @@
+describe('when Trusted Types are available in global object', () => {
+  let React;
+  let ReactDOM;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOM = require('react-dom');
+    window.TrustedTypes = {
+      isHTML: () => true,
+      isScript: () => false,
+      isScriptURL: () => false,
+      isURL: () => false,
+    };
+  });
+
+  it('should not stringify trusted values', () => {
+    const container = document.createElement('div');
+    const trustedObject = {toString: () => 'I look like a trusted object'};
+    class Component extends React.Component {
+      state = {inner: undefined};
+      render() {
+        return <div dangerouslySetInnerHTML={{__html: this.state.inner}} />;
+      }
+    }
+
+    const isHTMLSpy = jest.spyOn(window.TrustedTypes, ['isHTML']);
+    const instace = ReactDOM.render(<Component />, container);
+    instace.setState({inner: trustedObject});
+
+    expect(container.firstChild.innerHTML).toBe(trustedObject.toString());
+    expect(isHTMLSpy).toHaveBeenCalledWith(trustedObject);
+  });
+
+  describe('dangerouslySetInnerHTML in svg elements in Internet Explorer', () => {
+    let innerHTMLDescriptor;
+
+    // simulate svg elements in Internet Explorer which don't have 'innerHTML' property
+    beforeEach(() => {
+      innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+        Element.prototype,
+        'innerHTML',
+      );
+      delete Element.prototype.innerHTML;
+      Object.defineProperty(
+        HTMLDivElement.prototype,
+        'innerHTML',
+        innerHTMLDescriptor,
+      );
+    });
+
+    afterEach(() => {
+      delete HTMLDivElement.prototype.innerHTML;
+      Object.defineProperty(
+        Element.prototype,
+        'innerHTML',
+        innerHTMLDescriptor,
+      );
+    });
+
+    it('should log a warning', () => {
+      class Component extends React.Component {
+        state = {inner: undefined};
+        render() {
+          return <svg dangerouslySetInnerHTML={{__html: this.state.inner}} />;
+        }
+      }
+      const errorSpy = spyOnDev(console, 'error');
+
+      const container = document.createElement('div');
+      const instace = ReactDOM.render(<Component />, container);
+      instace.setState({inner: 'anyValue'});
+
+      if (__DEV__) {
+        expect(errorSpy).toHaveBeenCalledWith(
+          "Warning: Using 'dangerouslySetInnerHTML' in an svg element with " +
+            'Trusted Types enabled in an Internet Explorer will cause ' +
+            'the trusted value to be converted to string. Assigning string ' +
+            "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
+            "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
+            'on the enclosing div instead.',
+        );
+      }
+    });
+  });
+});
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 0c328b17e0b2f..b248badddd03b 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -9,6 +9,7 @@
 
 import {Namespaces} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
+import warningWithoutStack from 'shared/warningWithoutStack';
 
 // SVG temp container for IE lacking innerHTML
 let reusableSVGContainer;
@@ -27,10 +28,20 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   // IE does not have innerHTML for SVG nodes, so instead we inject the
   // new markup in a temp node and then move the child nodes across into
   // the target node
-
   if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {
     reusableSVGContainer =
       reusableSVGContainer || document.createElement('div');
+    if (__DEV__) {
+      warningWithoutStack(
+        typeof window.TrustedTypes === 'undefined',
+        "Using 'dangerouslySetInnerHTML' in an svg element with " +
+          'Trusted Types enabled in an Internet Explorer will cause ' +
+          'the trusted value to be converted to string. Assigning string ' +
+          "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
+          "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
+          'on the enclosing div instead.',
+      );
+    }
     reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
     const svgNode = reusableSVGContainer.firstChild;
     while (node.firstChild) {
diff --git a/packages/react-dom/src/shared/trustedTypesAwareToString.js b/packages/react-dom/src/shared/trustedTypesAwareToString.js
new file mode 100644
index 0000000000000..261aca836d4ce
--- /dev/null
+++ b/packages/react-dom/src/shared/trustedTypesAwareToString.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Returns true only if Trusted Types are available in global object and the value
+ * is a trusted type.
+ */
+function isTrustedTypesValue(value: any) {
+  if (typeof window.TrustedTypes === 'undefined') {
+    return false;
+  } else {
+    return (
+      window.TrustedTypes.isHTML(value) ||
+      window.TrustedTypes.isScript(value) ||
+      window.TrustedTypes.isScriptURL(value) ||
+      window.TrustedTypes.isURL(value)
+    );
+  }
+}
+
+/**
+ * We allow passing objects with toString method as element attributes or in dangerouslySetInnerHTML
+ * and we do validations that the value is safe. Once we do validation we want to use the validated
+ * value instead of the object (because object.toString may return something else on next call).
+ *
+ * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
+ */
+function trustedTypesAwareToString(value: any) {
+  if (isTrustedTypesValue(value)) {
+    return value;
+  } else {
+    return '' + value;
+  }
+}
+
+export default trustedTypesAwareToString;

From f9e83d25b02d1010e2add7bcd3a57bf09d9f1e17 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Mon, 29 Jul 2019 11:52:57 +0200
Subject: [PATCH 02/11] Implement changes according to review

---
 .eslintrc.js                                  |  1 +
 .../src/__tests__/ReactEmptyComponent-test.js | 10 +++++
 .../src/client/DOMPropertyOperations.js       | 11 ++---
 .../react-dom/src/client/ReactDOMComponent.js | 22 ++++++++--
 .../react-dom/src/client/ToStringValue.js     | 40 +++++++++++++++++-
 packages/react-dom/src/client/setAttribute.js | 35 ++++++++++++++++
 packages/react-dom/src/client/setInnerHTML.js | 30 +++++++------
 .../src/shared/trustedTypesAwareToString.js   | 42 -------------------
 scripts/rollup/validate/eslintrc.cjs.js       |  2 +
 scripts/rollup/validate/eslintrc.fb.js        |  2 +
 scripts/rollup/validate/eslintrc.rn.js        |  2 +
 scripts/rollup/validate/eslintrc.umd.js       |  2 +
 12 files changed, 134 insertions(+), 65 deletions(-)
 create mode 100644 packages/react-dom/src/client/setAttribute.js
 delete mode 100644 packages/react-dom/src/shared/trustedTypesAwareToString.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 1c48ea5330a3d..14177e1ddcfed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -140,5 +140,6 @@ module.exports = {
     spyOnProd: true,
     __PROFILE__: true,
     __UMD__: true,
+    TrustedTypes: true,
   },
 };
diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
index 10e95f7cf7ba0..1ed4f64c99f10 100644
--- a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -136,6 +136,8 @@ describe('ReactEmptyComponent', () => {
   });
 
   it('should distinguish between a script placeholder and an actual script tag', () => {
+    const consoleSpy = spyOnDev(console, 'error');
+
     const instance1 = (
       <TogglingComponent firstComponent={null} secondComponent={'script'} />
     );
@@ -161,6 +163,14 @@ describe('ReactEmptyComponent', () => {
       expect.objectContaining({tagName: 'SCRIPT'}),
     );
     expect(log).toHaveBeenNthCalledWith(4, null);
+    if (__DEV__) {
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Warning: Encountered script tag while rendering React component. ' +
+          'Scripts inside React components are parser inserted into document ' +
+          'and they are never executed. Furthemore rendering script nodes ' +
+          'inside components breaks when using Trusted Types.',
+      );
+    }
   });
 
   it(
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index aef9630c9adad..93317598b97f2 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -16,8 +16,9 @@ import {
   OVERLOADED_BOOLEAN,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
+import {trustedTypesAwareToString} from './ToStringValue';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
+import {setAttribute, setAttributeNS} from './setAttribute';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -143,7 +144,7 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
-        node.setAttribute(attributeName, trustedTypesAwareToString(value));
+        setAttribute(node, attributeName, trustedTypesAwareToString(value));
       }
     }
     return;
@@ -177,13 +178,13 @@ export function setValueForProperty(
       // ('' + value) makes it output the correct toString()-value.
       attributeValue = trustedTypesAwareToString(value);
       if (propertyInfo.sanitizeURL) {
-        sanitizeURL('' + attributeValue);
+        sanitizeURL('' + attributeValue.toString());
       }
     }
     if (attributeNamespace) {
-      node.setAttributeNS(attributeNamespace, attributeName, attributeValue);
+      setAttributeNS(node, attributeNamespace, attributeName, attributeValue);
     } else {
-      node.setAttribute(attributeName, attributeValue);
+      setAttribute(node, attributeName, attributeValue);
     }
   }
 }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 3c1918173d324..f157d36da0bb6 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -85,7 +85,7 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
+import {trustedTypesAwareToString} from './ToStringValue';
 
 import {enableFlareAPI} from 'shared/ReactFeatureFlags';
 
@@ -416,8 +416,24 @@ export function createElement(
         type,
       );
     }
-
-    if (typeof props.is === 'string') {
+    if (type === 'script') {
+      // Create the script via .innerHTML so its "parser-inserted" flag is
+      // set to true and it does not execute
+      const div = ownerDocument.createElement('div');
+      if (__DEV__) {
+        warningWithoutStack(
+          false,
+          'Encountered script tag while rendering React component. ' +
+            'Scripts inside React components are parser inserted into document ' +
+            'and they are never executed. Furthemore rendering script nodes ' +
+            'inside components breaks when using Trusted Types.',
+        );
+      }
+      div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
+      // This is guaranteed to yield a script element.
+      const firstChild = ((div.firstChild: any): HTMLScriptElement);
+      domElement = div.removeChild(firstChild);
+    } else if (typeof props.is === 'string') {
       // $FlowIssue `createElement` should be updated for Web Components
       domElement = ownerDocument.createElement(type, {is: props.is});
     } else {
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 65a28107f9760..525c22c6066f8 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -6,7 +6,6 @@
  *
  * @flow
  */
-import trustedTypesAwareToString from '../shared/trustedTypesAwareToString';
 
 export opaque type ToStringValue =
   | boolean
@@ -20,7 +19,7 @@ export opaque type ToStringValue =
 // around this limitation, we use an opaque type that can only be obtained by
 // passing the value through getToStringValue first.
 export function toString(value: ToStringValue): string {
-  return trustedTypesAwareToString(value);
+  return '' + (value: any);
 }
 
 export function getToStringValue(value: mixed): ToStringValue {
@@ -36,3 +35,40 @@ export function getToStringValue(value: mixed): ToStringValue {
       return '';
   }
 }
+
+/**
+ * Returns true only if Trusted Types are available in global object and the value
+ * is a trusted type.
+ */
+function isTrustedTypesValue(value: any): boolean {
+  // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
+  if (typeof TrustedTypes === 'undefined') {
+    return false;
+  } else {
+    return (
+      TrustedTypes.isHTML(value) ||
+      TrustedTypes.isScript(value) ||
+      TrustedTypes.isScriptURL(value) ||
+      TrustedTypes.isURL(value)
+    );
+  }
+}
+
+/** Trusted value is a wrapper for "safe" values which can be assigned to DOM execution sinks. */
+export opaque type TrustedValue: {toString(): string} = {toString(): string};
+
+/**
+ * We allow passing objects with toString method as element attributes or in dangerouslySetInnerHTML
+ * and we do validations that the value is safe. Once we do validation we want to use the validated
+ * value instead of the object (because object.toString may return something else on next call).
+ *
+ * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
+ */
+export function trustedTypesAwareToString(value: any): string | TrustedValue {
+  // fast-path string values as it's most frequent usage of the function
+  if (typeof value !== 'string' && isTrustedTypesValue(value)) {
+    return value;
+  } else {
+    return '' + value;
+  }
+}
diff --git a/packages/react-dom/src/client/setAttribute.js b/packages/react-dom/src/client/setAttribute.js
new file mode 100644
index 0000000000000..8b9b0bd42a656
--- /dev/null
+++ b/packages/react-dom/src/client/setAttribute.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {TrustedValue} from './ToStringValue';
+
+/**
+ * Set attribute for a node. The attribute value can be either string or
+ * Trusted value (if application uses Trusted Types).
+ */
+export function setAttribute(
+  node: Element,
+  attributeName: string,
+  attributeValue: string | TrustedValue,
+) {
+  node.setAttribute(attributeName, (attributeValue: any));
+}
+
+/**
+ * Set attribute with namespace for a node. The attribute value can be either string or
+ * Trusted value (if application uses Trusted Types).
+ */
+export function setAttributeNS(
+  node: Element,
+  attributeNamespace: string,
+  attributeName: string,
+  attributeValue: string | TrustedValue,
+) {
+  node.setAttributeNS(attributeNamespace, attributeName, (attributeValue: any));
+}
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index b248badddd03b..476a7d9dc14c1 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -10,6 +10,7 @@
 import {Namespaces} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
 import warningWithoutStack from 'shared/warningWithoutStack';
+import type {TrustedValue} from './ToStringValue';
 
 // SVG temp container for IE lacking innerHTML
 let reusableSVGContainer;
@@ -23,17 +24,16 @@ let reusableSVGContainer;
  */
 const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   node: Element,
-  html: string,
+  html: string | TrustedValue,
 ): void {
   // IE does not have innerHTML for SVG nodes, so instead we inject the
   // new markup in a temp node and then move the child nodes across into
   // the target node
-  if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {
-    reusableSVGContainer =
-      reusableSVGContainer || document.createElement('div');
+  if (node.namespaceURI === Namespaces.svg) {
     if (__DEV__) {
       warningWithoutStack(
-        typeof window.TrustedTypes === 'undefined',
+        // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
+        typeof TrustedTypes === 'undefined',
         "Using 'dangerouslySetInnerHTML' in an svg element with " +
           'Trusted Types enabled in an Internet Explorer will cause ' +
           'the trusted value to be converted to string. Assigning string ' +
@@ -42,16 +42,20 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
           'on the enclosing div instead.',
       );
     }
-    reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
-    const svgNode = reusableSVGContainer.firstChild;
-    while (node.firstChild) {
-      node.removeChild(node.firstChild);
-    }
-    while (svgNode.firstChild) {
-      node.appendChild(svgNode.firstChild);
+    if (!('innerHTML' in node)) {
+      reusableSVGContainer =
+        reusableSVGContainer || document.createElement('div');
+      reusableSVGContainer.innerHTML = '<svg>' + html.toString() + '</svg>';
+      const svgNode = reusableSVGContainer.firstChild;
+      while (node.firstChild) {
+        node.removeChild(node.firstChild);
+      }
+      while (svgNode.firstChild) {
+        node.appendChild(svgNode.firstChild);
+      }
     }
   } else {
-    node.innerHTML = html;
+    node.innerHTML = (html: any);
   }
 });
 
diff --git a/packages/react-dom/src/shared/trustedTypesAwareToString.js b/packages/react-dom/src/shared/trustedTypesAwareToString.js
deleted file mode 100644
index 261aca836d4ce..0000000000000
--- a/packages/react-dom/src/shared/trustedTypesAwareToString.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-/**
- * Returns true only if Trusted Types are available in global object and the value
- * is a trusted type.
- */
-function isTrustedTypesValue(value: any) {
-  if (typeof window.TrustedTypes === 'undefined') {
-    return false;
-  } else {
-    return (
-      window.TrustedTypes.isHTML(value) ||
-      window.TrustedTypes.isScript(value) ||
-      window.TrustedTypes.isScriptURL(value) ||
-      window.TrustedTypes.isURL(value)
-    );
-  }
-}
-
-/**
- * We allow passing objects with toString method as element attributes or in dangerouslySetInnerHTML
- * and we do validations that the value is safe. Once we do validation we want to use the validated
- * value instead of the object (because object.toString may return something else on next call).
- *
- * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
- */
-function trustedTypesAwareToString(value: any) {
-  if (isTrustedTypesValue(value)) {
-    return value;
-  } else {
-    return '' + value;
-  }
-}
-
-export default trustedTypesAwareToString;
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index ff6cf584e4e4b..ef784e43bf8f3 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -21,6 +21,8 @@ module.exports = {
     process: true,
     setImmediate: true,
     Buffer: true,
+    // Trusted Types
+    TrustedTypes: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index d48c9caa9315b..dd6c415de5165 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -22,6 +22,8 @@ module.exports = {
     // Node.js Server Rendering
     setImmediate: true,
     Buffer: true,
+    // Trusted Types
+    TrustedTypes: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 8fb7666aa13de..63a1c02c00a98 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -21,6 +21,8 @@ module.exports = {
     // Fabric. See https://github.com/facebook/react/pull/15490
     // for more information
     nativeFabricUIManager: true,
+    // Trusted Types
+    TrustedTypes: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 59fb02e93e1e8..5813ab039b8e9 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -24,6 +24,8 @@ module.exports = {
     define: true,
     require: true,
     global: true,
+    // Trusted Types
+    TrustedTypes: true,
   },
   parserOptions: {
     ecmaVersion: 5,

From c338e627a0bd1a567295c6047d26713ec67e9ec2 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Fri, 23 Aug 2019 19:06:46 +0200
Subject: [PATCH 03/11] Remove support for trusted URLs, change TrustedTypes to
 trustedTypes

---
 .eslintrc.js                                  |  1 +
 .../react-dom/src/client/ToStringValue.js     | 22 +++++++++++++------
 .../src/client/__tests__/trustedTypes-test.js |  9 +++++---
 packages/react-dom/src/client/setInnerHTML.js |  6 ++++-
 scripts/rollup/validate/eslintrc.cjs.js       |  1 +
 scripts/rollup/validate/eslintrc.fb.js        |  1 +
 scripts/rollup/validate/eslintrc.rn.js        |  1 +
 scripts/rollup/validate/eslintrc.umd.js       |  1 +
 8 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5ca2a89b648cd..6e35f520b5e94 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -150,5 +150,6 @@ module.exports = {
     __PROFILE__: true,
     __UMD__: true,
     TrustedTypes: true,
+    trustedTypes: true,
   },
 };
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 525c22c6066f8..f8ecadb7a00f4 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -37,20 +37,28 @@ export function getToStringValue(value: mixed): ToStringValue {
 }
 
 /**
- * Returns true only if Trusted Types are available in global object and the value
- * is a trusted type.
+ * Returns true only if Trusted Types are available in global object and the value is a trusted type.
+ *
+ * Trusted Types undergo a change where window.TrustedTypes was renamed to window.trustedTypes
+ * (https://github.com/WICG/trusted-types/pull/205).
  */
 function isTrustedTypesValue(value: any): boolean {
   // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
-  if (typeof TrustedTypes === 'undefined') {
-    return false;
-  } else {
+  if (typeof TrustedTypes !== 'undefined') {
     return (
       TrustedTypes.isHTML(value) ||
       TrustedTypes.isScript(value) ||
-      TrustedTypes.isScriptURL(value) ||
-      TrustedTypes.isURL(value)
+      TrustedTypes.isScriptURL(value)
     );
+    // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
+  } else if (typeof trustedTypes !== 'undefined') {
+    return (
+      trustedTypes.isHTML(value) ||
+      trustedTypes.isScript(value) ||
+      trustedTypes.isScriptURL(value)
+    );
+  } else {
+    return false;
   }
 }
 
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
index 65455b15e4c3a..8465ded736035 100644
--- a/packages/react-dom/src/client/__tests__/trustedTypes-test.js
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
@@ -5,14 +5,17 @@ describe('when Trusted Types are available in global object', () => {
   beforeEach(() => {
     React = require('react');
     ReactDOM = require('react-dom');
-    window.TrustedTypes = {
+    window.trustedTypes = {
       isHTML: () => true,
       isScript: () => false,
       isScriptURL: () => false,
-      isURL: () => false,
     };
   });
 
+  afterEach(() => {
+    delete window.trustedTypes;
+  });
+
   it('should not stringify trusted values', () => {
     const container = document.createElement('div');
     const trustedObject = {toString: () => 'I look like a trusted object'};
@@ -23,7 +26,7 @@ describe('when Trusted Types are available in global object', () => {
       }
     }
 
-    const isHTMLSpy = jest.spyOn(window.TrustedTypes, ['isHTML']);
+    const isHTMLSpy = jest.spyOn(window.trustedTypes, ['isHTML']);
     const instace = ReactDOM.render(<Component />, container);
     instace.setState({inner: trustedObject});
 
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 476a7d9dc14c1..7cc699003a9a0 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -32,8 +32,12 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   if (node.namespaceURI === Namespaces.svg) {
     if (__DEV__) {
       warningWithoutStack(
+        // Trusted Types undergo a change where window.TrustedTypes was renamed to window.trustedTypes
+        // (https://github.com/WICG/trusted-types/pull/205).
         // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
-        typeof TrustedTypes === 'undefined',
+        typeof TrustedTypes === 'undefined' &&
+          // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
+          typeof trustedTypes === 'undefined',
         "Using 'dangerouslySetInnerHTML' in an svg element with " +
           'Trusted Types enabled in an Internet Explorer will cause ' +
           'the trusted value to be converted to string. Assigning string ' +
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 5b9452c95b75b..b71c7fcde44c4 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -23,6 +23,7 @@ module.exports = {
     Buffer: true,
     // Trusted Types
     TrustedTypes: true,
+    trustedTypes: true,
 
     // Scheduler profiling
     SharedArrayBuffer: true,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 3e393f03a61f1..9c795e99f28da 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -24,6 +24,7 @@ module.exports = {
     Buffer: true,
     // Trusted Types
     TrustedTypes: true,
+    trustedTypes: true,
 
     // Scheduler profiling
     SharedArrayBuffer: true,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 26206b8b5782a..565163130743e 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -23,6 +23,7 @@ module.exports = {
     nativeFabricUIManager: true,
     // Trusted Types
     TrustedTypes: true,
+    trustedTypes: true,
 
     // Scheduler profiling
     SharedArrayBuffer: true,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index e6f563c9434e7..ae94b87e5b1fc 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -26,6 +26,7 @@ module.exports = {
     global: true,
     // Trusted Types
     TrustedTypes: true,
+    trustedTypes: true,
 
     // Scheduler profiling
     SharedArrayBuffer: true,

From 1bfb1ebc09952517bad9da5cc59aae75abbca1a9 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Fri, 30 Aug 2019 10:39:17 +0200
Subject: [PATCH 04/11] Add support for deprecated trusted URLs

---
 packages/react-dom/src/client/ToStringValue.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index f8ecadb7a00f4..ce100f1c1205e 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -48,14 +48,18 @@ function isTrustedTypesValue(value: any): boolean {
     return (
       TrustedTypes.isHTML(value) ||
       TrustedTypes.isScript(value) ||
-      TrustedTypes.isScriptURL(value)
+      TrustedTypes.isScriptURL(value) ||
+      // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
+      (TrustedTypes.isURL && TrustedTypes.isURL(value))
     );
     // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
   } else if (typeof trustedTypes !== 'undefined') {
     return (
       trustedTypes.isHTML(value) ||
       trustedTypes.isScript(value) ||
-      trustedTypes.isScriptURL(value)
+      trustedTypes.isScriptURL(value) ||
+      // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
+      (trustedTypes.isURL && trustedTypes.isURL(value))
     );
   } else {
     return false;

From 9b1ec8c8f9fa552e7b1707cb16081aa29dd5de4b Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Tue, 3 Sep 2019 15:30:05 +0200
Subject: [PATCH 05/11] Apply PR suggesstions

---
 .eslintrc.js                                  |  1 -
 .../src/__tests__/ReactEmptyComponent-test.js | 26 +++++++------
 .../src/client/DOMPropertyOperations.js       |  6 +--
 .../react-dom/src/client/ReactDOMComponent.js |  4 +-
 .../react-dom/src/client/ToStringValue.js     | 38 ++++++-------------
 .../src/client/__tests__/trustedTypes-test.js |  4 +-
 scripts/rollup/validate/eslintrc.cjs.js       |  1 -
 scripts/rollup/validate/eslintrc.fb.js        |  1 -
 scripts/rollup/validate/eslintrc.rn.js        |  1 -
 scripts/rollup/validate/eslintrc.umd.js       |  1 -
 10 files changed, 33 insertions(+), 50 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6e35f520b5e94..603f20a3cacba 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -149,7 +149,6 @@ module.exports = {
     spyOnProd: true,
     __PROFILE__: true,
     __UMD__: true,
-    TrustedTypes: true,
     trustedTypes: true,
   },
 };
diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
index 1ed4f64c99f10..157235312a00d 100644
--- a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -136,8 +136,6 @@ describe('ReactEmptyComponent', () => {
   });
 
   it('should distinguish between a script placeholder and an actual script tag', () => {
-    const consoleSpy = spyOnDev(console, 'error');
-
     const instance1 = (
       <TogglingComponent firstComponent={null} secondComponent={'script'} />
     );
@@ -147,10 +145,22 @@ describe('ReactEmptyComponent', () => {
 
     expect(function() {
       ReactTestUtils.renderIntoDocument(instance1);
-    }).not.toThrow();
+    }).toWarnDev(
+      'Warning: Encountered script tag while rendering React component. ' +
+        'Scripts inside React components are parser inserted into document ' +
+        'and they are never executed. Furthemore rendering script nodes ' +
+        'inside components breaks when using Trusted Types.',
+      {withoutStack: true},
+    );
     expect(function() {
       ReactTestUtils.renderIntoDocument(instance2);
-    }).not.toThrow();
+    }).toWarnDev(
+      'Warning: Encountered script tag while rendering React component. ' +
+        'Scripts inside React components are parser inserted into document ' +
+        'and they are never executed. Furthemore rendering script nodes ' +
+        'inside components breaks when using Trusted Types.',
+      {withoutStack: true},
+    );
 
     expect(log).toHaveBeenCalledTimes(4);
     expect(log).toHaveBeenNthCalledWith(1, null);
@@ -163,14 +173,6 @@ describe('ReactEmptyComponent', () => {
       expect.objectContaining({tagName: 'SCRIPT'}),
     );
     expect(log).toHaveBeenNthCalledWith(4, null);
-    if (__DEV__) {
-      expect(consoleSpy).toHaveBeenCalledWith(
-        'Warning: Encountered script tag while rendering React component. ' +
-          'Scripts inside React components are parser inserted into document ' +
-          'and they are never executed. Furthemore rendering script nodes ' +
-          'inside components breaks when using Trusted Types.',
-      );
-    }
   });
 
   it(
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 93317598b97f2..c68de59420920 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -16,7 +16,7 @@ import {
   OVERLOADED_BOOLEAN,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-import {trustedTypesAwareToString} from './ToStringValue';
+import {toStringOrTrustedType} from './ToStringValue';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 import {setAttribute, setAttributeNS} from './setAttribute';
 
@@ -144,7 +144,7 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
-        setAttribute(node, attributeName, trustedTypesAwareToString(value));
+        setAttribute(node, attributeName, toStringOrTrustedType(value));
       }
     }
     return;
@@ -176,7 +176,7 @@ export function setValueForProperty(
     } else {
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
-      attributeValue = trustedTypesAwareToString(value);
+      attributeValue = toStringOrTrustedType(value);
       if (propertyInfo.sanitizeURL) {
         sanitizeURL('' + attributeValue.toString());
       }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 776a0116c2e87..4b485294c4186 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -85,7 +85,7 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import {trustedTypesAwareToString} from './ToStringValue';
+import {toStringOrTrustedType} from './ToStringValue';
 
 import {enableFlareAPI} from 'shared/ReactFeatureFlags';
 
@@ -787,7 +787,7 @@ export function diffProperties(
         if (lastHtml !== nextHtml) {
           (updatePayload = updatePayload || []).push(
             propKey,
-            trustedTypesAwareToString(nextHtml),
+            toStringOrTrustedType(nextHtml),
           );
         }
       } else {
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index ce100f1c1205e..9af8eeba79a4a 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -38,32 +38,18 @@ export function getToStringValue(value: mixed): ToStringValue {
 
 /**
  * Returns true only if Trusted Types are available in global object and the value is a trusted type.
- *
- * Trusted Types undergo a change where window.TrustedTypes was renamed to window.trustedTypes
- * (https://github.com/WICG/trusted-types/pull/205).
  */
-function isTrustedTypesValue(value: any): boolean {
-  // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
-  if (typeof TrustedTypes !== 'undefined') {
-    return (
-      TrustedTypes.isHTML(value) ||
-      TrustedTypes.isScript(value) ||
-      TrustedTypes.isScriptURL(value) ||
-      // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
-      (TrustedTypes.isURL && TrustedTypes.isURL(value))
-    );
-    // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
-  } else if (typeof trustedTypes !== 'undefined') {
-    return (
-      trustedTypes.isHTML(value) ||
-      trustedTypes.isScript(value) ||
-      trustedTypes.isScriptURL(value) ||
-      // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
-      (trustedTypes.isURL && trustedTypes.isURL(value))
-    );
-  } else {
-    return false;
-  }
+let isTrustedTypesValue: (value: any) => boolean;
+// $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
+if (typeof trustedTypes !== 'undefined') {
+  isTrustedTypesValue = (value: any) =>
+    trustedTypes.isHTML(value) ||
+    trustedTypes.isScript(value) ||
+    trustedTypes.isScriptURL(value) ||
+    // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
+    (trustedTypes.isURL && trustedTypes.isURL(value));
+} else {
+  isTrustedTypesValue = () => false;
 }
 
 /** Trusted value is a wrapper for "safe" values which can be assigned to DOM execution sinks. */
@@ -76,7 +62,7 @@ export opaque type TrustedValue: {toString(): string} = {toString(): string};
  *
  * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
  */
-export function trustedTypesAwareToString(value: any): string | TrustedValue {
+export function toStringOrTrustedType(value: any): string | TrustedValue {
   // fast-path string values as it's most frequent usage of the function
   if (typeof value !== 'string' && isTrustedTypesValue(value)) {
     return value;
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
index 8465ded736035..45b9282066849 100644
--- a/packages/react-dom/src/client/__tests__/trustedTypes-test.js
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.js
@@ -3,13 +3,13 @@ describe('when Trusted Types are available in global object', () => {
   let ReactDOM;
 
   beforeEach(() => {
-    React = require('react');
-    ReactDOM = require('react-dom');
     window.trustedTypes = {
       isHTML: () => true,
       isScript: () => false,
       isScriptURL: () => false,
     };
+    React = require('react');
+    ReactDOM = require('react-dom');
   });
 
   afterEach(() => {
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index b71c7fcde44c4..6d1089b73788e 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -22,7 +22,6 @@ module.exports = {
     setImmediate: true,
     Buffer: true,
     // Trusted Types
-    TrustedTypes: true,
     trustedTypes: true,
 
     // Scheduler profiling
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 9c795e99f28da..57daf502c2218 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -23,7 +23,6 @@ module.exports = {
     setImmediate: true,
     Buffer: true,
     // Trusted Types
-    TrustedTypes: true,
     trustedTypes: true,
 
     // Scheduler profiling
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 565163130743e..9906dfb5b8ab6 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -22,7 +22,6 @@ module.exports = {
     // for more information
     nativeFabricUIManager: true,
     // Trusted Types
-    TrustedTypes: true,
     trustedTypes: true,
 
     // Scheduler profiling
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index ae94b87e5b1fc..57645c7a34c67 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -25,7 +25,6 @@ module.exports = {
     require: true,
     global: true,
     // Trusted Types
-    TrustedTypes: true,
     trustedTypes: true,
 
     // Scheduler profiling

From abff15074293b5d2f5d332cc980df6a144fe1265 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Wed, 11 Sep 2019 16:37:29 +0200
Subject: [PATCH 06/11] Warn only once, remove forgotten check, put it behind a
 flag

---
 .../src/__tests__/ReactEmptyComponent-test.js | 16 +-----
 .../src/client/DOMPropertyOperations.js       |  2 +-
 .../react-dom/src/client/ReactDOMComponent.js | 19 ++++---
 .../react-dom/src/client/ToStringValue.js     |  8 ++-
 ...-test.js => trustedTypes-test.internal.js} | 56 ++++++++++++-------
 packages/react-dom/src/client/setInnerHTML.js | 11 ++--
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.persistent.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 13 files changed, 70 insertions(+), 50 deletions(-)
 rename packages/react-dom/src/client/__tests__/{trustedTypes-test.js => trustedTypes-test.internal.js} (50%)

diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
index 157235312a00d..10e95f7cf7ba0 100644
--- a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -145,22 +145,10 @@ describe('ReactEmptyComponent', () => {
 
     expect(function() {
       ReactTestUtils.renderIntoDocument(instance1);
-    }).toWarnDev(
-      'Warning: Encountered script tag while rendering React component. ' +
-        'Scripts inside React components are parser inserted into document ' +
-        'and they are never executed. Furthemore rendering script nodes ' +
-        'inside components breaks when using Trusted Types.',
-      {withoutStack: true},
-    );
+    }).not.toThrow();
     expect(function() {
       ReactTestUtils.renderIntoDocument(instance2);
-    }).toWarnDev(
-      'Warning: Encountered script tag while rendering React component. ' +
-        'Scripts inside React components are parser inserted into document ' +
-        'and they are never executed. Furthemore rendering script nodes ' +
-        'inside components breaks when using Trusted Types.',
-      {withoutStack: true},
-    );
+    }).not.toThrow();
 
     expect(log).toHaveBeenCalledTimes(4);
     expect(log).toHaveBeenNthCalledWith(1, null);
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index c68de59420920..72c99e67aa6ec 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -178,7 +178,7 @@ export function setValueForProperty(
       // ('' + value) makes it output the correct toString()-value.
       attributeValue = toStringOrTrustedType(value);
       if (propertyInfo.sanitizeURL) {
-        sanitizeURL('' + attributeValue.toString());
+        sanitizeURL(attributeValue.toString());
       }
     }
     if (attributeNamespace) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 4b485294c4186..7f4d527f55bb6 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -87,10 +87,14 @@ import {validateProperties as validateInputProperties} from '../shared/ReactDOMN
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 import {toStringOrTrustedType} from './ToStringValue';
 
-import {enableFlareAPI} from 'shared/ReactFeatureFlags';
+import {
+  enableFlareAPI,
+  enableTrustedTypesIntegration,
+} from 'shared/ReactFeatureFlags';
 
 let didWarnInvalidHydration = false;
 let didWarnShadyDOM = false;
+let didWarnScriptTags = false;
 
 const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
 const SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
@@ -422,14 +426,15 @@ export function createElement(
       // Create the script via .innerHTML so its "parser-inserted" flag is
       // set to true and it does not execute
       const div = ownerDocument.createElement('div');
-      if (__DEV__) {
-        warningWithoutStack(
+      if (__DEV__ && enableTrustedTypesIntegration && !didWarnScriptTags) {
+        warning(
           false,
-          'Encountered script tag while rendering React component. ' +
-            'Scripts inside React components are parser inserted into document ' +
-            'and they are never executed. Furthemore rendering script nodes ' +
-            'inside components breaks when using Trusted Types.',
+          'Encountered a script tag while rendering React component. ' +
+            'Scripts inside React components are never executed when rendering' +
+            'on the client. Consider using tamplate tag instead ' +
+            '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
         );
+        didWarnScriptTags = true;
       }
       div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
       // This is guaranteed to yield a script element.
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 9af8eeba79a4a..6c5ed066ec0f2 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
+
 export opaque type ToStringValue =
   | boolean
   | number
@@ -64,7 +66,11 @@ export opaque type TrustedValue: {toString(): string} = {toString(): string};
  */
 export function toStringOrTrustedType(value: any): string | TrustedValue {
   // fast-path string values as it's most frequent usage of the function
-  if (typeof value !== 'string' && isTrustedTypesValue(value)) {
+  if (
+    enableTrustedTypesIntegration &&
+    typeof value !== 'string' &&
+    isTrustedTypesValue(value)
+  ) {
     return value;
   } else {
     return '' + value;
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
similarity index 50%
rename from packages/react-dom/src/client/__tests__/trustedTypes-test.js
rename to packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
index 45b9282066849..182b3eae364cb 100644
--- a/packages/react-dom/src/client/__tests__/trustedTypes-test.js
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
@@ -1,8 +1,11 @@
 describe('when Trusted Types are available in global object', () => {
   let React;
   let ReactDOM;
+  let ReactFeatureFlags;
+  let container;
 
   beforeEach(() => {
+    container = document.createElement('div');
     window.trustedTypes = {
       isHTML: () => true,
       isScript: () => false,
@@ -10,14 +13,16 @@ describe('when Trusted Types are available in global object', () => {
     };
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableTrustedTypesIntegration = true;
   });
 
   afterEach(() => {
     delete window.trustedTypes;
+    ReactFeatureFlags.enableTrustedTypesIntegration = false;
   });
 
   it('should not stringify trusted values', () => {
-    const container = document.createElement('div');
     const trustedObject = {toString: () => 'I look like a trusted object'};
     class Component extends React.Component {
       state = {inner: undefined};
@@ -27,8 +32,8 @@ describe('when Trusted Types are available in global object', () => {
     }
 
     const isHTMLSpy = jest.spyOn(window.trustedTypes, ['isHTML']);
-    const instace = ReactDOM.render(<Component />, container);
-    instace.setState({inner: trustedObject});
+    const instance = ReactDOM.render(<Component />, container);
+    instance.setState({inner: trustedObject});
 
     expect(container.firstChild.innerHTML).toBe(trustedObject.toString());
     expect(isHTMLSpy).toHaveBeenCalledWith(trustedObject);
@@ -62,27 +67,38 @@ describe('when Trusted Types are available in global object', () => {
 
     it('should log a warning', () => {
       class Component extends React.Component {
-        state = {inner: undefined};
         render() {
-          return <svg dangerouslySetInnerHTML={{__html: this.state.inner}} />;
+          return <svg dangerouslySetInnerHTML={{__html: 'unsafe html'}} />;
         }
       }
-      const errorSpy = spyOnDev(console, 'error');
+      expect(() => {
+        ReactDOM.render(<Component />, container);
+      }).toWarnDev(
+        "Warning: Using 'dangerouslySetInnerHTML' in an svg element with " +
+          'Trusted Types enabled in an Internet Explorer will cause ' +
+          'the trusted value to be converted to string. Assigning string ' +
+          "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
+          "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
+          'on the enclosing div instead.',
+        {withoutStack: true},
+      );
+    });
+  });
 
-      const container = document.createElement('div');
-      const instace = ReactDOM.render(<Component />, container);
-      instace.setState({inner: 'anyValue'});
+  it('should warn once when rendering script tag in jsx on client', () => {
+    expect(() => {
+      ReactDOM.render(<script>alert("I am not executed")</script>, container);
+    }).toWarnDev(
+      'Warning: Encountered a script tag while rendering React component. ' +
+        'Scripts inside React components are never executed when rendering' +
+        'on the client. Consider using tamplate tag instead ' +
+        '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
+    );
 
-      if (__DEV__) {
-        expect(errorSpy).toHaveBeenCalledWith(
-          "Warning: Using 'dangerouslySetInnerHTML' in an svg element with " +
-            'Trusted Types enabled in an Internet Explorer will cause ' +
-            'the trusted value to be converted to string. Assigning string ' +
-            "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
-            "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
-            'on the enclosing div instead.',
-        );
-      }
-    });
+    const spy = spyOnDev(console, 'error');
+    ReactDOM.render(<script>alert("I am not executed")</script>, container);
+    if (__DEV__) {
+      expect(spy).toHaveBeenCalledTimes(0);
+    }
   });
 });
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 7cc699003a9a0..1a84701922988 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -11,6 +11,7 @@ import {Namespaces} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
 import warningWithoutStack from 'shared/warningWithoutStack';
 import type {TrustedValue} from './ToStringValue';
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
 // SVG temp container for IE lacking innerHTML
 let reusableSVGContainer;
@@ -30,14 +31,10 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   // new markup in a temp node and then move the child nodes across into
   // the target node
   if (node.namespaceURI === Namespaces.svg) {
-    if (__DEV__) {
+    if (enableTrustedTypesIntegration && __DEV__) {
       warningWithoutStack(
-        // Trusted Types undergo a change where window.TrustedTypes was renamed to window.trustedTypes
-        // (https://github.com/WICG/trusted-types/pull/205).
-        // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
-        typeof TrustedTypes === 'undefined' &&
-          // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
-          typeof trustedTypes === 'undefined',
+        // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
+        typeof trustedTypes === 'undefined',
         "Using 'dangerouslySetInnerHTML' in an svg element with " +
           'Trusted Types enabled in an Internet Explorer will cause ' +
           'the trusted value to be converted to string. Assigning string ' +
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 3b64033a6e2ff..17f5026449e7c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -97,3 +97,5 @@ export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+
+export const enableTrustedTypesIntegration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 9dbed7ab7f987..d06b1b2bddca9 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -42,6 +42,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrustedTypesIntegration = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 4201b41bd266d..88975a5dd4b9c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -37,6 +37,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrustedTypesIntegration = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index 23d936b7eb50c..feff0ed82713a 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -37,6 +37,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrustedTypesIntegration = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c308b949db368..1d12b604af27f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -37,6 +37,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrustedTypesIntegration = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b452e018ef45b..4f945dde90615 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -35,6 +35,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
 export const disableLegacyContext = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const enableTrustedTypesIntegration = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 8965f4d42155f..8d49c0355d1a9 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -22,6 +22,7 @@ export const {
   enableUserBlockingEvents,
   disableLegacyContext,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
+  enableTrustedTypesIntegration,
 } = require('ReactFeatureFlags');
 
 // In www, we have experimental support for gathering data

From 1e5b0bfeff663fe53ac1a91c7c8e19a7e5ed2a07 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Wed, 11 Sep 2019 19:28:19 +0200
Subject: [PATCH 07/11] Move comment

---
 packages/react-dom/src/client/ToStringValue.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 6c5ed066ec0f2..4ab78cb56df36 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -65,9 +65,9 @@ export opaque type TrustedValue: {toString(): string} = {toString(): string};
  * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
  */
 export function toStringOrTrustedType(value: any): string | TrustedValue {
-  // fast-path string values as it's most frequent usage of the function
   if (
     enableTrustedTypesIntegration &&
+    // fast-path string values as it's most frequent usage of the function
     typeof value !== 'string' &&
     isTrustedTypesValue(value)
   ) {

From 245d89b10980887b6cc9b8f36df741b5d15485f4 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Wed, 11 Sep 2019 22:29:21 +0200
Subject: [PATCH 08/11] Fix PR comments

---
 .../react-dom/src/client/ReactDOMComponent.js | 21 +++++++++++--------
 .../react-dom/src/client/ToStringValue.js     |  2 +-
 .../__tests__/trustedTypes-test.internal.js   | 11 +++++-----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 7f4d527f55bb6..48b52eb195ea9 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -422,19 +422,22 @@ export function createElement(
         type,
       );
     }
+
     if (type === 'script') {
       // Create the script via .innerHTML so its "parser-inserted" flag is
       // set to true and it does not execute
       const div = ownerDocument.createElement('div');
-      if (__DEV__ && enableTrustedTypesIntegration && !didWarnScriptTags) {
-        warning(
-          false,
-          'Encountered a script tag while rendering React component. ' +
-            'Scripts inside React components are never executed when rendering' +
-            'on the client. Consider using tamplate tag instead ' +
-            '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
-        );
-        didWarnScriptTags = true;
+      if (__DEV__) {
+        if (enableTrustedTypesIntegration && !didWarnScriptTags) {
+          warning(
+            false,
+            'Encountered a script tag while rendering React component. ' +
+              'Scripts inside React components are never executed when rendering ' +
+              'on the client. Consider using template tag instead ' +
+              '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
+          );
+          didWarnScriptTags = true;
+        }
       }
       div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
       // This is guaranteed to yield a script element.
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 4ab78cb56df36..73bf5589ecfac 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -43,7 +43,7 @@ export function getToStringValue(value: mixed): ToStringValue {
  */
 let isTrustedTypesValue: (value: any) => boolean;
 // $FlowExpectedError - TrustedTypes are defined only in some browsers or with polyfill
-if (typeof trustedTypes !== 'undefined') {
+if (enableTrustedTypesIntegration && typeof trustedTypes !== 'undefined') {
   isTrustedTypesValue = (value: any) =>
     trustedTypes.isHTML(value) ||
     trustedTypes.isScript(value) ||
diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
index 182b3eae364cb..c2d251d197dde 100644
--- a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
@@ -11,10 +11,10 @@ describe('when Trusted Types are available in global object', () => {
       isScript: () => false,
       isScriptURL: () => false,
     };
-    React = require('react');
-    ReactDOM = require('react-dom');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableTrustedTypesIntegration = true;
+    React = require('react');
+    ReactDOM = require('react-dom');
   });
 
   afterEach(() => {
@@ -90,9 +90,10 @@ describe('when Trusted Types are available in global object', () => {
       ReactDOM.render(<script>alert("I am not executed")</script>, container);
     }).toWarnDev(
       'Warning: Encountered a script tag while rendering React component. ' +
-        'Scripts inside React components are never executed when rendering' +
-        'on the client. Consider using tamplate tag instead ' +
-        '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).',
+        'Scripts inside React components are never executed when rendering ' +
+        'on the client. Consider using template tag instead ' +
+        '(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n' +
+        '    in script (at **)',
     );
 
     const spy = spyOnDev(console, 'error');

From b1d6e1943f0a5fc7651c2a3bb1abaa2541aa8f59 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Fri, 13 Sep 2019 12:39:24 +0200
Subject: [PATCH 09/11] Fix html toString concatenation

---
 packages/react-dom/src/client/ToStringValue.js | 5 ++++-
 packages/react-dom/src/client/setInnerHTML.js  | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 73bf5589ecfac..1cb8f60f0b5e7 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -55,7 +55,10 @@ if (enableTrustedTypesIntegration && typeof trustedTypes !== 'undefined') {
 }
 
 /** Trusted value is a wrapper for "safe" values which can be assigned to DOM execution sinks. */
-export opaque type TrustedValue: {toString(): string} = {toString(): string};
+export opaque type TrustedValue: {toString(): string, valueOf(): string} = {
+  toString(): string,
+  valueOf(): string,
+};
 
 /**
  * We allow passing objects with toString method as element attributes or in dangerouslySetInnerHTML
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 1a84701922988..3313c7f9a70c6 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -46,7 +46,8 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
     if (!('innerHTML' in node)) {
       reusableSVGContainer =
         reusableSVGContainer || document.createElement('div');
-      reusableSVGContainer.innerHTML = '<svg>' + html.toString() + '</svg>';
+      reusableSVGContainer.innerHTML =
+        '<svg>' + html.valueOf().toString() + '</svg>';
       const svgNode = reusableSVGContainer.firstChild;
       while (node.firstChild) {
         node.removeChild(node.firstChild);

From 57e405fa847ebd5b0a5a55e9933a1ca8d2b6cea1 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Fri, 13 Sep 2019 13:41:25 +0200
Subject: [PATCH 10/11] Fix forgotten else branch

---
 packages/react-dom/src/client/setInnerHTML.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 3313c7f9a70c6..4845185f1a4a5 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -55,6 +55,8 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
       while (svgNode.firstChild) {
         node.appendChild(svgNode.firstChild);
       }
+    } else {
+      node.innerHTML = (html: any);
     }
   } else {
     node.innerHTML = (html: any);

From 941ec849621e2bdf84fe6323de099a20a9a96839 Mon Sep 17 00:00:00 2001
From: Emanuel Tesar <siegrift@google.com>
Date: Mon, 16 Sep 2019 10:57:34 +0200
Subject: [PATCH 11/11] Fix PR comments

---
 .../src/client/__tests__/trustedTypes-test.internal.js      | 6 +-----
 packages/react-dom/src/client/setInnerHTML.js               | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
index c2d251d197dde..3a9eb4c15d16c 100644
--- a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
+++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
@@ -80,7 +80,6 @@ describe('when Trusted Types are available in global object', () => {
           "to 'innerHTML' will throw an error if Trusted Types are enforced. " +
           "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
           'on the enclosing div instead.',
-        {withoutStack: true},
       );
     });
   });
@@ -96,10 +95,7 @@ describe('when Trusted Types are available in global object', () => {
         '    in script (at **)',
     );
 
-    const spy = spyOnDev(console, 'error');
+    // check that the warning is print only once
     ReactDOM.render(<script>alert("I am not executed")</script>, container);
-    if (__DEV__) {
-      expect(spy).toHaveBeenCalledTimes(0);
-    }
   });
 });
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 4845185f1a4a5..4fa94a4e95c92 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -9,7 +9,7 @@
 
 import {Namespaces} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
-import warningWithoutStack from 'shared/warningWithoutStack';
+import warning from 'shared/warning';
 import type {TrustedValue} from './ToStringValue';
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
@@ -32,7 +32,7 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   // the target node
   if (node.namespaceURI === Namespaces.svg) {
     if (enableTrustedTypesIntegration && __DEV__) {
-      warningWithoutStack(
+      warning(
         // $FlowExpectedError - trustedTypes are defined only in some browsers or with polyfill
         typeof trustedTypes === 'undefined',
         "Using 'dangerouslySetInnerHTML' in an svg element with " +