dangerouslySetInnerHTML

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.

일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다.

따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

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

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

 

위의 글에서 주의 깊게 읽어야하는 부분은 2가지입니다.

코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출됩니다.

=> 이것은 innerHTML이나 dangerouslySetInnerHTML이나 동일합니다.

 

위험하다는 것을 상기 시키기 위해 dangerouslySetInnerHTML을 작성하고, __html 키로 객체를 전달해야합니다.

dangerously...^^..

 

동작은 동일하게 HTML을 삽입합니다.

하지만 innerHTML을 사용하면 DOM노드가 수정되었을때 수정된 것을 알 수 있는 방법이 없다고 합니다.

따라서 dangerouslySetInnerHTML을 사용하여 가상 DOM과 실제 DOM을 비교하여 변경된 것이 있다면 리렌더링이 될 수 있도록 해야합니다.

 

 

잘못된 예시

const App = () => {
	const str = 'Hello!';
    
    return(
    	<div>
        	{str}
        </div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

 

 

사용 예시1

const App = () => {
	const str = 'Hello!';
    
    return(
    	<div dangerouslySetInnerHTML={{__html: str}}></div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

 

 

사용 예시2

const App = () => {
    const markup = () => {
    	return {__html : 'Hello'}
    };
    
    return(
    	<div dangerouslySetInnerHTML={markup()}></div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

 

 

간단히 알아보는 XXS

사이트 간 스크립팅 공격 or 크로스 사이트 스크립팅 (XSS, cross-site scripting)

  • 웹 애플리케이션의 취약점 중 하나
  • 관리자가 아닌 이가 페이지에 악성 스크립트를 삽입할 수 있는 취약점
    • 예를 들면.. 게시판에 악성 스크립트가 담긴 글을 올려 사이트를 공격 할 수 있음
  • 악성 스크립트를 통해 해커가 사용자의 정보(쿠키, 세션등)를 탈취하거나 비정상적인 기능을 수행
  • 주로 다른 웹 사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 함
  • 취약점을 방지하기 위해서는 사용자의 입력 값을 검사하고 사용해야함

 


출처 & 참고

위키백과

ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85

+ Recent posts