Add trusted types to react on server side

[Siegrift]

Trusted Types

Trusted Types (spec, introductory article) is a new experimental DOM API implemented within the WICG , with a working Chrome implementation.

The API creates a few new objects available on the global object in the browser, like most other web APIs (impl in TS and in Closure compiler).

Under certain conditions, controlled by a HTTP header (analogous to Content-Security-Policy behavior), the API can enable the enforcement - then it changes the signature of several DOM API functions and property setters, such that they accept specific object types, and reject strings. Colloquially, DOM API becomes strongly typed.

For example, with Trusted Types Element.innerHTML property setter accepts a TrustedHTML object.

Trusted Type objects stringify to their inner value. This API shape is a deliberate choice that enables existing web applications and libraries to gradually migrate from strings to Trusted Types without breaking functionality. In our example, it makes it possible to write the following:

const policy = TrustedTypes.createPolicy('foo', { 
  createHTML: (s) => { /* some validation*/; return s} 
});

const trustedHTML = policy.createHTML('bar');
anElement.innerHTML = trustedHTML

anElement.innerHTML === 'bar'

The above code works regardless if the Trusted Types enforcement is enabled or not.

Reading from the DOM is unaffected, so Element.innerHTML getter returns a string. That's for practical reasons -- web applications read from DOM more often than they write to it, and only writing exposes the application to DOM XSS risks. Typing only the setters allows us to secure web applications with minimal code changes.

Adding Trusted Types to React for server side

Unfortunately, there are no Trusted Types (TT) on server side. However, it’s really easy to introduce a reflected xss attack via server side rendering. Markup rendered on server side is rendered to string (without any DOM emulation) and returned as a response from the server and there is no way TT can prevent this attack. This creates inconsistency when rendering on client and server side (client side would fail with TT violation), which shouldn’t happen. Also, if application uses hot reloading, you will get a TT error after each reload (because React templates are re-rendered to DOM, this time on client).

This PR enables applications to use Trusted Types on server side. Functions inside ReactDOMNodeStreamRenderer.js and ReactDOMStringRenderer.js in react-dom/server package now accept optional third parameter with trusted types polyfill implementation. If TT are provided, they are enforced, otherwise no behavioral change is made. If TT are enforced, we check whether the values are trusted before creating the markup from them and throw an error otherwise.

Reference

• Add trusted types to react on client side

[sizebot]

ReactDOM: size: 🔺+2.1%, gzip: 🔺+2.1%

Details of bundled changes.

Comparing: 507f0fb...df6577b

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.profiling.min.js	0.0%	0.0%	115.18 KB	115.18 KB	36.31 KB	36.31 KB	NODE_PROFILING
react-dom-server.browser.development.js	+0.9%	+0.9%	140.9 KB	142.23 KB	36.96 KB	37.28 KB	UMD_DEV
react-dom-server.browser.production.min.js	🔺+2.1%	🔺+2.1%	19.74 KB	20.15 KB	7.34 KB	7.5 KB	UMD_PROD
react-dom-test-utils.production.min.js	0.0%	0.0%	11.2 KB	11.2 KB	4.15 KB	4.15 KB	UMD_PROD
react-dom-test-utils.development.js	0.0%	-0.0%	55.47 KB	55.47 KB	15.41 KB	15.4 KB	NODE_DEV
react-dom-test-utils.production.min.js	0.0%	-0.0%	10.98 KB	10.98 KB	4.08 KB	4.08 KB	NODE_PROD
react-dom-unstable-fizz.browser.production.min.js	0.0%	🔺+0.2%	1.04 KB	1.04 KB	632 B	633 B	NODE_PROD
react-dom.production.min.js	0.0%	0.0%	111.58 KB	111.58 KB	35.99 KB	35.99 KB	UMD_PROD
react-dom-server.node.development.js	+1.0%	+0.9%	138.05 KB	139.46 KB	36.24 KB	36.55 KB	NODE_DEV
react-dom-server.node.production.min.js	🔺+2.1%	🔺+2.4%	20.07 KB	20.49 KB	7.49 KB	7.66 KB	NODE_PROD
react-dom-server.browser.development.js	+1.0%	+0.9%	137.03 KB	138.36 KB	36.02 KB	36.33 KB	NODE_DEV
react-dom-server.browser.production.min.js	🔺+2.1%	🔺+2.4%	19.66 KB	20.07 KB	7.33 KB	7.5 KB	NODE_PROD
react-dom-unstable-native-dependencies.production.min.js	0.0%	0.0%	10.75 KB	10.75 KB	3.68 KB	3.68 KB	UMD_PROD
ReactDOMServer-dev.js	+1.1%	+1.0%	141.34 KB	142.83 KB	35.6 KB	35.97 KB	FB_WWW_DEV
ReactDOMServer-prod.js	🔺+5.3%	🔺+2.6%	48.13 KB	50.69 KB	11.05 KB	11.33 KB	FB_WWW_PROD
react-dom-unstable-native-dependencies.production.min.js	0.0%	0.0%	10.49 KB	10.49 KB	3.58 KB	3.58 KB	NODE_PROD

Generated by 🚫 dangerJS

[koto]

We've just published a trusted-types npm module (1.1.1) that implements getPropertyType.

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[gaearon]

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.