3. 사용 예시

3. 1. HTML

3. 2. CSS

3. 3. 자바스크립트

42

3. 4. SVG

4. 장점

데이터 URI 스킴을 사용하면 HTTP 요청 및 헤더 트래픽을 줄일 수 있다.^[15] 데이터를 텍스트 형식으로 삽입하기 때문에, 인코딩으로 인한 오버헤드가 발생할 수 있지만, 트래픽 감소 효과가 더 크다. 특히 작은 파일을 여러 개 전송하는 경우, TCP의 슬로우 스타트 방식 때문에 전송 속도가 제한될 수 있는데, 데이터 URI 스킴을 사용하면 이러한 문제를 완화할 수 있다.^[15] 다만, HTTP/1.1의 지속적 연결이나 HTTP/2를 사용하는 경우에는 이 장점이 줄어든다.

HTTPS를 사용하는 웹 페이지에서는 브라우저가 모든 다운로드에 대해 보안 연결을 요구하거나 보안 경고를 표시한다.^[15] 서버 설정 오류 시 HTTPS 요청은 큰 오버헤드를 발생시킬 수 있는데, 데이터 URI 스킴으로 모든 파일을 하나로 묶으면 이러한 문제를 해결할 수 있다. 또한, 많은 브라우저가 하나의 도메인에 대한 연결 수를 제한하는데, 데이터 URI 스킴은 이러한 제한의 영향을 받지 않는다.^[15]

외부 데이터 접근이 제한된 환경이나, HTML 파일 하나로 멀티미디어를 표현해야 하는 경우, 그리고 이메일에서 외부 파일이나 첨부 파일 없이 이미지를 표시해야 하는 경우에도 유용하게 활용된다.

5. 단점

데이터 URI 스킴으로 포함된 파일은 개별적으로 캐시되지 않아, HTML이나 CSS 파일이 다운로드될 때마다 데이터도 함께 다운로드된다. HTML이나 CSS 파일이 갱신될 때마다 인코딩이나 임베딩을 다시 해야 한다.

Base64로 인코딩된 데이터는 원래 크기보다 1/3 정도 커지지만(바이트 단위), HTTP 서버가 응답을 gzip으로 압축했을 경우 2~3%까지 경감된다. 데이터 URI 스킴으로 다운로드한 파일에는 일반 링크에서 다운로드한 파일과 달리 파일 이름이 없다. 저장할 때의 파일 이름은 MIME 타입별로 준비된 기본 이름이 된다. 다만, HTML5에서는 a 요소에 다운로드 시의 파일 이름을 지정할 수 있는 download 속성이 추가되었으므로, 일부 브라우저에서는 이 문제는 해결되었다.

오래된 Internet Explorer에서는 지원되지 않으며, 버전 8에서는 데이터 크기가 32kB로 제한된다. Internet Explorer 버전 8과 버전 9에서는 이미지에서만 사용할 수 있고, JavaScript로 생성된 콘텐츠는 다운로드할 수 없다.

데이터 URI 스킴은 데이터가 단순한 문자열로 표현되므로, 브라우저 등 많은 처리 환경에서는 메타데이터, 데이터 압축, 콘텐츠 협상과 같은 복잡한 처리를 지원하지 않는다. 또한, 데이터 URI 스킴은 안티 바이러스 소프트웨어의 필터링 처리를 어렵게 한다.

6. 브라우저 지원 현황

7. 악용 사례

데이터 URI는 의심하지 않는 웹 사용자로부터 사용자 이름과 비밀번호를 획득하려는 공격 페이지를 구성하는 데 활용될 수 있다.^[8] 사이트 간 스크립팅 (XSS) 제한을 우회하여 공격 페이로드를 주소 표시줄 내부에 완전히 포함시키고, 제3자가 관리하는 전체 웹사이트가 아닌 URL 단축 서비스를 통해 호스팅할 수 있다.^[8] 결과적으로 일부 브라우저는 data URI로 이동하는 웹 페이지를 차단한다.^[9]

참조

_[1] 웹사이트 Using Data URIs to Speed Up Your Website http://blog.teamtree[...] Treehouse Blog 2014-03-27
_[2] 웹사이트 SingleFile - Chrome Web Store https://chrome.googl[...] 2018-08-25
_[3] 웹사이트 SingleFile – Add-ons for Firefox https://addons.mozil[...] 2018-08-25
_[4] 웹사이트 Can I use... http://caniuse.com/#[...] 2015-08-31
_[5] 웹사이트 RFC 2397 - The "data" URL scheme http://tools.ietf.or[...] Internet Engineering Task Force 2008-08-12
_[6] 웹사이트 Character Sets https://www.iana.org[...] Internet Assigned Numbers Authority 2015-08-31
_[7] 웹사이트 Uniform Resource Identifiers (URI): Generic Syntax http://tools.ietf.or[...] Internet Engineering Task Force 2015-08-31
_[8] 뉴스 Phishing without a webpage – researcher reveals how a link itself can be malicious https://nakedsecurit[...] Naked Security by Sophos 2012-08-31
_[9] 웹사이트 Data URLs - HTTP | MDN https://developer.mo[...] Mozilla 2018-05-11
_[10] 웹사이트 Using Data URIs to Speed Up Your Website http://blog.teamtree[...] Treehouse Blog 2018-08-26
_[11] 웹사이트 SingleFile - Chrome Web Store https://chrome.googl[...] 2018-08-25
_[12] 웹사이트 SingleFile – Add-ons for Firefox https://addons.mozil[...] 2018-08-25
_[13] 웹사이트 Can I use... http://caniuse.com/#[...] 2015-08-31
_[14] 웹사이트 Define data: URLs by annevk · Pull Request #579 · whatwg/fetch https://github.com/w[...] GitHub 2018-05-26
_[15] 웹사이트 RFC 2616 Section 8.1.4 https://datatracker.[...] Internet Engineering Task Force 2012-12-14
_[16] 웹사이트 data Protocol http://msdn.microsof[...] Microsoft 2014-03-16
_[17] 웹사이트 Binary Compression Rates for ASCII Formats http://citeseerx.ist[...] 2011-04-07
_[18] 웹사이트 Security https://datatracker.[...] Internet Engineering Task Force 2008-08-12
_[19] 웹사이트 "{{IETF RFC|2397}} - The \"data\" URL scheme" https://datatracker.[...] Internet Engineering Task Force 2008-08-12
_[20] 웹사이트 Uniform Resource Identifiers (URI): Generic Syntax https://datatracker.[...] 2012-12-14
_[21] 웹인용 Using Data URIs to Speed Up Your Website http://blog.teamtree[...] Treehouse Blog 2014-03-27
_[22] 웹인용 SingleFile - Chrome Web Store https://chrome.googl[...] 2018-08-25
_[23] 웹인용 SingleFile – Add-ons for Firefox https://addons.mozil[...] 2018-08-25
_[24] 웹인용 Can I use... http://caniuse.com/#[...] 2015-08-31