Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't stringify DOM attributes #19588

Closed
wants to merge 5 commits into from
Closed

Conversation

koto
Copy link
Contributor

@koto koto commented Aug 11, 2020

Edit: Updated to reflect the recent changes.

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes #19587.

Summary

The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

Test Plan

Appropriate tests are added.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 11, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bd2ff11:

Sandbox Source
React Configuration

@sizebot
Copy link

sizebot commented Aug 11, 2020

Comparing: 9212d99...5f414e7

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.01% 127.08 kB 127.09 kB = 40.74 kB 40.74 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.01% 129.89 kB 129.90 kB = 41.67 kB 41.67 kB
facebook-www/ReactDOM-prod.classic.js +0.04% 405.00 kB 405.15 kB +0.01% 74.92 kB 74.93 kB
facebook-www/ReactDOM-prod.modern.js +0.04% 393.35 kB 393.50 kB +0.02% 73.10 kB 73.12 kB
facebook-www/ReactDOMForked-prod.classic.js +0.04% 405.00 kB 405.15 kB +0.01% 74.93 kB 74.93 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServer-prod.classic.js +0.84% 48.21 kB 48.61 kB +0.82% 11.24 kB 11.33 kB
facebook-www/ReactDOMServer-prod.modern.js +0.54% 72.24 kB 72.62 kB +0.59% 14.86 kB 14.95 kB

Generated by 🚫 dangerJS against 5f414e7

@sizebot
Copy link

sizebot commented Aug 11, 2020

Details of bundled changes.

Comparing: ce37bfa...bd2ff11

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 912.84 KB 913.76 KB 207.39 KB 207.66 KB NODE_DEV
ReactDOMForked-prod.js 🔺+0.2% 🔺+0.2% 380.03 KB 380.7 KB 70.13 KB 70.26 KB FB_WWW_PROD
react-dom-server.node.development.js +0.1% +0.1% 138.51 KB 138.64 KB 36.61 KB 36.66 KB NODE_DEV
react-dom.production.min.js 🔺+0.2% 🔺+0.2% 123.88 KB 124.1 KB 39.68 KB 39.74 KB NODE_PROD
ReactDOMForked-profiling.js +0.2% +0.2% 395.04 KB 395.71 KB 72.9 KB 73.03 KB FB_WWW_PROFILING
react-dom-server.browser.development.js +0.1% +0.1% 144.69 KB 144.83 KB 36.8 KB 36.86 KB UMD_DEV
react-dom-server.node.production.min.js 0.0% 0.0% 20.66 KB 20.66 KB 7.65 KB 7.65 KB NODE_PROD
react-dom-test-utils.production.min.js 0.0% 0.0% 12.87 KB 12.87 KB 5.05 KB 5.05 KB UMD_PROD
ReactDOMTesting-dev.js +0.1% +0.1% 921.05 KB 922 KB 207.15 KB 207.42 KB FB_WWW_DEV
react-dom-test-utils.development.js 0.0% 0.0% 60.86 KB 60.86 KB 17.65 KB 17.65 KB NODE_DEV
ReactDOMTesting-prod.js 🔺+0.2% 🔺+0.2% 379.19 KB 379.77 KB 71.27 KB 71.38 KB FB_WWW_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 5.52 KB 5.52 KB 1.84 KB 1.84 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 12.72 KB 12.72 KB 4.97 KB 4.97 KB NODE_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 704 B 705 B UMD_PROD
react-dom.development.js +0.1% +0.1% 959.04 KB 960.03 KB 209.94 KB 210.21 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.01 KB 1.01 KB 615 B 616 B NODE_PROD
react-dom.production.min.js 🔺+0.2% 🔺+0.2% 123.76 KB 123.98 KB 40.4 KB 40.5 KB UMD_PROD
react-dom.profiling.min.js +0.2% +0.2% 129.02 KB 129.24 KB 42.04 KB 42.12 KB UMD_PROFILING
ReactDOMForked-dev.js +0.1% +0.1% 967.77 KB 968.7 KB 215.33 KB 215.6 KB FB_WWW_DEV
react-dom.profiling.min.js +0.2% +0.2% 129.33 KB 129.55 KB 41.3 KB 41.37 KB NODE_PROFILING
ReactDOM-dev.js +0.1% +0.1% 960.87 KB 961.79 KB 214.43 KB 214.71 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.2% 🔺+0.2% 377.05 KB 377.73 KB 69.54 KB 69.67 KB FB_WWW_PROD
react-dom-server.browser.development.js +0.1% +0.1% 137.24 KB 137.37 KB 36.36 KB 36.41 KB NODE_DEV
ReactDOM-profiling.js +0.2% +0.2% 391.19 KB 391.87 KB 72.22 KB 72.35 KB FB_WWW_PROFILING
react-dom-server.browser.production.min.js 0.0% 0.0% 20.24 KB 20.24 KB 7.5 KB 7.5 KB NODE_PROD
ReactDOMServer-dev.js +0.2% +0.2% 142.94 KB 143.18 KB 36.34 KB 36.42 KB FB_WWW_DEV
ReactDOMServer-prod.js 🔺+0.8% 🔺+0.7% 46.44 KB 46.83 KB 10.83 KB 10.91 KB FB_WWW_PROD

