React : dangerouslySetInnerHTML

dangerouslySetInnerHTML

데이터를 가져오는데 이런식으로 html 요소를 가지고 와서 어떻게 해결할지 고민을 하게 되었다.

검색을 하다보니 dangerouslySetInnerHTML를 사용해서 React에서 innerHTML을 제대로 가지고 오는 방법을 찾았다.

React 공식문서에 따르면

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

For example:

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

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

그래서 코드 구현을 아래 코드에서

<span>{book.volumeInfo.description}</span>

이렇게 변경 했다.

<span dangerouslySetInnerHTML={{ __html: book.volumeInfo.description }}></span>

코드 변경 이후 보여지는 결과물

하지만 이름이 dangerouslySetInnerHTML인 만큼 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출 되기 때문인지 위험해 보인다.

사이트 간 스크립팅, 크로스 사이트 스크립팅(Cross-site scripting : XSS)

• 웹 애플리케이션에서 많이 나타나는 취약점 중 하나
• 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입
• 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타남
• 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행
• 다른 웹사이트와 정보를 교환하는 식으로 작동

ps. Cross-site scripting 인데 CSS가 아닌 이유는 웹 기술인 CSS와 헷갈릴 수 있어서 XSS이다.