Data URI Schema (Data URIs)

 

출처 : https://programming119.tistory.com/194

 

---

 Data URI Schema 란? 

Data URI Scheme는 이미지  같은 외부 데이터를 URI 형태로 표현하는 방법이다.

이미지, 플래시, 텍스트 등의 데이터를 URI로 표현하는 방식이다.

 

이는 외부 호출 없이, 데이터를 웹 페이지에 정착(inline) 할 수 있다.

cache에 저장하지 못하고, 사이즈가 증가하지만 서버의 응답 횟수를 단축하고 데이터가 저장된 경로를 은닉하며 일부 보안 프로그램의 필터링을 우회하기도 한다.

---

 문법 

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

- mediatype : MIME 타입으로, 생략시 기본값 text/plain;charset=US-ASCII

- base64 : 데이터가 텍스트가 아닌 경우 base64 인코딩된 데이터가 필요하다.

---

ex)

   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>
   자바스크립트 alert을 실행하는 HTML 문서

---

 특징 

• 소스 코드 내 삽입

  • 추가적인 HTTP 요청이 일어나지 않는다.

  • 캐싱 되지 않는다.

• 용량

  • base64 포맷으로 인코딩하면 원본 파일보다 더 용량이 커진다.

• 긴 문자열

  • 브라우저에 따라 문자 길이에 제한이 있기 때문에, 용량이 큰 이미지 등은 처리하지 못할 수 있다.

  • 소스코드 상에 삽입하면 소스 가독성이 떨어질 수 있다.

---

 브라우저 호환성 

IE 8이상에서 지원한다.

---

 참고 링크 

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs