집 > 기사 > 웹 프론트엔드 > React에서 HTML 이스케이프

React에서 HTML 이스케이프

小云云원래의: 2017-12-06 14:17:395500검색

UTF-8 문자 {code...}를 사용하여 JSX에서 직접 고정 콘텐츠를 출력합니다. HTML 이스케이프 문자 {code...} 또는 십진 이스케이프 문자 {code...}를 사용하여 동적 콘텐츠를 이스케이프하지만 레이어를 추가하는 경우 외부에 중괄호가 있으면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다. 이 기사에서는 React의 HTML 이스케이프 방법을 공유하겠습니다.

UTF-8 문자를 직접 사용
```
版权 ©
```
HTML 이스케이프 문자
```
版权 &copy;
```
또는 십진 이스케이프 문자
```
版权 &#169;
```

동적 콘텐츠 이스케이프

하지만 외부에 레이어를 추가하는 경우 중괄호를 사용하면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다.

React는 XSS를 방지하기 위해 DOM에 표시되는 모든 문자열을 이스케이프합니다. 따라서 JSX에 ©(©)와 같이 이스케이프된 엔터티 문자가 포함되어 있으면 React가 ©의 특수 문자를 자동으로 이스케이프하기 때문에 최종 DOM에 올바르게 표시되지 않습니다.

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

오류 출력

版权 &#169;

올바른 쓰기:

UTF-8 문자를 직접 사용해도 올바르게 출력될 수 있습니다.
```
{'版权 ©'}
```
안전한 방법은 해당 유니코드 코드를 사용하는 것입니다
```
{'版权 \u00a9'}
```
fromCharCode
rrre 에

배열 어셈블리를 사용하세요

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

dangerlySetInnerHTML을 사용하면 React 이스케이프 문자를 피할 수 있습니다
```
{['版权 ', &#169;]}
```

Reference

JSX Gotchas
React 기술 스택에 깊이

출력 JSX 고정 콘텐츠

UTF-8 문자를 직접 사용

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

HTML 이스케이프 문자
```
版权 ©
```
또는 십진 이스케이프 문자를 사용하세요
```
版权 &copy;
```

동적 콘텐츠의 이스케이프

그러나 외부인 경우 추가하는 경우 중괄호 레이어를 사용하면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다. React는 XSS를 방지하기 위해 DOM에 표시되는 모든 문자열을 이스케이프합니다. 따라서 JSX에 ©(©)와 같이 이스케이프된 엔터티 문자가 포함되어 있으면 React가 ©의 특수 문자를 자동으로 이스케이프하기 때문에 최종 DOM에 올바르게 표시되지 않습니다.

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