[240610 TIL] Dom Purify, html-react-parser

Dompurify 라이브러리

사용 목적

Dompurify는 악성 코드 삽입 공격(XSS)을 방지하기 위해 HTML, SVG, MathML 등의 사용자 입력을 정화하는 라이브러리입니다. 이를 통해 웹 애플리케이션에서 안전하게 사용자 콘텐츠를 렌더링할 수 있습니다.

사용 방법

1. 설치:
2. npm install dompurify
3. 사용 예시:
4. import DOMPurify from 'dompurify'; const dirty = '<img src="x" onerror="alert(1)"> <b>bold</b>'; const clean = DOMPurify.sanitize(dirty); document.getElementById('content').innerHTML = clean;
5. CDN 사용:
6. <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script> <script> const dirty = '<img src="x" onerror="alert(1)"> <b>bold</b>'; const clean = DOMPurify.sanitize(dirty); document.getElementById('content').innerHTML = clean; </script>

Html-React-Parser 라이브러리

사용 목적

html-react-parser는 HTML 문자열을 React 요소로 변환하는 라이브러리입니다. 이를 통해 서버나 외부 소스로부터 받은 HTML 코드를 안전하게 React 컴포넌트 내에서 렌더링할 수 있습니다. 이 라이브러리는 단순한 HTML 파싱을 넘어, 특정 HTML 태그를 사용자 정의 React 컴포넌트로 대체하거나, 태그의 속성을 수정하는 등의 커스터마이징이 가능합니다.

사용 예시

import parse from 'html-react-parser';

const htmlString = '<div><h1>Hello, World!</h1><p>This is a paragraph.</p></div>';
const parsedContent = parse(htmlString);

const MyComponent = () => (
  <div>
    {parsedContent}
  </div>
);

export default MyComponent;

이렇게 html-react-parser를 사용하면, 동적으로 받은 HTML 콘텐츠를 React에서 안전하게 렌더링할 수 있습니다.

함께 사용

리액트에서 html-react-parser와 DOMPurify를 함께 사용하는 방법을 정리하면 다음과 같습니다:

1. 라이브러리 설치

npm install html-react-parser dompurify

2. 코드 작성

import React, { useMemo } from 'react';
import parse, { domToReact } from 'html-react-parser';
import DOMPurify from 'dompurify';

const BlogContent = ({ blog }) => {
    const cleanHTML = useMemo(() => {
        if (blog) {
            return DOMPurify.sanitize(blog.contents);
        }
        return '';
    }, [blog]);

const replaceImgTag = (node) => {
    if (node.name === 'img') {
        const { src } = node.attribs;
        const item = {
            image: src,
            title: 'blog_image'
        };
        return <CustomImage item={item} />;
        }

    if (node.name === 'p') {
        return <StyledP>{domToReact(node.children || [], { replace: replaceImgTag })</StyledP>
    }
    return domToReact(node.children || [], { replace: replaceImgTag });
};
    return (
        <div>
            {parse(cleanHTML, { replace: replaceImgTag })}
        </div>
    );
};

export default BlogContent;

설명

1. 라이브러리 임포트: html-react-parser와 DOMPurify를 가져옵니다.
2. HTML 정화: useMemo 훅을 사용하여 blog.contents를 정화합니다.
3. 이미지 태그 대체: replaceImgTag 함수로 img 태그를 대체합니다.
4. 파싱 및 렌더링: parse 함수를 사용하여 정화된 HTML을 JSX로 변환하여 렌더링합니다.