데이터 URI

데이터 URI란 무엇일까요? 데이터 URL까지

데이터 URI

데이터 URL

• data: 스킴이 접두어로 붙은 URL
• 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 삽입할 수 있게 해줌
• 이전에는 데이터 URI로 알려짐

구문

데이터 URI는 총 네가지 부분으로 구성

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

• 접두사 data:
• 데이터의 타입을 가리키는 MIME 타입
  • 생략된다면 기본값은 text/plain;charset=US-ASCII
• 텍스트가 아닌 경우 사용될 부가적인 base64 토큰
• 데이터 자체
  • URL 인코딩된 문자여야 함
  • 텍스트인 경우 단순히 텍스트를 포함할 수 있음

data:,Hello%2C%20World!

• 간단한 text/plain 데이터

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

• base64 인코딩 버전

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

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

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E

• <script>alert('hi');</script>을 실행하는 HTML 문서

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

Base64

• 이진 데이터를 ASCII 문자열 형식으로 기수-64 표현으로 변환하여 나타내는 이진-텍스트 인코딩 체계 그룹
• ACSII 문자로만 구성되므로 base64 문자열은 일반적으로 URL로부터 안전하므로 데이터 URL에서 데이터를 인코딩하는 데 사용 가능

JavaScript에 인코딩하기

Web API에는 Base64로 인코딩하거나 디코딩하는 기본 메서드가 있음

Unix System에 인코딩하기

명령줄 base64를 사용하여 수행할 수 있음

Windows에 인코딩하기

PowerShell의 Convert.ToBase64String을 사용하여 수행할 수 있음

또는 GNU/Linux 셸(WSL)은 base64 유틸리티를 제공

일반적인 문제점

데이터 URL을 만들고 사용할 때 일반적으로 발생하는 문제점들

구문

• data 세그먼트 앞에 콤마를 넣는 것을 잊음
• 데이터를 base64 형식으로 부정확하게 인코딩

HTML 내에 포맷시키기

• 데이터 URL은 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됨

길이 제한

• 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없음

오류 처리의 부족

• 미디어 내의 유효하지 않은 매개변수들 또는 base64를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않음

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

보안 이슈

• 많은 보안 문제(피싱 등)가 데이터 URL과 연관되어 있음
• 브라우저의 최상위 수준에서 해당 URL로 이동
• 이 문제를 완화하기 위해 data: URL에 대한 최상위 탐색은 모든 최신 브라우저에서 차단됨

참고

데이터 URI