data URIs

data: スキームが先頭についている URL である data URI を使うと、コンテンツ製作者は小さなファイルをインラインで文書に埋め込むことができます。

構文

data URI は接頭辞 (data:)、データの種類を示す MIME タイプ、テキストではないデータである場合のオプションである base64 トークン、データ自体の 4 つの部品で構成されます:

data:[<mediatype>][;base64],<data>

mediatype は MIME タイプ文字列で, 例えば JPEG 画像に対しては 'image/jpeg' を使います。省略時のデフォルトは text/plain;charset=US-ASCII です。

データが文字ならば、そのまま埋め込めます (埋め込む文書タイプに応じて、適切な実体参照やエスケープを行なってください)。それ以外では base64 を指定し、base64 エンコードしたバイナリデータを埋め込みます。

例:

data:,Hello%2C%20World!

平易な text/plain データ

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

同じ内容の base64 エンコード版

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

<h1>Hello, World!</h1> という HTML 文書

data:text/html,<script>alert('hi');</script>

JavaScript のアラートを実行する HTML 文書。終了タグが必要ですので注意してください。

データを base64 形式にエンコードする

Linux や Mac OS X ではコマンドラインユーティリティ uuencode を使うと簡単です:

uuencode -m infile remotename

infile 引数は base64 形式にエンコードしたいファイルの名前です。remotename はリモートのファイル名で、実際には data URL 内で使われません。

出力は次のようなものになるでしょう:

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

data URI は、最初のヘッダー行より後ろのエンコードされたデータを使います。

ウェブページ内で JavaScript を使用する

Web API に、base64 のエンコードやデコードを行う機能があります: Base64 encoding and decoding。

よくある問題

この章では data URI を作ったり使ったりするときに、よく起こる問題について述べます。

構文

data の書式は非常に単純ですが、"データ" 部分の前にカンマを置くのを忘れがちです。忘れるとデータが正しく base64 形式にエンコードされません。

HTML における体裁

data が作るファイル内のファイルは、元の文書に比べて幅が非常に広くなる可能性があります。URL としては data はホワイトスペース (ラインフィード、タブ、スペース) で体裁を整えられるべきですが、base64 エンコードをすると起こる問題 があります。

長さの制限

Firefox は基本的に無限長の data URI をサポートしていますが、ブラウザーによって扱えるデータの最大長は違います。例えば Opera 11 では data URI は約 65000 文字までに制限されます。

エラー処理の欠如

メディア内の不正なパラメータや、'base64' の定義内の打ち間違いは無視され、何もエラーは出ません。

クエリ文字列のサポートの欠如、など

data URI のデータ部分は不透明 (opaque) なので、data URI と一緒にクエリ文字列（<url>?parameter-data という構文で表されるページ固有のパラメータ）を使うと、data URI が表現するデータに単にクエリー文字列が含まれたものになります。例をあげます:

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

これは次の内容の HTMLリソース を表します:

lots of text...<p><a name="bottom">bottom</a>?arg=val

仕様

ブラウザ実装状況

[1] IE8 では CSS 内の data URI だけがサポートされており、最大サイズは 32kB です。

[2] Edge を含む IE9 以降では CSS および JS ファイル内で data URI をサポートしますが、HTML ファイル内ではサポートしません。また、最大サイズは 4GB です。

関連情報

• Base64 encoding and decoding
• atob()
• btoa()
• CSS url()
• URI