React에서 HTML 문자열을 JSX로 안전하게 렌더링하는 방법은 무엇입니까?

React에서 HTML 문자열을 렌더링 가능한 JSX로 변환

React 딜레마 소개

표시할 때 ReactJS에서 AJAX 요청을 통해 수신된 데이터에서 개발자는 종종 일반적인 문제에 직면합니다. 렌더링된 HTML 대신 일반 텍스트로 나타납니다. 이는 XSS(교차 사이트 스크립팅) 취약점을 방지하기 위해 HTML 콘텐츠를 이스케이프하는 React의 기본 동작으로 인해 발생합니다.

솔루션 공개

이 문제를 해결하기 위해 React는 다음을 제공합니다. 위험하게SetInnerHTML 속성. 이 속성을 활용하여 개발자는 HTML 문자열을 React 요소로 렌더링할 수 있습니다. 그러나 이 접근 방식에는 내재된 위험이 있으므로 주의해서 사용해야 한다는 점에 유의하는 것이 중요합니다.

솔루션 제작

dangerlySetInnerHTML의 사용법을 설명하려면 다음을 고려하세요. 예:

<td dangerouslySetInnerHTML={{ __html: this.state.actions }} />

이 코드에서 AJAX 응답의 HTML 문자열(다음 위치에 저장됨) this.state.actions)는 td 요소 내에서 렌더링됩니다. 이를 통해 HTML 콘텐츠가 React 애플리케이션 내에서 올바르게 표시될 수 있습니다.

주의 사항

dangerlySetInnerHTML은 HTML 렌더링 문제를 해결하지만, 사용할 때 주의를 기울이는 것이 중요합니다. 이 속성. HTML 문자열에 잠재적인 XSS 취약점이 있으면 애플리케이션의 보안이 손상될 수 있습니다. React에서 HTML 콘텐츠를 렌더링하기 전에 HTML 콘텐츠의 무결성을 보장하기 위해 서버측 삭제 기술을 사용하는 것이 좋습니다.

위 내용은 React에서 HTML 문자열을 JSX로 안전하게 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!