[Trusted Types] Don't stringify DOM attributes (#19588 redo)

Summary: This is a resubmit of #19588.

Fixes #19587.

Author: onionymous

packages/react-dom-bindings/src/client/DOMPropertyOperations.js

@@ -9,7 +9,6 @@
 
 import isAttributeNameSafe from '../shared/isAttributeNameSafe';
 import {
-  enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
 } from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
@@ -135,7 +134,7 @@ export function setValueForAttribute(
     }
     node.setAttribute(
       name,
-      enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+      (value: any)
     );
   }
 }
@@ -163,7 +162,7 @@ export function setValueForKnownAttribute(
   }
   node.setAttribute(
     name,
-    enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+    (value: any)
   );
 }
 
@@ -192,7 +191,7 @@ export function setValueForNamespacedAttribute(
   node.setAttributeNS(
     namespace,
     name,
-    enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
+    (value: any)
   );
 }
 

packages/react-dom-bindings/src/shared/sanitizeURL.js

@@ -25,6 +25,14 @@ const isJavaScriptProtocol =
 let didWarn = false;
 
 function sanitizeURL<T>(url: T): T | string {
+  if (
+    typeof trustedTypes === 'undefined' ||
+    !trustedTypes.isScriptURL(url)
+  ) {
+    // Coerce to a string, unless we know it's an immutable TrustedScriptURL object.
+    url = '' + url;
+  }
+
   // We should never have symbols here because they get filtered out elsewhere.
   // eslint-disable-next-line react-internal/safe-string-coercion
   const stringifiedURL = '' + (url: any);

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -17,22 +17,34 @@ describe('when Trusted Types are available in global object', () => {
   let ttObject1;
   let ttObject2;
 
+  const expectToReject = fn => {
+    let msg;
+    try {
+      fn();
+    } catch (x) {
+      msg = x.message;
+    }
+    expect(msg).toContain(
+      'React has blocked a javascript: URL as a security precaution.',
+    );
+  };
+
   beforeEach(() => {
     jest.resetModules();
     container = document.createElement('div');
-    const fakeTTObjects = new Set();
+    fakeTTObjects = new Set();
     window.trustedTypes = {
       isHTML: function (value) {
         if (this !== window.trustedTypes) {
           throw new Error(this);
         }
         return fakeTTObjects.has(value);
       },
-      isScript: () => false,
-      isScriptURL: () => false,
+      isScript: value => fakeTTObjects.has(value),
+      isScriptURL: value => fakeTTObjects.has(value),
     };
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableTrustedTypesIntegration = true;
+    ReactFeatureFlags.disableJavaScriptURLs = true;
     React = require('react');
     ReactDOM = require('react-dom');
     ttObject1 = {
@@ -152,6 +164,56 @@ describe('when Trusted Types are available in global object', () => {
     }
   });
 
+  it('should not stringify attributes that go through sanitizeURL', () => {
+    const setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function(name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      const trustedScriptUrlHttps = {
+        toString: () => 'https://ok.example',
+      };
+      fakeTTObjects.add(trustedScriptUrlHttps);
+      // It's not a matching type (under Trusted Types a.href a string will do),
+      // but a.href undergoes URL and we're only testing if the value was
+      // passed unmodified to setAttribute.
+      ReactDOM.render(<a href={trustedScriptUrlHttps} />, container);
+      expect(setAttributeCalls.length).toBe(1);
+      expect(setAttributeCalls[0][0]).toBe(container.firstChild);
+      expect(setAttributeCalls[0][1]).toBe('href');
+      // Ensure it didn't get stringified when passed to a DOM sink:
+      expect(setAttributeCalls[0][2]).toBe(trustedScriptUrlHttps);
+    } finally {
+      Element.prototype.setAttribute = setAttribute;
+    }
+  });
+
+  it('should sanitize attributes even if they are Trusted Types', () => {
+    const setAttribute = Element.prototype.setAttribute;
+    try {
+      const setAttributeCalls = [];
+      Element.prototype.setAttribute = function(name, value) {
+        setAttributeCalls.push([this, name.toLowerCase(), value]);
+        return setAttribute.apply(this, arguments);
+      };
+      const trustedScriptUrlJavascript = {
+        // eslint-disable-next-line no-script-url
+        toString: () => 'javascript:notfine',
+      };
+      fakeTTObjects.add(trustedScriptUrlJavascript);
+      // Assert that the URL sanitization will correctly unwrap and verify the
+      // value.
+      expectToReject(() => {
+        ReactDOM.render(<a href={trustedScriptUrlJavascript} />, container);
+      });
+      expect(setAttributeCalls.length).toBe(0);
+    } finally {
+      Element.prototype.setAttribute = setAttribute;
+    }
+  });
+
   it('should not stringify trusted values for setAttributeNS', () => {
     const setAttributeNS = Element.prototype.setAttributeNS;
     try {

packages/shared/ReactFeatureFlags.js

@@ -176,8 +176,6 @@ export const disableCommentsAsDOMContainers = true;
 // Disable javascript: URL strings in href for XSS protection.
 export const disableJavaScriptURLs = false;
 
-export const enableTrustedTypesIntegration = false;
-
 // Prevent the value and checked attributes from syncing with their related
 // DOM properties
 export const disableInputAttributeSyncing = false;