Remove special casing of toString values when enableTrustedTypesIntegration (#17774)
* Remove toString of dangerouslySetInnerHTML As far as I can tell, the toString call was added here: https://github.com/facebook/react/commit/caae627cd557812d28d11237b34bff6c661ea8bc#diff-5574f655d491348f422bca600ff6711dR887 It was never really needed. Subsequently when we added Trusted Types, this needed to be changed to a special call but we really should just always let it pass through. * Remove special casing of toString values when enableTrustedTypesIntegration As far as I can tell, we only toString in user space because of IE8/9. We don't really support IE8/9 anymore and by the time this flag is on, we should be able to deprecate it. Unless this is also an issue in IE11. I haven't tested yet.
Sebastian Markbåge committed
Jan 8, 2020 at 14:40 UTC
18875b240131273c8e3dd213341edc159150d80e
4 files changed
+16
-77
packages/react-dom/src/client/DOMPropertyOperations.js
+15
-7
@@ -16,9 +16,10 @@ import {
16
OVERLOADED_BOOLEAN,
17
} from '../shared/DOMProperty';
18
import sanitizeURL from '../shared/sanitizeURL';
19
-import {toStringOrTrustedType} from './ToStringValue';
20
-import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
21
-import {setAttribute, setAttributeNS} from './setAttribute';
19
+import {
20
+ disableJavaScriptURLs,
21
+ enableTrustedTypesIntegration,
22
+} from 'shared/ReactFeatureFlags';
23
24
import type {PropertyInfo} from '../shared/DOMProperty';
25
@@ -144,7 +145,10 @@ export function setValueForProperty(
145
if (value === null) {
146
node.removeAttribute(attributeName);
147
} else {
147
- setAttribute(node, attributeName, toStringOrTrustedType(value));
148
+ node.setAttribute(
149
+ attributeName,
150
+ enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
151
+ );
152
}
153
}
154
return;
@@ -176,15 +180,19 @@ export function setValueForProperty(
180
} else {
181
// `setAttribute` with objects becomes only `[object]` in IE8/9,
182
// ('' + value) makes it output the correct toString()-value.
179
- attributeValue = toStringOrTrustedType(value);
183
+ if (enableTrustedTypesIntegration) {
184
+ attributeValue = (value: any);
185
+ } else {
186
+ attributeValue = '' + (value: any);
187
+ }
188
if (propertyInfo.sanitizeURL) {
189
sanitizeURL(attributeValue.toString());
190
}
191
}
192
if (attributeNamespace) {
185
- setAttributeNS(node, attributeNamespace, attributeName, attributeValue);
193
+ node.setAttributeNS(attributeNamespace, attributeName, attributeValue);
194
} else {
187
- setAttribute(node, attributeName, attributeValue);
195
+ node.setAttribute(attributeName, attributeValue);
196
}
197
}
198
}
packages/react-dom/src/client/ToStringValue.js
-33
@@ -7,8 +7,6 @@
7
* @flow
8
*/
9
10
-import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
11
-
10
export opaque type ToStringValue =
11
| boolean
12
| number
@@ -37,34 +35,3 @@ export function getToStringValue(value: mixed): ToStringValue {
35
return '';
36
}
37
}
40
-
41
-/** Trusted value is a wrapper for "safe" values which can be assigned to DOM execution sinks. */
42
-export opaque type TrustedValue: {toString(): string, valueOf(): string} = {
43
- toString(): string,
44
- valueOf(): string,
45
-};
46
-
47
-/**
48
- * We allow passing objects with toString method as element attributes or in dangerouslySetInnerHTML
49
- * and we do validations that the value is safe. Once we do validation we want to use the validated
50
- * value instead of the object (because object.toString may return something else on next call).
51
- *
52
- * If application uses Trusted Types we don't stringify trusted values, but preserve them as objects.
53
- */
54
-export let toStringOrTrustedType: any => string | TrustedValue = toString;
55
-if (enableTrustedTypesIntegration && typeof trustedTypes !== 'undefined') {
56
- toStringOrTrustedType = value => {
57
- if (
58
- typeof value === 'object' &&
59
- (trustedTypes.isHTML(value) ||
60
- trustedTypes.isScript(value) ||
61
- trustedTypes.isScriptURL(value) ||
62
- /* TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204 */
63
- (trustedTypes.isURL && trustedTypes.isURL(value)))
64
- ) {
65
- // Pass Trusted Types through.
66
- return value;
67
- }
68
- return toString(value);
69
- };
70
-}
packages/react-dom/src/client/setAttribute.js
deleted
-35
@@ -1,35 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-import type {TrustedValue} from './ToStringValue';
11
-
12
-/**
13
- * Set attribute for a node. The attribute value can be either string or
14
- * Trusted value (if application uses Trusted Types).
15
- */
16
-export function setAttribute(
17
- node: Element,
18
- attributeName: string,
19
- attributeValue: string | TrustedValue,
20
-) {
21
- node.setAttribute(attributeName, (attributeValue: any));
22
-}
23
-
24
-/**
25
- * Set attribute with namespace for a node. The attribute value can be either string or
26
- * Trusted value (if application uses Trusted Types).
27
- */
28
-export function setAttributeNS(
29
- node: Element,
30
- attributeNamespace: string,
31
- attributeName: string,
32
- attributeValue: string | TrustedValue,
33
-) {
34
- node.setAttributeNS(attributeNamespace, attributeName, (attributeValue: any));
35
-}
packages/react-dom/src/client/setInnerHTML.js
+1
-2
@@ -9,7 +9,6 @@
9
10
import {Namespaces} from '../shared/DOMNamespaces';
11
import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
12
-import type {TrustedValue} from './ToStringValue';
12
import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
13
14
// SVG temp container for IE lacking innerHTML
@@ -24,7 +23,7 @@ let reusableSVGContainer;
23
*/
24
const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
25
node: Element,
27
- html: string | TrustedValue,
26
+ html: {valueOf(): {toString(): string}},
27
): void {
28
if (node.namespaceURI === Namespaces.svg) {
29
if (__DEV__) {