data URI를 파싱하는 방법
- 상자에 URI를 붙여넣으세요.
url("data:...")가 든 CSS 규칙,<img src="data:...">태그, Markdown 이미지처럼 코드 안에 들어 있어도 됩니다. 첫 번째data:URI를 추출하고 상태 표시줄에 그 사실을 알립니다. - 결과를 읽으세요. MIME, 파라미터, 인코딩(Base64 또는 퍼센트 인코딩), 문자 수로 나타낸 데이터 부분 길이, 디코딩 크기, 그리고 추정 내용이 나옵니다.
- 아래에 페이로드 미리보기가 SHA-256, hex 덤프와 함께 나옵니다. 이미지, SVG, PDF, 오디오, 동영상, 글꼴, 텍스트, JSON, ZIP 압축 파일 등을 볼 수 있습니다.
- 출력 인코딩으로 URI를 그대로 두거나 Base64 또는 URL 인코딩으로 바꾸고, CSS
url()이나 HTML 태그 같은 출력 형식을 골라 결과를 복사하세요. 파일 다운로드는 페이로드를 저장합니다.
파서가 받는 것
파서는 브라우저가 구현하는 Fetch 표준의 data URL 규칙을 따르며, 이 규칙은 원래의 RFC 2397보다 관대하므로 브라우저가 받는 것은 이 파서도 받습니다.
| 입력 | 결과 |
|---|---|
data:,A%20brief%20note | text/plain(암시적), charset US-ASCII, 12바이트: A brief note |
DATA:Image/PNG ; Base64 ,iVBORw0KGgo= | image/png, Base64, 8바이트: PNG 시그니처 |
data:text/plain;charset=iso-8859-7,%e1%e2%e3 | 3바이트, 선언된 charset으로 αβγ로 표시 |
data:;base64,SGk= | text/plain(암시적), 2바이트: Hi |
data:text/plain;base64,SGVsbG8gV29ybGQ | 패딩이 빠져도 괜찮음: Hello World |
data:image/png;name=logo.png;base64,iVBOR... | 파라미터 name=logo.png, 다운로드 이름으로 사용 |
data:image/png;base64 | 오류: 쉼표가 없어 데이터 부분이 없음 |
브라우저처럼 URI 안의 줄 바꿈과 탭은 파싱 전에 제거하므로, 스타일시트에서 여러 줄로 나뉜 URI도 파싱됩니다. ;base64는 대소문자를 구분하지 않고, 따옴표로 감싼 파라미터 값은 따옴표를 벗기며, URL-safe Base64도 받습니다. 퍼센트 이스케이프는 먼저 바이트로 디코딩하므로 %2B%2F처럼 쓴 Base64 본문도 작동합니다.
선언된 유형과 실제 내용
data URI의 MIME 유형은 레이블일 뿐입니다. 파서는 디코딩한 바이트를 알려진 파일 시그니처와 대조하고, 둘이 다르면 경고합니다.
data:image/jpeg;base64,iVBORw0KGgo...는 “image/jpeg(으)로 선언되었지만 내용은 PNG(으)로 보입니다.“라는 경고를 냅니다. 브라우저는 래스터 이미지를 스니핑하므로 그래도 표시되는 경우가 많지만, 더 엄격한 소프트웨어는 거부합니다.- 공백이 들어간
image png처럼 올바른 MIME 유형이 아닌 경우에는 별도의 경고가 나옵니다.
레이블을 고치려면 파일 다운로드로 파일을 디코딩한 뒤 Data URI 생성기에서 깨끗한 URI를 만들거나, Base64 부분을 Base64 파일 변환에 붙여넣으세요. 올바른 확장자와 MIME 유형을 알려 줍니다.
의심스러운 data: 링크 검사하기
data:text/html URI는 가짜 페이지 전체가 링크 안에 담겨 있고 차단할 서버도 없기 때문에 피싱에 쓰여 왔습니다. 지금은 Chrome과 Firefox가 링크를 통해 탭이 이런 URI로 이동하는 것을 거부하지만, 이메일, QR 코드, 문서, 채팅 메시지에는 여전히 나타납니다.
이런 링크를 여기에 붙여넣으면 무엇이 보일지 안전하게 확인할 수 있습니다. 완전한 HTML 문서는 스크립트, 폼, 외부 리소스를 차단한 샌드박스 프레임에서 렌더링되고, 그 아래에 전체 소스가 나옵니다. 그 밖의 HTML이나 스크립트는 텍스트로만 표시합니다. SVG 페이로드는 스크립트가 실행되지 않는 이미지로 그리고, 마크업을 나열해 <script> 요소나 on... 핸들러를 찾아볼 수 있게 합니다. 페이지의 콘텐츠 보안 정책은 스크립트가 Cloudflare 조회수 집계에만 연결할 수 있게 하고 이미지는 사이트 자체나 data:, blob: URL에서만 불러오므로, 페이로드 속 추적 픽셀이나 원격 스크립트는 절대 요청되지 않습니다.
재인코딩과 변환
출력 인코딩은 페이로드를 건드리지 않고 URI를 다른 인코딩으로 바꿉니다.
- 그대로 유지는 줄 바꿈만 제거한 URI를 돌려줍니다.
- Base64는 바이너리 데이터와 특수 문자가 문제를 일으키는 상황에 알맞습니다.
- URL 인코딩은 일반 ASCII 텍스트와 SVG에서 더 짧고 소스에서 읽기도 쉽습니다.
출력 아래의 페이로드, URI 길이, 오버헤드를 보면 어느 인코딩이 데이터에 더 짧은지 알 수 있습니다. SVG라면 SVG를 Data URI로에서 최적화된 인코딩도 제공하고 gzip까지 포함해 세 가지를 모두 비교해 줍니다.
자주 묻는 질문
data URI에서 파일을 꺼내려면 어떻게 하나요?
URI를 붙여넣고 파일 다운로드를 누르세요. 페이로드는 내용에 맞는 확장자로 저장되며, URI에 name=이나 filename= 파라미터가 있으면 그 이름으로 저장됩니다.
MIME 유형이 없는 data URI는 무슨 뜻인가요?
data:,text와 data:;base64,...는 올바른 형식입니다. 이때 유형은 기본값인 text/plain;charset=US-ASCII가 되며, 파서는 여기에 (암시적) 표시를 붙입니다.
SVG data URI의 ;utf8은 올바른 charset인가요?
아니요. data:image/svg+xml;utf8,...는 널리 퍼진 습관이지만, 거기서 utf8은 charset이 아니라 값 없는 파라미터이며 브라우저는 이를 무시합니다. 올바른 형식은 ;charset=utf-8이거나 아예 아무것도 쓰지 않는 것입니다.
의심스러운 이메일의 data: 링크를 여기서 검사해도 안전한가요?
여기서는 안전합니다. HTML은 스크립트, 폼, 외부 리소스가 차단된 샌드박스 프레임에서 미리 보고, SVG는 이미지로 그리며, 페이지의 콘텐츠 보안 정책이 페이로드가 다른 서버에서 무언가를 불러오지 못하게 막습니다. 확인하겠다고 브라우저 탭에서 링크를 열지는 마세요.