Base64를 HTML로

Base64를 HTML로 디코딩하는 방법

1. Base64 또는 data URI에 Base64를 붙여넣으세요. data:text/html;base64, URI도 됩니다. 텍스트로 저장된 큰 이메일 본문은 .txt 파일 열기를 사용하세요.
2. 정보 목록에 문자 인코딩과 줄 수가 표시됩니다. 그 아래 샌드박스 프레임에 렌더링된 페이지가 “샌드박스 미리보기: 스크립트, 폼, 외부 리소스는 차단됩니다. 소스는 아래에 있습니다.“라는 안내와 함께 나옵니다.
3. 미리보기 아래 텍스트 창에 소스가 있습니다. 텍스트 복사를 누르면 전체를 복사합니다.
4. 파일 다운로드를 눌러 decoded.html을 저장하세요.

아무것도 전송되지 않습니다. 디코딩은 브라우저에서 이루어지며, 페이지는 Cloudflare 조회수 집계 외에는 네트워크 요청을 할 수 없습니다.

미리보기가 샌드박스 안에서 실행되는 이유

출처를 모르는 HTML은 텍스트를 보여 주는 것 이상의 일을 할 수 있습니다. 이메일 본문에는 언제 어디서 열었는지 알리는 추적 픽셀이 들어 있을 수 있고, 피싱 페이지에는 공격자에게 전송하는 로그인 폼이 있을 수 있으며, 어떤 페이지든 스크립트를 실행할 수 있습니다. 미리보기는 이를 각각 다음과 같이 막습니다.

정책은 인라인 스타일도 막으므로 미리보기는 메시지의 텍스트, 링크, 구조를 메일 클라이언트보다 단순하게 보여 줍니다. data: URI로 포함된 이미지는 허용되어 정상적으로 나타납니다.

2 MB보다 큰 페이지는 미리보기를 하지 않습니다(“여기서 미리 보기에는 너무 큽니다. 아래 소스를 보거나 파일을 다운로드하세요.”). 소스 창은 어떤 문서든 처음 256 KB를 보여 주며, 텍스트 복사는 8 MB까지의 문서에서 전체 소스를 복사합니다.

Base64 속 HTML 알아보기

문자 인코딩은 바이트로 감지합니다. 바이트 순서 표시, UTF-16, 올바른 UTF-8을 차례로 확인하고, 마지막 대안은 Windows-1252입니다. 문서 안의 <meta charset> 태그는 참고하지 않으므로, EUC-KR 같은 다른 레거시 인코딩으로 된 페이지는 미리보기에서 한글이나 악센트 문자가 깨질 수 있습니다. 다운로드한 파일은 원래 바이트를 그대로 유지합니다.

Base64 HTML이 나오는 곳

이메일에서는 메시지의 HTML 버전이 Content-Type: text/html과 Content-Transfer-Encoding: base64가 붙은 MIME 파트인 경우가 많습니다. 그 파트의 인코딩된 줄만 여기에 붙여넣거나, 원본 메시지 전체를 EML 디코더에서 열면 모든 파트와 첨부 파일을 볼 수 있습니다. 구조는 이메일 속 Base64에서 설명합니다.

이메일을 수신하거나 렌더링하는 일부 서비스는 HTML 본문을 웹훅이나 API의 JSON 안에 Base64 필드로 전달하며, 템플릿 API와 PDF 렌더링 API도 생성한 HTML을 같은 방식으로 돌려주기도 합니다. JSON 안의 Base64 디코딩은 페이로드 전체를 한 번에 처리합니다.

피싱 캠페인은 data:text/html URI를 이용해 링크나 첨부 파일 안에 가짜 로그인 페이지 전체를 담습니다. URI를 여기에 붙여넣으면 실행하지 않고 페이지를 볼 수 있습니다. 이런 URI를 만드는 방법은 HTML을 Base64로를 참고하세요.

직접 만든 앱에서 신뢰할 수 없는 HTML 미리 보기

같은 방법은 어떤 웹 페이지에서도 쓸 수 있습니다. 디코딩한 다음 결과를 빈 sandbox 속성이 있는 iframe에 넣으세요. 샌드박스만으로는 원격 이미지와 스타일시트 로드를 막지 못하므로 프레임용 Content Security Policy를 앞에 붙이세요.

function previewHtml(b64, container) {
  const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
  const html = new TextDecoder().decode(bytes);
  const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'">`;
  const frame = document.createElement("iframe");
  frame.setAttribute("sandbox", "");
  frame.srcdoc = csp + html;
  container.append(frame);
}

Chrome에서 스크립트, 원격 스타일시트, 원격 이미지가 든 테스트 페이지를 이 함수로 열었을 때 스크립트는 실행되지 않았고 요청도 하나도 발생하지 않았습니다. <meta> 줄을 빼면 이미지와 스타일시트를 가져왔습니다. 이 페이지의 미리보기와 달리 이 함수는 인라인 스타일을 유지합니다. 자세한 내용은 JavaScript에서 Base64에 있습니다.

자주 묻는 질문