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> タグは参照しないので、ほかの古いエンコーディングのページではプレビューでアクセント記号などが化けることがあります。ダウンロードしたファイルは元のバイト列のままです。

Base64 の HTML はどこから来るのか

メールでは、メッセージの HTML 版は多くの場合 Content-Type: text/html と Content-Transfer-Encoding: base64 を持つ MIME パートです。そのパートのエンコードされた行だけをここに貼り付けるか、生のメッセージ全体を EML デコーダー で開けば、すべてのパートと添付ファイルが表示されます。構造については メールでの Base64 で解説しています。

メールを受信したり描画したりするサービスの中には、HTML 本文を Webhook や API の JSON に Base64 フィールドとして入れて届けるものがあります。テンプレートや PDF 生成の API も、生成した HTML を同じ形で返すことがあります。JSON 内の Base64 をデコード なら、ペイロード全体を一度に処理できます。

フィッシングでは、偽のログインページ全体をリンクや添付ファイルの中に入れて運ぶのに data:text/html URI が使われます。ここに URI を貼り付ければ、実行させずにページを確認できます。こうした URI を作る方法は HTML を Base64 に変換 を参照してください。

自分のアプリで信頼できない HTML をプレビューする

同じ方法はどの Web ページでも使えます。デコードしてから、空の 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 を参照してください。

よくある質問