Repository: facebook/react
Pull request: Fix escaping in ReactDOMInput code

JSON.stringify isn't the right thing here. Luckily this doesn't look to have any security impact.

Changed files:
filename: packages/react-dom-bindings/src/client/ReactDOMInput.js
patch: @@ -18,6 +18,7 @@ import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
+import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
 
 let didWarnValueDefaultValue = false;
 let didWarnCheckedDefaultChecked = false;
@@ -364,7 +365,9 @@ export function restoreControlledInputState(element: Element, props: Object) {
       checkAttributeStringCoercion(name, 'name');
     }
     const group = queryRoot.querySelectorAll(
-      'input[name=' + JSON.stringify('' + name) + '][type="radio"]',
+      'input[name="' +
+        escapeSelectorAttributeValueInsideDoubleQuotes('' + name) +
+        '"][type="radio"]',
     );
 
     for (let i = 0; i < group.length; i++) {

filename: packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
patch: @@ -102,6 +102,7 @@ import {
   getValueDescriptorExpectingObjectForWarning,
   getValueDescriptorExpectingEnumForWarning,
 } from '../shared/ReactDOMResourceValidation';
+import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';
 
 export type Type = string;
 export type Props = {
@@ -2478,11 +2479,13 @@ function styleTagPropsFromRawProps(
 function getStyleKey(href: string) {
   const limitedEscapedHref =
     escapeSelectorAttributeValueInsideDoubleQuotes(href);
-  return `href~="${limitedEscapedHref}"`;
+  return `href="${limitedEscapedHref}"`;
 }
 
-function getStyleTagSelectorFromKey(key: string) {
-  return `style[data-${key}]`;
+function getStyleTagSelector(href: string) {
+  const limitedEscapedHref =
+    escapeSelectorAttributeValueInsideDoubleQuotes(href);
+  return `style[data-href~="${limitedEscapedHref}"]`;
 }
 
 function getStylesheetSelectorFromKey(key: string) {
@@ -2567,11 +2570,10 @@ export function acquireResource(
     switch (resource.type) {
       case 'style': {
         const qualifiedProps: StyleTagQualifyingProps = props;
-        const key = getStyleKey(qualifiedProps.href);
 
         // Attempt to hydrate instance from DOM
         let instance: null | Instance = hoistableRoot.querySelector(
-          getStyleTagSelectorFromKey(key),
+          getStyleTagSelector(qualifiedProps.href),
         );
         if (instance) {
           resource.instance = instance;
@@ -2952,19 +2954,6 @@ export function unmountHoistable(instance: Instance): void {
   (instance.parentNode: any).removeChild(instance);
 }
 
-// When passing user input into querySelector(All) the embedded string must not alter
-// the semantics of the query. This escape function is safe to use when we know the
-// provided value is going to be wrapped in double quotes as part of an attribute selector
-// Do not use it anywhere else
-// we escape double quotes and backslashes
-const escapeSelectorAttributeValueInsideDoubleQuotesRegex = /[\n\"\\]/g;
-function escapeSelectorAttributeValueInsideDoubleQuotes(value: string): string {
-  return value.replace(
-    escapeSelectorAttributeValueInsideDoubleQuotesRegex,
-    ch => '\\' + ch.charCodeAt(0).toString(16),
-  );
-}
-
 export function isHostHoistableType(
   type: string,
   props: RawProps,

filename: packages/react-dom-bindings/src/client/escapeSelectorAttributeValueInsideDoubleQuotes.js
patch: @@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// When passing user input into querySelector(All) the embedded string must not alter
+// the semantics of the query. This escape function is safe to use when we know the
+// provided value is going to be wrapped in double quotes as part of an attribute selector
+// Do not use it anywhere else
+// we escape double quotes and backslashes
+const escapeSelectorAttributeValueInsideDoubleQuotesRegex = /[\n\"\\]/g;
+export default function escapeSelectorAttributeValueInsideDoubleQuotes(
+  value: string,
+): string {
+  return value.replace(
+    escapeSelectorAttributeValueInsideDoubleQuotesRegex,
+    ch => '\\' + ch.charCodeAt(0).toString(16) + ' ',
+  );
+}