[개념정리] Dompurify

 

이번에 문제를 풀다가 DOMpurify를 우회하는 방법에 대해 알게되었다.

 

DOMpurify란?

 

innerHTML은 문자열이 자동으로 HTML 요소로 인식될 수 있게 기능을 한다.

이러한 기능이 있을때 어떤 문제가 있을까?

 

innerHTML에 아무런 필터링이 없으면 XSS 공격에 매우 취약하다.

이러한 문제점을 제거해주는게 DOMprify이다.

 

DOMPurify는 화이트리스트 접근 방식을 취하는데 특정한 태그와 속성, 프로토콜만 허용한다.

// 예시
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>

 

DOMpurify는 이러한 순서로 수행된다.

1. htmlMarkupDOM 트리로 구문 분석된다.
2. DOMPurify는 DOM 트리를 정리한다(간단히 말해, 이 프로세스는 DOM 트리에 있는 모든 요소와 속성을 검토하고 허용 목록에 없는 모든 노드를 삭제한다).
3. DOM 트리는 HTML 마크업으로 다시 직렬화된다.
4. 할당 후 innerHTML, 브라우저는 HTML 마크업을 다시 구문 분석한다.
5. 구문 분석된 DOM 트리는 문서의 DOM 트리에 추가한다.

예를 들어 

 

이러한 형태로 초기 마크업을 작성하면 

"A"
<img src=1 onerror=alert(1)>
"B"

 

DOMPurify가 이를 정리하여 다음과 같은 DOM 트리를 남깁니다.

"A"
<img src=1 >
"B"

 

그 다음 아래와 같이 직렬화가 되고

A<img src="1">B

 

다음 마크업은 innerHTML에 할당될 때 브라우저에 의해 다시 구문 분석된다.

 

"A"
<img src=1 >
"B"

 

DOM 트리는 DOMPurify가 작업한 트리와 동일하며 문서에 추가된다.

 

 

간단히 말해서, DOMPurify는 다음과 같은 연산 순서를 가지고 있다. 파싱 → 직렬화 → 파싱.

직감적으로 DOM 트리를 직렬화하고 다시 파싱하면 항상 초기 DOM 트리가 반환되어야 한다고 생각할 수 있다. 하지만 이는 사실이 아니다. 

 

 

이에 따라오는 취약점은 다음글에서 확인할 수 있다.

https://jh-hack.tistory.com/198

[개념정리] Mutation XSS