Data URI는 HTML 및 CSS에 이미지를 포함하거나 외부 파일을 인라인으로 넣기 위해 사용합니다.
<img src="./filename.jpg">
img태그를 사용하였을 때 src 속성에 보통은 위와 같은 방법으로 이미지를 불러옵니다. 그러나
Data URI의 형식은 다음과 같습니다.
data:[MIME][;charset=encoding][;base64]<data>
<img src=data:image/jpg;base64,AAAAAAA...>[MIME] 생략 시 기본적으로 text/plain;charset=US-ASCII로 설정됩니다.
해당 img태그의 경우 data URI를 사용하여 이미지 데이터가 HTML 문서 자체의 일부가 됩니다.
base64로 인코딩된 이진 데이터를 로드함에 따라 자연스레 지연시간이 더 걸리는 문제가 발생할 수 있으나,
어느 구문을 사용하더라도 브라우저가 렌더링한 동일한 이미지를 확인할 수 있습니다.
추가적으로,
"data: " URI 체계는 짧은 값에만 유용합니다. 예를 들어 Mozilla의 경우 기본적으로 무제한 길이의
데이터 URI를 지원하지만 Opera 브라우저의 경우 데이터 URI를 4100자로 제한하고 있기에
되도록이면 짧은 값에서 사용하는게 유용하다고 볼 수 있습니다.
해당 기술이 유용한 상황은 다음과 같습니다.
- 이미지의 크기가 너무 작아서 HTML 내에 이미지를 인라인으로 배치하여 HTTP 요청의 오버헤드를 줄일 수 있다.
- 외부 리소스에 대한 액세스가 번거롭거나 제한적인 환경에서 사용
이미지를 Data URI로 복사하는 방법
더 나아가서, Data URI는 이미지뿐만 아니라 모든 종류의 정보를 인코딩할 수 있으므로
XSS 필터를 우회하여 공격할 수 있습니다. 다음과 같은 코드가 있다고 가정해보겠습니다.
<div> user_input </div> 환영합니다.웹 어플리케이션에서는 XSS 필터로 아래의 키워드들이 추가되어 있습니다.
- script, javscript, alert, ', ( ) , :
자바스크립트를 실행하려면 <script> 태그를 이용해야 합니다. 그러나, 어플리케이션은 특정 키워드에
대한 사용자의 입력을 검증하기 때문에 <script> 태그는 사용할 수 없습니다.
따라서, 악성 스크립트를 실행하기 위해 데이터 URI를 사용하여 다음의 페이로드를 주입할 수 있습니다.
<object data="datatext/html;base64,HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4="></object>- base64 encode : HNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4=
- base64 decode : <script>alert("Hello");</script>
브라우저는 객체 태그를 로드할 때 데이터 속성에 할당된 객체를 로드합니다. 이로 인해 자바스크립트가 실행됩니다.
base64로 인코딩된 페이로드 때문에 블랙리스트 필터를 우회할 수 있었습니다.
해당 기술을 사용하면 다양한 MIME 유형의 파일을 동적으로 생성할 수 있고, 백도어를 만들거나 악성 PDF 파일을 생성하는 등의 여러 공격을 수행할 수 있게 됩니다.
WEB 모의해킹에서 데이터 URI를 사용하는 경우
- XSS에 대한 대책으로 웹 어플리케이션 측에서 블랙리스트를 기반으로 필터를 사용하는 경우
- 데이터의 문자 인코딩을 직접 지정할 수 있어 웹 어플리케이션이 유효성 검사를 적용하지 않은 문자 집합으로 데이터를 인코딩 할 수 있음
- 데이터 콘텐츠가 이미 사용자의 브라우저에 있으므로 바이러스 백신 보호를 실행하는 사용자를 우회하는데
사용 가능
Data URI를 사용할 수 있는 XSS의 범위
새 요청을 생성하여 외부 소스를 로드하는 태그로만 제한됩니다.
- Anchor Tag
- IFRAME Tag
- Object Tag
- Image Tag
HackerOne에서 해당 기술로 XSS를 터트린 보고서가 존재하는지 찾아보았는데요.
실제 XSS 취약점 포인트에서 data: 문법을 사용하여 XSS를 터트릴 수 있었고, 이는 버그바운티 분야에서도 상당 수 쓰인다는 것을 알 수 있었습니다. 다만 레포트 몇개를 살펴보다 보니 모든 브라우저에서 터지는 것이 아님을 확인할 수 있습니다. 따라서, URI 기능을 지원하거나 허용하는 브라우저에 한해서 Data URI 기술을 이용할 수 있을 것 같습니다.
Mozilla Firefox 브라우저의 Data URI 제한
- <a href="data:..."> click 이 새로운 최상위 데이터 URL 문서로 이동하는 경우 차단
다음과 같은 경우가 허용 : - 사용자가 주소 표시줄에 "data:..."을 명시적으로 입력 / 붙여넣기
- "data:image/svg+xml"이 아닌 경우 최상위 창에서 "data:image/*"열기
- "data:application/pdf" 및 "data:application/json"열기
- 데이터 다운로드 : URL, ex) "data:..." 의 save-link-as
Firefox 59부터 최상위 창에서 데이터 URL로 이동하려는 웹 페이지가 차단되고 다음과 같은 메시지가
콘솔에 기록됩니다.
대부분의 브라우저에서 지원되나, Internet Explorer 7 이하에서는 현재 지원되지 않습니다.
현재, Internet Explorer 8 이상에서 CSS의 이미지에 대한 데이터 URI만을 지원합니다.
Opera의 경우 7.2부터 지원