HTML을 Base64로: data URI용 마크업 인코딩

HTML을 Base64로 인코딩하는 방법

1. 입력 · 텍스트에 마크업을 붙여넣거나, 예시를 눌러 작은 문서를 불러오세요.
2. 출력 · Base64에서 Base64를 복사하세요.
3. 문자 인코딩은 UTF-8로 두고, data URI나 문서 안에 UTF-8을 선언하세요(아래 참고).
4. data URI가 필요하면 앞에 data:text/html;charset=utf-8;base64,를 붙이고, 아니면 Base64만 요청한 API 필드에 붙여넣으세요.

예시인 <!doctype html>과 <h1>Hello from base64hub</h1> 두 줄은 PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+로 인코딩됩니다. Base64를 HTML로가 이를 되돌립니다.

예시

€ 같은 엔티티는 Base64 입장에서는 그냥 텍스트라 그대로 남고, 디코딩한 뒤 브라우저가 해석합니다. PCFkb2N0eXBl이나 PCFET0NUWVBF로 시작하는 문자열은 HTML 문서(<!doctype 또는 <!DOCTYPE)이고, PGh0bWw는 <html입니다.

data:text/html URI 만들기

완전한 data URI는 스킴, 미디어 형식, 선택 사항인 charset, Base64 표시의 네 부분으로 이루어집니다.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

URI에 charset=utf-8도 없고 문서에 <meta charset="utf-8">도 없으면 브라우저가 바이트를 레거시 인코딩으로 읽을 수 있고, 그러면 café가 café로 깨집니다. 한국어 환경에서는 EUC-KR로 읽혀 한글이 깨지기도 합니다. HTML 안에 meta 태그를 넣어 두면 문서가 어디로 가든 보호됩니다.

대표적인 용도는 다음과 같습니다.

• iframe에서는 <iframe src="data:text/html;base64,...">는 별도 파일 없이 자체 완결형 조각을 보여 줍니다. 직접 작성하는 HTML이라면 인코딩이 전혀 필요 없는 srcdoc 속성이 더 간단한 경우가 많습니다.
• 브라우저 테스트를 비롯한 자동화 작업은 웹 서버 없이 data URI로 픽스처 페이지를 불러올 수 있습니다.
• 일부 이메일, PDF 렌더링, 문서 API는 따옴표와 줄 바꿈을 JSON 이스케이프할 필요가 없도록 HTML 본문을 Base64 필드로 받습니다.

브라우저는 웹 페이지가 메인 창을 data:text/html URL로 이동시키지 못하게 하므로, 그런 URL로의 링크와 리디렉션은 조용히 실패하거나 오류를 표시합니다. iframe은 영향을 받지 않습니다.

크기와 대안

Base64는 마크업을 약 3분의 1 키웁니다. 49바이트 문서 <!doctype html><meta charset="utf-8"><p>café</p>는 68문자가 됩니다. ASCII 위주의 HTML이라면 #, %, 비 ASCII 바이트 같은 몇몇 문자만 이스케이프하면 되므로 퍼센트 인코딩한 data URI가 더 짧은 경우가 많습니다. 마크업이 크거나, 특수 문자가 많거나, Base64만 받는 필드에 넣는다면 Base64가 더 안전합니다. data URI 생성기는 HTML, CSS, 이미지용 data: 링크를 만들고, Data URI 성능은 캐시와 크기의 장단점을 다룹니다.

코드에서 HTML을 Base64로

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

브라우저에서는 JavaScript의 Base64에 나오는 TextEncoder 방식을 쓰세요. btoa만으로는 비 ASCII 문자가 깨지거나 거부되기 때문입니다. Python의 Base64도 참고하세요.

자주 묻는 질문