From a99bb5ca7afd6c38db21b1987edbc3c26a1b89e7 Mon Sep 17 00:00:00 2001 From: kassens Date: Mon, 30 Jan 2023 18:33:58 +0000 Subject: [PATCH] [trusted types][www] Add enableTrustedTypesIntegration flag back in (#26016) ## Summary The flag was first added in #16157 and was rolled out to employees in D17430095. #25997 removed this flag because it wasn't dynamically set to a value in www. The www side was mistakenly removed in D41851685 due to deprecation of a TypedJSModule but we still want to keep this flag, so let's add it back in + add a GK on the www side to match the previous rollout. See D42574435 for the dynamic value change in www ## How did you test this change? ``` yarn test yarn test --prod ``` DiffTrain build for [48b687fc95a172cec8f305312a27d105e5719581](https://github.com/facebook/react/commit/48b687fc95a172cec8f305312a27d105e5719581) [View git log for this commit](https://github.com/facebook/react/commits/48b687fc95a172cec8f305312a27d105e5719581) --- .../facebook-www/JSXDEVRuntime-dev.classic.js | 2 + .../facebook-www/JSXDEVRuntime-dev.modern.js | 2 + compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/REVISION_TRANSFORMS | 2 +- compiled/facebook-www/React-dev.classic.js | 4 +- compiled/facebook-www/React-dev.modern.js | 4 +- compiled/facebook-www/React-prod.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- .../facebook-www/React-profiling.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 4 +- compiled/facebook-www/ReactART-dev.modern.js | 4 +- .../facebook-www/ReactART-prod.classic.js | 4 +- compiled/facebook-www/ReactART-prod.modern.js | 4 +- compiled/facebook-www/ReactDOM-dev.classic.js | 46 +++++++++++++++++-- compiled/facebook-www/ReactDOM-dev.modern.js | 46 +++++++++++++++++-- .../facebook-www/ReactDOM-prod.classic.js | 15 ++++-- compiled/facebook-www/ReactDOM-prod.modern.js | 15 ++++-- .../ReactDOM-profiling.classic.js | 15 ++++-- .../facebook-www/ReactDOM-profiling.modern.js | 15 ++++-- .../ReactDOMServer-dev.classic.js | 4 +- .../facebook-www/ReactDOMServer-dev.modern.js | 4 +- .../ReactDOMServer-prod.classic.js | 2 +- .../ReactDOMServer-prod.modern.js | 2 +- .../ReactDOMServerStreaming-dev.modern.js | 2 + .../ReactDOMTesting-dev.classic.js | 2 +- .../ReactDOMTesting-dev.modern.js | 2 +- .../ReactDOMTesting-prod.classic.js | 6 +-- .../ReactDOMTesting-prod.modern.js | 6 +-- .../ReactFlightDOMRelayServer-dev.classic.js | 2 + .../ReactFlightDOMRelayServer-dev.modern.js | 2 + compiled/facebook-www/ReactIs-dev.classic.js | 2 + compiled/facebook-www/ReactIs-dev.modern.js | 2 + .../ReactTestRenderer-dev.classic.js | 2 +- .../ReactTestRenderer-dev.modern.js | 2 +- .../ReactTestUtils-dev.classic.js | 2 + .../facebook-www/ReactTestUtils-dev.modern.js | 2 + 37 files changed, 182 insertions(+), 56 deletions(-) diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js index 1fdfb1efad829..b38210d91a8b3 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js @@ -107,6 +107,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js index 2b01d70275788..89c622dfaae36 100644 --- a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js +++ b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js @@ -107,6 +107,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index ea57d76321a87..ad4cb3905cf16 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -9b1423cc09c11f0a4e05b0ccb66d185093a16413 +48b687fc95a172cec8f305312a27d105e5719581 diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS index ea57d76321a87..ad4cb3905cf16 100644 --- a/compiled/facebook-www/REVISION_TRANSFORMS +++ b/compiled/facebook-www/REVISION_TRANSFORMS @@ -1 +1 @@ -9b1423cc09c11f0a4e05b0ccb66d185093a16413 +48b687fc95a172cec8f305312a27d105e5719581 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index e856f12aa7517..9ed361067f8e5 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-classic-9b1423cc0-20230130"; +var ReactVersion = "18.3.0-www-classic-48b687fc9-20230130"; // ATTENTION // When adding new symbols to this file, @@ -478,6 +478,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index ccdd897e6c661..2c8020f6eae99 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-modern-9b1423cc0-20230130"; +var ReactVersion = "18.3.0-www-modern-48b687fc9-20230130"; // ATTENTION // When adding new symbols to this file, @@ -478,6 +478,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 8e05244d7780c..97b120088fcfb 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -643,4 +643,4 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-classic-9b1423cc0-20230130"; +exports.version = "18.3.0-www-classic-48b687fc9-20230130"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index bb31da1e831eb..c19caf98b1c60 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -635,4 +635,4 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-modern-9b1423cc0-20230130"; +exports.version = "18.3.0-www-modern-48b687fc9-20230130"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index c6c8ba523d882..0f0c96309f620 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -654,7 +654,7 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-classic-9b1423cc0-20230130"; +exports.version = "18.3.0-www-classic-48b687fc9-20230130"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 709dd4ea43d20..92e1c11012056 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -646,7 +646,7 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-modern-9b1423cc0-20230130"; +exports.version = "18.3.0-www-modern-48b687fc9-20230130"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 54c48e0f42182..e3be6d8b45454 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-classic-9b1423cc0-20230130"; +var ReactVersion = "18.3.0-www-classic-48b687fc9-20230130"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -167,6 +167,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index d344d5f4d18e8..3e42808cfd6f8 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-modern-9b1423cc0-20230130"; +var ReactVersion = "18.3.0-www-modern-48b687fc9-20230130"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -167,6 +167,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 285f2668d9bc0..d65ae6e9718af 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -9804,7 +9804,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-classic-9b1423cc0-20230130", + version: "18.3.0-www-classic-48b687fc9-20230130", rendererPackageName: "react-art" }; var internals$jscomp$inline_1318 = { @@ -9835,7 +9835,7 @@ var internals$jscomp$inline_1318 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-9b1423cc0-20230130" + reconcilerVersion: "18.3.0-next-48b687fc9-20230130" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1319 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index d10cedbaf1c6d..0f249ece5ce2d 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -9471,7 +9471,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-9b1423cc0-20230130", + version: "18.3.0-www-modern-48b687fc9-20230130", rendererPackageName: "react-art" }; var internals$jscomp$inline_1309 = { @@ -9502,7 +9502,7 @@ var internals$jscomp$inline_1309 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-9b1423cc0-20230130" + reconcilerVersion: "18.3.0-next-48b687fc9-20230130" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1310 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index eb8368755a641..fdeee337fee70 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -37,6 +37,8 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"); var disableInputAttributeSyncing = dynamicFeatureFlags.disableInputAttributeSyncing, + enableTrustedTypesIntegration = + dynamicFeatureFlags.enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime = dynamicFeatureFlags.disableSchedulerTimeoutBasedOnReactExpirationTime, warnAboutSpreadingKeyToJSX = dynamicFeatureFlags.warnAboutSpreadingKeyToJSX, @@ -67,7 +69,7 @@ var enableProfilerNestedUpdatePhase = true; var enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; var createRootStrictEffectsByDefault = false; -var enableClientRenderFallbackOnTextMismatch = false; +var enableClientRenderFallbackOnTextMismatch = false; // Logs additional User Timing API marks for use with an experimental profiling tool. var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation. var enableSuspenseCallback = true; @@ -1962,7 +1964,10 @@ function setValueForProperty(node, name, value, isCustomComponentTag) { checkAttributeStringCoercion(value, name); } - node.setAttribute(_attributeName, "" + value); + node.setAttribute( + _attributeName, + enableTrustedTypesIntegration ? value : "" + value + ); } } @@ -2002,7 +2007,9 @@ function setValueForProperty(node, name, value, isCustomComponentTag) { } else { // `setAttribute` with objects becomes only `[object]` in IE8/9, // ('' + value) makes it output the correct toString()-value. - { + if (enableTrustedTypesIntegration) { + attributeValue = value; + } else { { checkAttributeStringCoercion(value, attributeName); } @@ -3551,6 +3558,23 @@ var reusableSVGContainer; var setInnerHTML = createMicrosoftUnsafeLocalFunction(function(node, html) { if (node.namespaceURI === SVG_NAMESPACE) { + { + if (enableTrustedTypesIntegration) { + // TODO: reconsider the text of this warning and when it should show + // before enabling the feature flag. + if (typeof trustedTypes !== "undefined") { + error( + "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." + ); + } + } + } + if (!("innerHTML" in node)) { // 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 @@ -5286,6 +5310,7 @@ function validateProperties$2(type, props, eventRegistry) { } var didWarnInvalidHydration = false; +var didWarnScriptTags = false; var DANGEROUSLY_SET_INNER_HTML = "dangerouslySetInnerHTML"; var SUPPRESS_CONTENT_EDITABLE_WARNING = "suppressContentEditableWarning"; var SUPPRESS_HYDRATION_WARNING = "suppressHydrationWarning"; @@ -5600,6 +5625,19 @@ function createElement(type, props, rootContainerElement, parentNamespace) { // set to true and it does not execute var div = ownerDocument.createElement("div"); + { + if (enableTrustedTypesIntegration && !didWarnScriptTags) { + error( + "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 = "