HTML escaping in React

小云云
Release: 2017-12-06 14:17:39
Original
5499 people have browsed it

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>
Copy after login
Copy after login

Error output

版权 &#169;
Copy after login
Copy after login

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>
Copy after login
Copy after login

Error output

版权 &#169;
Copy after login
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template