#43. DangerouslySetInnerHTML의 대체, innerHTML의 대체

XSS를 막기위해 우리가 해야하는 노력들.

 

API가 html구조를 response해서 파싱해야하는데,
dangerouslySetInnerHTML을 사용했다가
XSS보안에 대한 경고를 받았다.

 

태그의 값을 바꾸는 함수에대해 어디까지 알고 있었지?
$('h1').innerHTML = '짱짱'

이렇게 값을 바꾸던 것에서 앞으로 출시될
$('h1').setHTMLUnsafe('짱짱맨')
이걸로 shadow 돔을 사용가능한 버전이 나온다. 
쉐도우 돔의 설명은:
https://ui.toast.com/posts/ko_20170721
여기서 참고
* eval은 이제 아무도 사용하지 않죠??..??ㅇㅁㅇ 설마

 

이런거 보안이나 따지고 원래 innerHTML에 script 태그가 있으면 실행되지 않도록 자체적으로 막혀 있는거 모르는 사람이 여기도 있네?! 

라고 생각하는 분을 위해 준비한 script를 실행시키는 우회적인 방법 소개

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert  // shows the alert
이런식으로 img 태그의 onError에 넣어서 실행시킬 수 있는 우회적인 방법이 있다.

 

해결해보쟈..ㅠ

 

0. 구현해두기

음... 사실 어떤 문제의 해결을 위해 코드를 짜서 해결 못할 건 없는 것 같다. 과정에서 드는 공수와 시간, 코드의 가독성의 문제가 생길 뿐이지. 구현하는 아이디어는 각 태그들에 대해서 직접 함수를 만드는 것이다. (ㅎㅎ.. 다른 방법은 생각이 안났다)

예시)

const response =
"개행1\n개행2\n개행3\n"
data.split('\n').map(line =>{
return(
  <span>{line}<br/></span>
  )
})
// 이런식으로 각각의 문자열 태그들(<p>, <h1>, ...)에 대해서 직접 리턴하는 방식

 

1. DOMPurify 사용하기

프론트 엔드 개발자들은 이런 귀찮은 문제들을 위해 라이브러리들을 잘 활용하는 것 같다. 

공식 깃 홈페이지에서 블랙리스트 태그들을 표기해두었기 때문에 들어가서 확인해 보면 된다.

그 블랙리스트 태그들 중에서 사용하는 태그들은 allow해서 사용하는 방식

 

장점: 초 패스트 이지 웨이 YEAH~~~ (근데 allow tag와 attr 요소를 정리해야하긴함)

단점: 라이브러리 사용을 위해 팀원들에게 스펙과 근거들을 설명해야함

DOMPurify.sanitize('<img src=x onerror=alert(1)//>');
// becomes <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); 
// becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); 
// becomes <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">');
// becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); 
// becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); 
// becomes <ul><li><a href="//google.com">click</a></li></ul>

출처: https://mygumi.tistory.com/415

2. HTML Sanitizer api 사용하기

현재는 sanitizer api는 experimental feature 이기때문에 지원하는 브라우저 범위가 넓어야하는 내 상황에는 맞지 않는다.

 

=> DOMPurify를 사용하고 허용하는 태그들을 받는 방법으로 변경하기로 결정

 

 

XSS 공격에대한 내용은https://blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=is_king&logNo=221602193148

[비박스] Cross Site Script(XSS) - Reflected (Eval)

이 글이 도움이 되었다.