[14장][효리] 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈

[hyoribogo]

퀴즈

리액트에서 아래 코드를 실행시켰을 때 결과와 그 이유를 작성하세요.

function App() {
  const userInput = '<img src="x" onerror="alert(1)" />'

  return (
    <>
      <p id={userInput}>{userInput}</p>
      <div dangerouslySetInnerHTML={{ __html: userInput }} />
    </>
  )
}

export default App

답

정답

팝업창에 1이 뜬다.

이후 브라우저엔 아래와 같이 렌더링 된다.

요소를 살펴보면 이렇게 되어있다.

리액트는 기본적으로 JSX에서 특수 문자를 이스케이핑(escape)하여 보안상의 이유로 사용자 입력을 렌더링할 때 안전하게 처리한다.
따라서 속성값이나 innerText에 스크립트를 주입하면 알아서 이스케이프 해준다.
하지만 dangerouslySetInnerHTML에는 그대로 적용되기 때문에 XSS 공격에 취약하다. 따라서 브라우저에서 alert가 그대로 실행되었다.

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[khj0426]

정답

p태그에는 img src="x" onerror="alert(1)" 가 그대로 문자열로 찍히고 img태그부분에서는 alert(1)이 나온다. (사실 onError가 언제 실행되는지 잘 모르겠습니다..)

[hayamaster]

정답

img src="x" onerror="alert(1)" / ...가 글자그대로 보인다.

x 이미지가 보인다.