■データURL

※参考： MDN / データURL

●使用例： <img src="data:～">

©M.C.Escher

データURLとは「data:」で始まるURLで、任意のファイルをテキストデータとして文書に埋め込むことができる。 左の画像はバイナリデータを base64 形式のテキストに変換し、データURLとして HTML 文書に埋め込んだものである。 base64 変換については後述する。

●使用例： <iframe src="data:～">

データURLとして書かれた文書を、<iframe> の中に表示することができる。 たとえば下記のリンクをクリックすると、その内容を下部の <iframe> に表示する。

• data:text/plain,Hello, World!
  
• data:text/html,<h1>Hello, World!</h1>
  
• data:text/html;charset=utf-8,<h3>charsetで文字コード指定</h3>
  

※注： charset を指定しない場合は、"charset=us-ascii" とみなされる。

●データURL表示先の制約について

セキュリティ的な制約から、データURLを次の方法でトップレベルのウィンドウに表示することはできない。 表示先がフレームなら問題ない。

• <a href="data:～"> をクリックしてリンクを開く
• window.open("data:～");
• window.location = "data:～";

ただし次の場合は、トップレベルのウィンドウにもデータURLを表示できる。

• ブラウザのアドレスバーにデータURLを直接入力して表示する
• 画像形式「image/*」のデータURLは、基本的にどこにでも表示可能
• 例外として画像形式「image/svg+xml」のデータURLはブロックされる
• PDF文書「application/pdf」のデータURLはどこにでも表示可能
• （その他、省略）

※参考： Mozilla / データ URL へのトップレベルナビゲーションのブロック

●Base64 変換

バイナリデータや UTF-8 エンコード以外の文字列をデータURLに埋め込みたい場合は、次のような Base64 形式を利用する。

Base64 テキストは JavaScript で簡単に作れる。 たとえば次に示すのは、ローカルファイルを読み込み、Base64 形式のデータURLとして出力するツールである。

※フレーム内のみ表示→ enc-base64.html