HTML 문자열을 HTML로 안전하게 렌더링

이 시나리오에서는 HTML 콘텐츠의 일반 문자열을 렌더링하려고 할 때 문제가 발생하지만 대신 HTML로 해석되지 않고 문자열로 나타납니다. 이는 일반적으로risklySetInnerHTML에서 사용되는 속성이 문자열이 아닌 개체일 때 발생합니다.

이 문제를 해결하려면 this.props.match.description 속성이 문자열인지 확인하세요. 그렇지 않은 경우 속성에 할당하기 전에 HTML로 변환하세요.

HTML 엔터티 처리

HTML 엔터티를 처리할 때 추가 합병증이 발생합니다. 이러한 경우, 항목을angerlySetInnerHTML에 전달하기 전에 디코딩해야 합니다.

예제 코드

다음 예제 코드를 고려하세요.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

  htmlDecode(input) {
    const e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

이 예에서 설명 속성에는 HTML 엔터티()가 포함되어 있습니다. 올바르게 렌더링하려면 htmlDecode 함수를 사용하여 HTML을 위험하게SetInnerHTML에 전달하기 전에 이러한 엔터티를 디코딩합니다.