Data URL Schema

Data URL Schema

접두어가 data: 스키마로 추가된 URL을 통해 문서에 인라인 형태로 포함할 수 있다.

외부 데이터를 URL 형태로 표현하는 방법이다.

 

img 태그를 사용할 때, src 속성 값으로 이미지 파일이 존재하는 경로를 넣는다.

이를 URL Schema 형태로 표현하면 src 속성 값으로 base64 인코딩된 이미지의 데이터를 직접 입력하게 된다.

ex) <img src="https://~" /> -> <img src="data:image/gif;base64,[데이터값] />

 

 

 

구문

네가지 부분으로 구성된다.

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

- 접두사(data:)

- 데이터의 타입을 가리키는 MIME 타입, 생략 시 기본값 : text/plain;charset=US-ASCII

- 텍스트가 아닌 경우 사용될 부가적인 base64 토큰

- 데이터

 

 

 

예제

간단한 text/plain 데이터

data:,Hello%2C%20World!

 

위 예제의 base64 인코딩 버전

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

 

<h1>Hello, world!</h1> HTML 문서

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

 

자바스크립트 alert 실행

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