Open GrantGryczan opened 2 years ago
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
bump
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
bump
I've used <style dangerouslySetInnerHTML={{__html: myStyle}} />
to avoid auto escaping. You just need to remember to escape the data yourself.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
bump
In general, only backslashes escape things in CSS, while HTML entities are only treated by CSS as plain text.
Despite this,
ReactDOMServer.renderToString
escapes HTML special characters (e.g.&
,<
,>
,"
,'
) into HTML entities (e.g.&
,<
, etc.) that are inside astyle
element, even if it makes the stylesheet invalid or transforms it to be different from what is intended in many cases. For example, when writing a CSS"string"
, it is transformed into"string"
, which is invalid CSS.Additionally, client-side,
ReactDOM.render
does not escape HTML special characters withinstyle
elements at all, even though it should be escaping<
and>
into\<
and\>
respectively (as it should on the server as well). Not doing this causes an inconsistency between client and server rendering in isomorphic apps. For me, this logs a warning in dev mode that looks like this:React version: 17.0.2
Steps To Reproduce
style
element anywhere in your app.ReactDOMServer.renderToString
on your app.Link to code example: https://jsfiddle.net/3qnsxept/
The current behavior
HTML special characters are escaped unnecessarily and/or incorrectly inside
style
elements outputted byReactDOMServer.renderToString
, often invalidating the stylesheet and/or making it inconsistent with what's rendered client-side.For example, the JSX
<style>{'body::before { content: "\</style>"; }'}</style>
currently outputs the HTML<style>body::before { content: "\</style>"; }</style>
server-side, which is invalid, and it outputs the HTML<style>{'body::before { content: "\</style>"; }'}</style>
client-side, which is inconsistent.The expected behavior
There should be no HTML escaping within
style
elements outputted byReactDOMServer.renderToString
, just likeReactDOM.render
. The only exception is that<
and>
withinstyle
elements should escape to\<
and\>
(if they are not already escaped) to avoid XSS, which is a change that should be implemented for both client-side and server-side rendering in order to support isomorphism.For example, the JSX
<style>{'body::before { content: "\</style>"; }'}</style>
should output the HTML<style>body::before { content: "\</style\>"; }</style>
both client-side and server-side.