Bug: Server renders inconsistent attribute values about react

[1aron]

Is there any reason to specifically encode these characters?

react/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js

Lines 22 to 50 in 493610f

	it('ampersand is escaped inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr="&" />);
	expect(response).toMatch('<img data-attr="&amp;"/>');
	});
	it('double quote is escaped inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr={'"'} />);
	expect(response).toMatch('<img data-attr="&quot;"/>');
	});
	it('single quote is escaped inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr="'" />);
	expect(response).toMatch('<img data-attr="&#x27;"/>');
	});
	it('greater than entity is escaped inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr=">" />);
	expect(response).toMatch('<img data-attr="&gt;"/>');
	});
	it('lower than entity is escaped inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr="<" />);
	expect(response).toMatch('<img data-attr="&lt;"/>');
	});
	it('number is escaped to string inside attributes', () => {
	const response = ReactDOMServer.renderToString(<img data-attr={42} />);
	expect(response).toMatch('<img data-attr="42"/>');
	});

[Janelaxagh]

@1aron
It seems to me that the best way to balance security and correctness in React is to use alternative styling methods, such as classes or inline styles, instead of CSS selectors that depend on attribute values. This avoids potential security issues associated with code injection, while at the same time providing more reliable and predictable style behavior.

[Janelaxagh]

---

It seems that you have a problem with character encoding when using renderToString in React v18.1.0. It automatically encodes special characters such as > in their HTML texts, which leads to incorrect configuration of CSS elements in your case.

This may be an undesirable change, perhaps if you use special characters in the class for styles or CSS selectors. Your class mt:0>section should not be automated in the mt:0>section, as this may lead to an irreversible change in the structure.

You can address this issue by using dangerouslySetInnerHTML to output unescaped HTML characters:

import React from 'react';
import { renderToString } from 'react-dom/server';

export default function App() {
  // Use dangerouslySetInnerHTML to output unescaped HTML characters
  const htmlString = renderToString(
    <div dangerouslySetInnerHTML={{ __html: '<div class="mt:0>div"></div>' }}></div>
  );

  return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>;
}

---

[1aron]

@Janelaxagh I understand that escapeHTML somehow prevents XSS, but does it seem legal to write decoded characters in attribute values? Sometimes, we will select the target element through the CSS attribute selector. Still, when the attribute value of the target element is encoded or decoded, the CSS rules that can be selected normally will become invalid.

I don't know how React balances correctness and safety.

[1aron]

@Janelaxagh Thank you for your careful reply. I just discovered that we only need to decode the class name when getting it to keep the CSS selection consistent.

master-co/css@13e07c7#diff-4645721ad298aa15015081e24138aa708929aac26a0ad325b31735c8b04c7f1c

[Janelaxagh]

@1aron
It's great that you found a solution! This is a great find and will definitely make working with CSS fetching easier.