ReactDOM: size: 0.0%, gzip: 0.0%

Size changes (experimental)

Generated by 🚫 dangerJS against bd2ff11

@koto
Copy link
Contributor Author

koto commented Dec 2, 2020

// cc @gaearon

This is basically a way to make React apps mostly TT-compatible without touching the feature flag (and no breakage). Should I rebase this, or would a better course of action be to move the TT support from behind a flag? Are the plans still to enable TT in 18?

koto and others added 4 commits June 15, 2021 14:00
… stringify attributes), instead of Trusted Types feature flag.

Added fixture tests for the logic.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is and immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.
Head commit had a "broken" (but not really) CircleCI job and CircleCI
doesn't give me a way to clear/restart it. So I'm doing this.
@koto koto force-pushed the no-stringification branch 2 times, most recently from 23fdae0 to 0f104ac Compare June 15, 2021 12:07
@koto koto changed the title Gate DOM attribute stringification on browser bug detection logic Don't stringify DOM attributes Jun 15, 2021
@koto
Copy link
Contributor Author

koto commented Jun 28, 2021

@gaearon Hey, I think I covered all the bases here. As advised, it only has extra logic (TT) when enableTrustedTypesIntegration is enabled, otherwise it should only just have a functional change in IE9. I wanted to make sure we have a chance for a merge before the next major release :)

@koto
Copy link
Contributor Author

koto commented Oct 6, 2021

Friendly ping @gaearon, I'm happy to resolve the conflicts if the approach is correct.

@melloware
Copy link

+1 for adding this in React 18.

@sebmarkbage sebmarkbage deleted the branch facebook:master October 20, 2022 20:41
@gaearon
Copy link
Collaborator

gaearon commented Oct 20, 2022

Apologies for closing. We've accidentally pushed a master branch to the repo (due to an old fork), then deleted it, and this lead to a bunch of PRs getting auto-closed. GitHub seems confused and unfortunately does not offer a way to reopen this against main. I can't promise when we'll get to reviewing, but if there is still interest in this PR, we'd appreciate a resubmit.

onionymous added a commit to onionymous/react that referenced this pull request Dec 28, 2023
onionymous added a commit to onionymous/react that referenced this pull request Dec 28, 2023
onionymous added a commit to onionymous/react that referenced this pull request Dec 28, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
onionymous added a commit to onionymous/react that referenced this pull request Dec 28, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
onionymous added a commit to onionymous/react that referenced this pull request Dec 28, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
onionymous added a commit to onionymous/react that referenced this pull request Dec 29, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
onionymous added a commit to onionymous/react that referenced this pull request Dec 29, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
onionymous added a commit to onionymous/react that referenced this pull request Dec 29, 2023
Summary: This is a resubmit of facebook#19588 since it was never merged and closed in error. However, the issue it fixes is still relevant and will unblock rollout of the TT feature flag internally. Copying the original PR message here:

-----

Instead of using Trusted Types feature flag, assume that the browser would stringify the attributes, so that React-DOM doesn't have to (making interpolation into node attributes "just work" regardless of the Trusted Types enforcement and availability) . Currently only IE<=9 does not stringify attributes. This PR implicitly drops the support for IE 9.

For attributes undergoing sanitizeURL, the value is stringified in sanitizeURL function, unless enableTrustedTypesIntegration is true and the value is an immutable TrustedScriptURL value. This ascertains that objects with custom toString() function cannot be used to bypass the sanitization (now that DOMPropertyOperations don't stringify on their own).

Fixes facebook#19587.

## Summary
The PR decouples the attribute stringification from the Trusted Types logic, dropping the former completely. It was only used as a workaround for a IE <=9 browser bug. A small improvement for Trusted Types would be that it moves the most important functionality from behind the flag - i.e. allows most React apps to pass trusted types into DOM sinks without enabling the feature flag.

Some rare functionality and dev warnings are still gated on the flag, but those are unrelated to the stringification issue.

## Test Plan
Appropriate tests are added.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DOM attribute stringification fixes
8 participants