Data URIs

Data URIs, 즉 스킴이 data로 앞에 붙은 URL은 컨텐츠 생산자로 하여금 작은 파일들을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다.

문법

Data URIs는 네 가지 파트로 구성됩니다: 접두사(data:), 데이터의 타입을 가리키는 MIME 타입, 텍스트가 아닌 경우 사용될 부가적인 base64 토큰 그리고 데이터 자체:

data:[<mediatype>][;base64],<data>

mediatype이란, JPEG 이미지의 경우 'image/jpeg'와 같은 MIME 타입을 말합니다. 만약 생략된다면, 기본적으로 text/plain;charset=US-ASCII이 사용됩니다. 

데이터가 만약 텍스트라면, 단순히 텍스트를 (적합한 개체 혹은 둘러싸여진 문서의 타입에 근거한 이스케이프를 사용하여) 임베드할 수 있습니다. 반면, base64로 인코딩된 이진 데이터를 임베드하기 위해 base64를 지정할 수 있습니다.

몇 가지 예제:

data:,Hello%2C%20World!

간단한 text/plain 데이터

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

위 예제의 base64 인코딩 버전

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

<h1>Hello, World!</h1>인 HTML 문서

data:text/html,<script>alert('hi');</script>

자바스크립트 얼럿을 실행하는 HTML 문서. 닫혀있는 스크립트 태그가 필요하다는 것을 기억하세요.

base64 포맷으로 데이터 인코딩하기

리눅스와 Mac OS X 시스템의 명령줄에서 uuencode 유틸리티를 사용해 쉽게 인코딩할 수 있습니다:

uuencode -m infile remotename

infile 파라메터는 base64 포맷으로 인코딩하길 원하는 파일의 이름이며, remotename는 파일에 대한 원격지 이름으로 data URLs내에서는 실제로 사용되지는 않습니다.

출력은 다음과 같은 내용일 겁니다:

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

Data URI로 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 됩니다.

웹 페이지에서 JavaScript 사용하기

웹 API는 base64로 인코딩하거나 디코딩하기 위한 프리미티브를 가지고 있습니다: Base64 인코딩과 디코딩.

일반적인 문제점

이 섹션에서는 data URIs를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다.

문법

data URIs를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊고 데이터를 base64 포맷으로 부정확하게 인코딩하는 경우도 있습니다.

HTML 내에 포맷시키기

data URI는 둘러싸여진 문서의 너비에 비례할 가능성이 높은 파일 사이에 파일을 제공하게 됩니다. URL로써, data는 공백 문자(라인 피드, 탭 혹은 스페이스)로 포맷이 가능해야 하지만 base64 인코딩을 사용할 때 일어나는 실제적인 이슈가 있습니다.

길이 제한

파이어폭스는 기본적으로 길이 제한이 없는 data URIs를 지원하지만, 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, 오페라 11 브라우저는 data URIs를 65000 문자 정도로 제한합니다.

오류 처리의 부족

미디어 내의 유효하지 않은 파라메터들, 혹은 'base64'를 지정할 때 타이포들은 무시되지만 오류가 발생하지는 않습니다.

쿼리 문자열에 대한 미지원 등

data URI의 data 일부는 불명확해서 데이터 URI를 이용해 쿼리 문자열(<url>?parameter-data 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URI가 나타내는 데이터 내에 쿼리 문자열을 포함할 것입니다. 예를 들어: 

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

이는 내용이 다음과 같은 HTML 리소스를 나타냅니다:

lots of text...<p><a name="bottom">bottom</a>?arg=val

명세서

브라우저 호환성

[1] IE8은 CSS 파일 내의 data URIs만 최대 32kB 크기 내에서 지원합니다.

[2]IE9과 그 이후, 그리고 엣지를 포함한 버전은 CSS와 JS 파일 내 data URIs를 최대 크기 4GB내에서 지원하지만, HTML 파일 내에서는 지원하지 않습니다.

함께 참고할 내용

• Base64 인코딩과 디코딩
• atob()
• btoa()
• CSS url()
• URI