앱 렌더링 html 엔티티(예: 앰퍼샌드)를 이스케이프로 응답

앱 렌더링 html 엔티티(예: 앰퍼샌드)를 이스케이프로 응답

워드프레스 페이지에 리액트 앱이 내장되어 있습니다.JSON API에서 콘텐츠를 가져와 다양한 영역에 표시합니다.

문제는 api에서 나오는 모든 텍스트 콘텐츠가 이스케이프 문자로 표시되는 것입니다.&에 앰퍼샌드의 위치를 나타냅니다.

내 워드프레스 페이지에는<meta charSet="utf-8" />보통 변환은 예상되지만 React 콘텐츠에는 영향을 주지 않습니다.렌더링이 React 내에서 이루어지기 때문인가요?UTF-8을 사용하려면 어떤 경우에 React를 설정해야 합니까?

HTML(엔티티 포함)은 표현식으로 렌더링될 때 문자열로 렌더링됩니다.

{htmlString}

HTML을 해석하기 위해서는 다음과 같은 방법이 있습니다.

<span dangerouslySetInnerHTML={{__html: htmlString }} />

이름에서 알 수 있듯이 안전하지 않고 일반적으로 피해야 합니다.신뢰할 수 없는 소스 또는 악용될 수 있는 소스로부터 문자열이 오는 경우 클라이언트에 악성 코드가 렌더링될 수 있습니다.

바람직한 방법은 다음과 같이 엔티티를 구체적으로 디코딩하는 것입니다.

import { Html5Entities } from 'html-entities';
const htmlEntities = new Html5Entities();

...

{htmlEntities.decode(htmlString)}

가능하면 HTML 엔티티를 저장하지 않음으로써 이 문제를 방지할 수 있습니다.

언급URL : https://stackoverflow.com/questions/52467082/react-app-rendering-html-entities-such-as-ampersand-as-escaped