[React] dangerouslySetInnerHTML 사용 (Sanitize-html)

dangerouslySetInnerHTML

 

dangerouslySetInnerHTML- 리액트 공식문서

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

바로 사용 시

<div dangerouslySetInnerHTML={{ _html : '바껴라 HMTL아' }}></div>

 

사이트 스크립팅(Cross-Site Scripting, XSS) 공격을 방지하고

웹 애플리케이션의 보안을 강화하는
Sanitize-html, DOMPurify 등 플러그인 사용러그인을 사용함 ( Vue에서도 사용 )

 

Sanitize-html

Sanitize-html는 옵션이 많아 선택

공식문서

GitHub - apostrophecms/sanitize-html: Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes o

Sanitize-html의 동작순서

1. HTML 파싱
   sanitize-html은 입력된 HTML 문자열을 파싱하기 위해 HTML 파서를 사용합니다. 이 파서는 입력된 문자열을 HTML 요소, 속성, 텍스트 노드 등의 노드로 분리합니다.
2. 노드에 대한 필터링
   sanitize-html은 각 노드의 타입과 속성을 분석하여, 안전하지 않은 요소나 속성을 필터링한다. 예를 들어, 스크립트 태그나 링크 태그의 href 속성은 보안 상의 이유로 필터링된다.
3. 안전한 HTML 코드 생성
   sanitize-html은 HTML 요소와 속성을 필터링한 후, 안전한 HTML 코드로 변환하는 과정을 진행한다. 이때 안전한 HTML 코드는 기본적으로 HTML5 스펙을 따르며, 사용자 지정 옵션을 통해 필요한 요소와 속성을 추가하거나 제거할 수 있다.

Install

npm i sanitize-html

 

Usage

 

내 소스에 적용

//import
import sanitizeHtml from 'sanitize-html';

const getTranslated = (key) => {
    const text = data[key] || ''; //data json에서 호출
    const sanitizedText = sanitizeHtml(text, {
      allowedTags: ['br', 'em', 'span'], //허용할 태그 지정
    });
    return { __html: sanitizedText };
};

//호출
<p dangerouslySetInnerHTML={getTranslated('Rs_Info_Txt_1')}></p>