Skip to content

Commit

Permalink
Fix escaping in ReactDOMInput code (facebook#26630)
Browse files Browse the repository at this point in the history
JSON.stringify isn't the right thing here. Luckily this doesn't look to have any security impact.
  • Loading branch information
sophiebits authored Apr 24, 2023
1 parent 2fa6323 commit 9ee7964
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 19 deletions.
5 changes: 4 additions & 1 deletion packages/react-dom-bindings/src/client/ReactDOMInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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++) {
Expand Down
25 changes: 7 additions & 18 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ import {
getValueDescriptorExpectingObjectForWarning,
getValueDescriptorExpectingEnumForWarning,
} from '../shared/ReactDOMResourceValidation';
import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes';

export type Type = string;
export type Props = {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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) + ' ',
);
}

0 comments on commit 9ee7964

Please sign in to comment.