HTML escaping in React

To output fixed content in JSX, directly use UTF-8 characters {code...}, use HTML escape characters {code...} or decimal escape characters {code...} Escape of dynamic content, but if you add a layer of curly brackets outside, in order to prevent XSS from escaping the escaped character entities again, in this article we will share with you the HTML escaping method in React.

1. Use UTF-8 characters directly

   <p>版权 ©</p>

   Copy after login

   Copy after login

2. Use HTML escape characters

   <p>版权 &copy;</p>

   Copy after login

   Copy after login

   or Decimal escape characters

   <p>版权 &#169;</p>

   Copy after login

   Copy after login

Escape of dynamic content

But if you add a layer of curly brackets outside, react will use the escaped characters to prevent xss Character entities are escaped again

React will escape all strings to be displayed to the DOM to prevent XSS. Therefore, if JSX contains escaped entity characters, such as © (©), it will not be displayed correctly in the final DOM because React automatically escapes the special characters in ©.

<p>{'版权 &#169;'}</p>

Error output

版权 ©

Correct writing:

1. Using UTF-8 characters directly can still output correctly

   <p>{'版权 ©'}</p>

   Copy after login

   Copy after login

2. The safe way is to use the corresponding Unicode code

   <p>{'版权 \u00a9'}</p>

   Copy after login

   Copy after login

3. Use fromCharCode

   <p>{'版权 ' + String.fromCharCode(169)}</p>

   Copy after login

   Copy after login

4. Use array assembly

   <p>{['版权 ', <span>&#169;</span>]}</p>

   Copy after login

   Copy after login

5. Use dangerouslySetInnerHTML to avoid React escape characters

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

   Copy after login

   Copy after login

Reference

1. JSX Gotchas

2. Deep into the react technology stack

Output fixed content in JSX

1. Use UTF-8 characters directly

   <p>版权 ©</p>

   Copy after login

   Copy after login

2. Use HTML escape characters

   <p>版权 &copy;</p>

   Copy after login

   Copy after login

   or decimal escape characters

   <p>版权 &#169;</p>

   Copy after login

   Copy after login

Escape of dynamic content

But if you add a layer of braces outside, react will escape the escaped character entity again in order to prevent xss

React will escape all strings to be displayed in the DOM to prevent XSS. Therefore, if JSX contains escaped entity characters, such as © (©), it will not be displayed correctly in the final DOM because React automatically escapes the special characters in ©.

<p>{'版权 &#169;'}</p>

Error output

版权 ©

Correct writing:

1. Using UTF-8 characters directly can still output correctly

   <p>{'版权 ©'}</p>

   Copy after login

   Copy after login

2. The safe way is to use the corresponding Unicode code

   <p>{'版权 \u00a9'}</p>

   Copy after login

   Copy after login

3. Use fromCharCode

   <p>{'版权 ' + String.fromCharCode(169)}</p>

   Copy after login

   Copy after login

4. Use array assembly

   <p>{['版权 ', <span>&#169;</span>]}</p>

   Copy after login

   Copy after login

5. Use dangerouslySetInnerHTML to avoid React escape characters

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

   Copy after login

   Copy after login

The above content is the HTML escape writing method in React, I hope it can help everyone.

Related recommendations:

What are the ways to write components in React

The difference between setState in React and Preact

React event system knowledge

The above is the detailed content of HTML escaping in React. For more information, please follow other related articles on the PHP Chinese website!