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, を付け、API のフィールドが求めているなら Base64 だけを貼り付けます。

2 行のサンプル <!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 は、スキーム、メディアタイプ、省略可能な文字コード、Base64 フラグの 4 つの部分からなります。

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

URI に charset=utf-8 がなく、文書にも <meta charset="utf-8"> がないと、ブラウザがバイト列をレガシーな文字コードで読み、café が café と表示されることがあります。HTML の中に meta タグを入れておけば、文書がどこに置かれても守られます。

よくある用途：

• iframe では、<iframe src="data:text/html;base64,..."> の形で別ファイルなしに完結したスニペットを表示できます。手書きの HTML なら、エンコードがまったく要らない srcdoc 属性のほうが簡単なことも多いです。
• ブラウザのテストなどの自動化では、Web サーバーなしに Data URI からフィクスチャのページを読み込めます。
• メール、PDF 生成、文書の API の中には、引用符や改行を JSON でエスケープせずに済むよう、HTML 本文を Base64 のフィールドで受け付けるものがあります。

ブラウザは、Web ページがメインウィンドウを 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 もご覧ください。

よくある質問