React에서 DangerouslySetInnerHTML

여러분, 안녕하세요! 이 글에서는 React에서 dangerouslySetInnerHTML가 무엇이고 안전하게 사용하는 방법에 대해 설명하겠습니다. 의 시작하자!

React 프레임워크는 브라우저 독립적인 DOM 시스템을 채택한 것으로 알려져 있습니다. 즉, DOM과 직접 상호 작용하지 않습니다. 따라서 React에서는 HTML 문자열을 직접 추가할 수 없음을 알 수 있습니다. 예를 들어:

let someHTMLString = "<p>Hello</p>";

export default function App() {
    return(
       <div>{someHTMLString}</div>
     );
}

출력은 문자 그대로 단락 요소 내부의 "Hello"대신 문자열<p>Hello</p>입니다.

DangerouslySetInnerHTML

대신 dangerouslySetInnerHTML 의 React 버전인 innerHTML 를 사용할 수 있습니다. 다음과 같이 __html 키를 사용하여 객체를 전달할 수 있는 소품으로 사용됩니다.

dangerouslySetInnerHTML={{__html: getMarkup()}}

__html 키의 값은 React에서 직접 HTML 코드로 주입되는 문자열일 수 있습니다. 이것은 React가 HTML 코드를 DOM에 직접 추가할 수 있는 방법입니다.

DangerouslySetInnerHTML의 위험성

아시다시피 이 소품의 이름이 특히 무서운 이유가 있습니다. 간단하게 HTML 코드를 추가하는 것은 Cross Site Scripting 또는 XSS 공격에 취약하기 때문에 안전하지 않습니다.

XSS 공격은 공격자가 클라이언트 측에 코드를 주입하여 정보를 도용하고 앱에서 악성 스크립트를 수행하는 일종의 보안 취약점입니다. 예를 들어 설명하겠습니다.

You can read more about other security threats in this article.

예

아래와 같은 텍스트 편집 앱이 있다고 가정해 보겠습니다.



사용자는 텍스트 편집기에 무엇이든 쓸 수 있고 원하는 대로 스타일을 지정할 수 있습니다. 그런 다음 저장 버튼을 클릭하면 텍스트 편집기는 다음과 같이 HTML 페이지에 사용자 입력을 렌더링합니다.



백그라운드에서 텍스트 편집기는 기본적으로 <h3>Hello!</h3><p>I am a text!</p> 값을 반환합니다. 여기서 **값 **은 편집기에서 추가한 HTML 태그가 포함된 사용자 입력입니다. 페이지에 값을 렌더링하기 위해 다음을 사용합니다.

<div dangerouslySetInnerHTML={{ __html: value }}/>

하지만 악의적인 사용자가 <script> 태그로 묶인 코드를 입력하면 어떻게 될까요?



값은 다음과 같습니다.

<p><script>alert('This is some malicious script! >:)')</script></p>

즉, 삽입된 악성 스크립트가 실행되어 사용자의 쿠키, 개인 데이터 및 기타 민감한 정보를 훔치는 데 사용될 수 있습니다.

어떻게 안전하게 사용합니까?

DOMPurify은 60명 이상의 웹 보안 전문가가 HTML 코드를 삭제하여 XSS 공격을 방지하기 위해 작성한 npm 패키지입니다.

DOMPurify를 사용하면 dangerouslySetInnerHTML에서 삽입된 HTML 코드의 보안을 강화할 수 있습니다. 이전 예제에서 텍스트 편집기를 안전하게 사용하는 방법을 살펴보겠습니다.

1단계: DOMPurify 설치

프로젝트의 루트 폴더에서 코드를 실행하여 패키지를 설치합니다.

npm install dompurify

2단계: 패키지 가져오기

.js 를 사용할 dangerouslySetInnerHTML 파일에서 상단에 import 문을 추가합니다.

import DOMPurify from "dompurify";

3단계: 살균

그런 다음 value를 .sanitize() 메서드에 전달하기만 하면 됩니다.

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(value) }}/>

그리고 스크립트를 실행하는 대신 코드가 HTML 페이지에서 안전하게 제거됩니다. 따라서 아무 것도 렌더링하거나 실행하지 않습니다.

결론

때로는 프로젝트에서 dangerouslySetInnerHTML를 사용해야 하는 것이 불가피할 수 있지만 이 소품이 갖는 위험 및 보안 의미를 이해하는 것이 중요합니다.

읽어 주셔서 감사합니다! 언제나처럼 아래 의견에 자유롭게 의견을 보내주십시오. 유용한 정보가 되었기를 바랍니다. 또한 오늘 논의한 내용에 대해 더 알고 싶다면 아래 섹션에서 추가 자료를 확인하십시오. 다음 시간까지, 건배!

또한보십시오

Vecteezy.com의 이미지

React Docs on dangerouslySetInnerHTML

DOMPurify Documentation

More About Cross Site Scripting Attacks

Security Checklist for Web Apps