[Fizz] escape <style> textContent as css (#28870)
style text content has historically been escaped as HTML which is non-sensical and often leads users to using dangerouslySetInnerHTML as a matter of course. While rendering untrusted style rules is a security risk React doesn't really provide any special protection here and forcing users to use a completely unescaped API is if anything worse. So this PR updates the style escaping rules for Fizz to only escape the text content to ensure the tag scope cannot be closed early. This is accomplished by encoding "s" and "S" as hexadecimal unicode representation "\73 " and "\53 " respectively when found within a sequence like </style>. We have to be careful to support casing here just like with the script closing tag regex for bootstrap scripts.
Josh Story committed
Apr 18, 2024 at 17:24 UTC
aead514db2808a2e82c128aa4db459939ab88b58
2 files changed
+72
-2
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+22
-2
@@ -2669,6 +2669,26 @@ function pushStyle(
2669
}
2670
}
2671
2672
+/**
2673
+ * This escaping function is designed to work with style tag textContent only.
2674
+ *
2675
+ * While untrusted style content should be made safe before using this api it will
2676
+ * ensure that the style cannot be early terminated or never terminated state
2677
+ */
2678
+function escapeStyleTextContent(styleText: string) {
2679
+ if (__DEV__) {
2680
+ checkHtmlStringCoercion(styleText);
2681
+ }
2682
+ return ('' + styleText).replace(styleRegex, styleReplacer);
2683
+}
2684
+const styleRegex = /(<\/|<)(s)(tyle)/gi;
2685
+const styleReplacer = (
2686
+ match: string,
2687
+ prefix: string,
2688
+ s: string,
2689
+ suffix: string,
2690
+) => `${prefix}${s === 's' ? '\\73 ' : '\\53 '}${suffix}`;
2691
+
2692
function pushStyleImpl(
2693
target: Array<Chunk | PrecomputedChunk>,
2694
props: Object,
@@ -2710,7 +2730,7 @@ function pushStyleImpl(
2730
child !== undefined
2731
) {
2732
// eslint-disable-next-line react-internal/safe-string-coercion
2713
- target.push(stringToChunk(escapeTextForBrowser('' + child)));
2733
+ target.push(stringToChunk(escapeStyleTextContent(child)));
2734
}
2735
pushInnerHTML(target, innerHTML, children);
2736
target.push(endChunkForTag('style'));
@@ -2752,7 +2772,7 @@ function pushStyleContents(
2772
child !== undefined
2773
) {
2774
// eslint-disable-next-line react-internal/safe-string-coercion
2755
- target.push(stringToChunk(escapeTextForBrowser('' + child)));
2775
+ target.push(stringToChunk(escapeStyleTextContent(child)));
2776
}
2777
pushInnerHTML(target, innerHTML, children);
2778
return;
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+50
@@ -4256,6 +4256,56 @@ describe('ReactDOMFizzServer', () => {
4256
});
4257
});
4258
4259
+ describe('<style> textContent escaping', () => {
4260
+ it('the "S" in "</?[Ss]style" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
4261
+ await act(() => {
4262
+ const {pipe} = renderToPipeableStream(
4263
+ <style>{`
4264
+ .foo::after {
4265
+ content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
4266
+ }
4267
+ body {
4268
+ background-color: blue;
4269
+ }
4270
+ `}</style>,
4271
+ );
4272
+ pipe(writable);
4273
+ });
4274
+ expect(window.getComputedStyle(document.body).backgroundColor).toMatch(
4275
+ 'blue',
4276
+ );
4277
+ });
4278
+
4279
+ it('the "S" in "</?[Ss]style" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters inside hoistable style tags', async () => {
4280
+ await act(() => {
4281
+ const {pipe} = renderToPipeableStream(
4282
+ <>
4283
+ <style href="foo" precedence="default">{`
4284
+ .foo::after {
4285
+ content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
4286
+ }
4287
+ body {
4288
+ background-color: blue;
4289
+ }
4290
+ `}</style>
4291
+ <style href="bar" precedence="default">{`
4292
+ .foo::after {
4293
+ content: 'sSsS</style></Style></StYlE><style><Style>sSsS'
4294
+ }
4295
+ body {
4296
+ background-color: red;
4297
+ }
4298
+ `}</style>
4299
+ </>,
4300
+ );
4301
+ pipe(writable);
4302
+ });
4303
+ expect(window.getComputedStyle(document.body).backgroundColor).toMatch(
4304
+ 'red',
4305
+ );
4306
+ });
4307
+ });
4308
+
4309
// @gate enableFizzExternalRuntime
4310
it('supports option to load runtime as an external script', async () => {
4311
await act(() => {