Add trusted types to React for server side

facebook · Siegrift · Jul 19, 2019 · Aug 21, 2019 · Aug 21, 2019 · 5536ccb1a2e8a17a4ddad99b72bb7e70de02a0e8
commit 5536ccb1a2e8a17a4ddad99b72bb7e70de02a0e8
diff --git 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/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -6,6 +6,7 @@
  *
  * @flow
  */
+import type {TrustedTypes} from './trustedTypes';
 
 import {
   ID_ATTRIBUTE_NAME,
@@ -41,18 +42,48 @@ export function createMarkupForRoot(): string {
 /**
  * Creates markup for a property.
  *
- * @param {string} name
- * @param {*} value
+ * @param {string} name property name
+ * @param {*} value property value
+ * @param {string} tagLowercase lowercase tag name of the target element
+ * @param {TrustedTypes} trustedTypes Trusted Types implementation, which if provided enforces trusted types on server
  * @return {?string} Markup string, or null if the property was invalid.
  */
-export function createMarkupForProperty(name: string, value: mixed): string {
+export function createMarkupForProperty(
+  name: string,
+  value: mixed,
+  tagLowercase: string,
+  trustedTypes: ?TrustedTypes,
+): string {
   const propertyInfo = getPropertyInfo(name);
   if (name !== 'style' && shouldIgnoreAttribute(name, propertyInfo, false)) {
     return '';
   }
   if (shouldRemoveAttribute(name, value, propertyInfo, false)) {
     return '';
   }
+  if (
+    trustedTypes &&
+    // TODO: getPropertyType is not yet implemented everywhere.
+    // once Trusted Types are stable remove this check.
+    trustedTypes.getPropertyType &&
+    trustedTypes.getPropertyType(tagLowercase, name)
+  ) {
+    const requiredTrustedType = trustedTypes.getPropertyType(
+      tagLowercase,
+      name,
+    );
+    if (
+      (requiredTrustedType === 'TrustedHTML' && !trustedTypes.isHTML(value)) ||
+      (requiredTrustedType === 'TrustedScriptURL' &&
+        !trustedTypes.isScriptURL(value)) ||
+      (requiredTrustedType === 'TrustedURL' && !trustedTypes.isURL(value)) ||
+      (requiredTrustedType === 'TrustedScript' && !trustedTypes.isScript(value))
+    ) {
+      throw new Error(
+        `${name} requires ${requiredTrustedType}! Received: ${(value: any)}`,
+      );
+    }
+  }
   if (propertyInfo !== null) {
     const attributeName = propertyInfo.attributeName;
     const {type} = propertyInfo;

diff --git a/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js b/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js
@@ -11,11 +11,15 @@ import ReactPartialRenderer from './ReactPartialRenderer';
 
 // This is a Readable Node.js stream which wraps the ReactDOMPartialRenderer.
 class ReactMarkupReadableStream extends Readable {
-  constructor(element, makeStaticMarkup) {
+  constructor(element, makeStaticMarkup, trustedTypes) {
     // Calls the stream.Readable(options) constructor. Consider exposing built-in
     // features like highWaterMark in the future.
     super({});
-    this.partialRenderer = new ReactPartialRenderer(element, makeStaticMarkup);
+    this.partialRenderer = new ReactPartialRenderer(
+      element,
+      makeStaticMarkup,
+      trustedTypes,
+    );
   }
 
   _destroy(err, callback) {
@@ -36,15 +40,15 @@ class ReactMarkupReadableStream extends Readable {
  * server.
  * See https://reactjs.org/docs/react-dom-server.html#rendertonodestream
  */
-export function renderToNodeStream(element) {
-  return new ReactMarkupReadableStream(element, false);
+export function renderToNodeStream(element, trustedTypes) {
+  return new ReactMarkupReadableStream(element, false, trustedTypes);
 }
 
 /**
  * Similar to renderToNodeStream, except this doesn't create extra DOM attributes
  * such as data-react-id that React uses internally.
  * See https://reactjs.org/docs/react-dom-server.html#rendertostaticnodestream
  */
-export function renderToStaticNodeStream(element) {
-  return new ReactMarkupReadableStream(element, true);
+export function renderToStaticNodeStream(element, trustedTypes) {
+  return new ReactMarkupReadableStream(element, true, trustedTypes);
 }
diff --git a/packages/react-dom/src/server/ReactDOMStringRenderer.js b/packages/react-dom/src/server/ReactDOMStringRenderer.js
@@ -12,8 +12,8 @@ import ReactPartialRenderer from './ReactPartialRenderer';
  * server.
  * See https://reactjs.org/docs/react-dom-server.html#rendertostring
  */
-export function renderToString(element) {
-  const renderer = new ReactPartialRenderer(element, false);
+export function renderToString(element, trustedTypes) {
+  const renderer = new ReactPartialRenderer(element, false, trustedTypes);
   try {
     const markup = renderer.read(Infinity);
     return markup;
@@ -27,8 +27,8 @@ export function renderToString(element) {
  * such as data-react-id that React uses internally.
  * See https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
  */
-export function renderToStaticMarkup(element) {
-  const renderer = new ReactPartialRenderer(element, true);
+export function renderToStaticMarkup(element, trustedTypes) {
+  const renderer = new ReactPartialRenderer(element, true, trustedTypes);
   try {
     const markup = renderer.read(Infinity);
     return markup;

diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -10,6 +10,7 @@
 import type {ThreadID} from './ReactThreadIDAllocator';
 import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
+import type {TrustedTypes} from './trustedTypes';
 
 import React from 'react';
 import invariant from 'shared/invariant';
@@ -273,10 +274,16 @@ function shouldConstruct(Component) {
   return Component.prototype && Component.prototype.isReactComponent;
 }
 
-function getNonChildrenInnerMarkup(props) {
+function getNonChildrenInnerMarkup(props, trustedTypes) {
   const innerHTML = props.dangerouslySetInnerHTML;
   if (innerHTML != null) {
     if (innerHTML.__html != null) {
+      if (trustedTypes && trustedTypes.isHTML(innerHTML.__html) === false) {
+        throw new Error(
+          'dangerouslySetInnerHTML requires TrustedHTML! Received: ' +
+            innerHTML.__html,
+        );
+      }
       return innerHTML.__html;
     }
   } else {
@@ -349,6 +356,7 @@ function createOpenTagMarkup(
   namespace: string,
   makeStaticMarkup: boolean,
   isRootElement: boolean,
+  trustedTypes: ?TrustedTypes,
 ): string {
   let ret = '<' + tagVerbatim;
 
@@ -369,7 +377,12 @@ function createOpenTagMarkup(
         markup = createMarkupForCustomAttribute(propKey, propValue);
       }
     } else {
-      markup = createMarkupForProperty(propKey, propValue);
+      markup = createMarkupForProperty(
+        propKey,
+        propValue,
+        tagLowercase,
+        trustedTypes,
+      );
     }
     if (markup) {
       ret += ' ' + markup;
@@ -693,14 +706,19 @@ class ReactDOMServerRenderer {
   currentSelectValue: any;
   previousWasTextNode: boolean;
   makeStaticMarkup: boolean;
+  trustedTypes: ?TrustedTypes;
   suspenseDepth: number;
 
   contextIndex: number;
   contextStack: Array<ReactContext<any>>;
   contextValueStack: Array<any>;
   contextProviderStack: ?Array<ReactProvider<any>>; // DEV-only
 
-  constructor(children: mixed, makeStaticMarkup: boolean) {
+  constructor(
+    children: mixed,
+    makeStaticMarkup: boolean,
+    trustedTypes?: TrustedTypes,
+  ) {
     const flatChildren = flattenTopLevelChildren(children);
 
     const topFrame: Frame = {
@@ -722,6 +740,7 @@ class ReactDOMServerRenderer {
     this.currentSelectValue = null;
     this.previousWasTextNode = false;
     this.makeStaticMarkup = makeStaticMarkup;
+    this.trustedTypes = trustedTypes;
     this.suspenseDepth = 0;
 
     // Context (new API)
@@ -1467,6 +1486,7 @@ class ReactDOMServerRenderer {
       namespace,
       this.makeStaticMarkup,
       this.stack.length === 1,
+      this.trustedTypes,
     );
     let footer = '';
     if (omittedCloseTags.hasOwnProperty(tag)) {
@@ -1476,7 +1496,7 @@ class ReactDOMServerRenderer {
       footer = '</' + element.type + '>';
     }
     let children;
-    const innerMarkup = getNonChildrenInnerMarkup(props);
+    const innerMarkup = getNonChildrenInnerMarkup(props, this.trustedTypes);
     if (innerMarkup != null) {
       children = [];
       if (newlineEatingTags[tag] && innerMarkup.charAt(0) === '\n') {

diff --git a/packages/react-dom/src/server/__tests__/trustedTypes-test.js b/packages/react-dom/src/server/__tests__/trustedTypes-test.js
@@ -0,0 +1,169 @@
+describe('when Trusted Types are passed as parameter to ReactDOM', () => {
+  let React;
+  let ReactDOMServer;
+  let TrustedTypes;
+  let getPropertyTypeSpy;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMServer = require('react-dom/server');
+    TrustedTypes = {
+      isHTML: value => value.toString() === 'TRUSTED',
+      isScript: () => true,
+      isScriptURL: () => true,
+      isURL: () => true,
+      getPropertyType: (elem, prop) => {
+        if (elem === 'div' && prop === 'innerHTML') {
+          return 'TrustedHTML';
+        } else {
+          return undefined;
+        }
+      },
+    };
+    getPropertyTypeSpy = jest.spyOn(TrustedTypes, 'getPropertyType');
+  });
+
+  describe('rendering safe properties', () => {
+    it('renders using renderToString method', () => {
+      const html = ReactDOMServer.renderToString(
+        <div foo="foo" />,
+        TrustedTypes,
+      );
+      expect(html).toBe('<div foo="foo" data-reactroot=""></div>');
+      expect(getPropertyTypeSpy).toHaveBeenCalledWith('div', 'foo');
+    });
+
+    it('renders using renderToStaticMarkup method', () => {
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <div foo="foo" />,
+        TrustedTypes,
+      );
+      expect(html).toBe('<div foo="foo"></div>');
+      expect(getPropertyTypeSpy).toHaveBeenCalledWith('div', 'foo');
+    });
+
+    it('renders using renderToNodeStream method', () => {
+      const stream = ReactDOMServer.renderToNodeStream(
+        <div foo="foo" />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+      expect(stream.read()).toBe('<div foo="foo" data-reactroot=""></div>');
+      expect(getPropertyTypeSpy).toHaveBeenCalledWith('div', 'foo');
+    });
+
+    it('renders using renderToStaticNodeStream method', () => {
+      const stream = ReactDOMServer.renderToStaticNodeStream(
+        <div foo="foo" />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+      expect(stream.read()).toBe('<div foo="foo"></div>');
+      expect(getPropertyTypeSpy).toHaveBeenCalledWith('div', 'foo');
+    });
+  });
+
+  describe('assigning trusted values into execution sinks', () => {
+    let trustedValue;
+    let isHTMLSpy;
+
+    beforeEach(() => {
+      trustedValue = {toString: () => 'TRUSTED'};
+      isHTMLSpy = jest.spyOn(TrustedTypes, 'isHTML');
+    });
+
+    it('renders using renderToString method', () => {
+      const html = ReactDOMServer.renderToString(
+        <div dangerouslySetInnerHTML={{__html: trustedValue}} />,
+        TrustedTypes,
+      );
+      expect(html).toBe('<div data-reactroot="">TRUSTED</div>');
+      expect(isHTMLSpy).toHaveBeenCalledWith(trustedValue);
+    });
+
+    it('renders using renderToStaticMarkup method', () => {
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <div dangerouslySetInnerHTML={{__html: trustedValue}} />,
+        TrustedTypes,
+      );
+      expect(html).toBe('<div>TRUSTED</div>');
+      expect(isHTMLSpy).toHaveBeenCalledWith(trustedValue);
+    });
+
+    it('renders using renderToNodeStream method', () => {
+      const stream = ReactDOMServer.renderToNodeStream(
+        <div dangerouslySetInnerHTML={{__html: trustedValue}} />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+      expect(stream.read()).toBe('<div data-reactroot="">TRUSTED</div>');
+      expect(isHTMLSpy).toHaveBeenCalledWith(trustedValue);
+    });
+
+    it('renders using renderToStaticNodeStream method', () => {
+      const stream = ReactDOMServer.renderToStaticNodeStream(
+        <div dangerouslySetInnerHTML={{__html: trustedValue}} />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+      expect(stream.read()).toBe('<div>TRUSTED</div>');
+      expect(isHTMLSpy).toHaveBeenCalledWith(trustedValue);
+    });
+  });
+
+  describe('when untrusted values are assigned to execution sinks', () => {
+    let untrustedValue;
+    let isHTMLSpy;
+
+    beforeEach(() => {
+      untrustedValue = {toString: () => 'untrusted'};
+      isHTMLSpy = jest.spyOn(TrustedTypes, 'isHTML');
+    });
+
+    it('throws when using renderToString method', () => {
+      expect(() => {
+        ReactDOMServer.renderToString(
+          <div dangerouslySetInnerHTML={{__html: untrustedValue}} />,
+          TrustedTypes,
+        );
+      }).toThrow();
+      expect(isHTMLSpy).toHaveBeenCalledWith(untrustedValue);
+    });
+
+    it('throws when using renderToStaticMarkup method', () => {
+      expect(() => {
+        ReactDOMServer.renderToStaticMarkup(
+          <div dangerouslySetInnerHTML={{__html: untrustedValue}} />,
+          TrustedTypes,
+        );
+      }).toThrow();
+      expect(isHTMLSpy).toHaveBeenCalledWith(untrustedValue);
+    });
+
+    it('throws when using renderToNodeStream method', () => {
+      const response = ReactDOMServer.renderToNodeStream(
+        <div dangerouslySetInnerHTML={{__html: untrustedValue}} />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+
+      return new Promise(resolve => {
+        response.once('error', () => {
+          resolve();
+        });
+        expect(response.read()).toBeNull();
+        expect(isHTMLSpy).toHaveBeenCalledWith(untrustedValue);
+      });
+    });
+
+    it('throws when using renderToStaticNodeStream method', () => {
+      const response = ReactDOMServer.renderToStaticNodeStream(
+        <div dangerouslySetInnerHTML={{__html: untrustedValue}} />,
+        TrustedTypes,
+      ).setEncoding('utf8');
+
+      return new Promise(resolve => {
+        response.once('error', () => {
+          resolve();
+        });
+        expect(response.read()).toBeNull();
+        expect(isHTMLSpy).toHaveBeenCalledWith(untrustedValue);
+      });
+    });
+  });
+});