data: URL

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

data:[<media-type>][;base64],<data>

media-type は MIME タイプで, 例えば 'image/jpeg' で JPEG 画像を表します。省略時の既定値は text/plain;charset=US-ASCII です。

データに RFC 3986 で予約文字として定義されている文字が含まれている場合、または空白文字、改行文字、その他の出力されない文字が含まれている場合は、それらの文字はパーセントエンコードでエンコードする必要があります。

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

例:

data:,Hello%2C%20World%21

text/plain データで Hello, World! です。なお、カンマはパーセントエンコードで %2Cとなり、空白は %20 となります。

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

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

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

HTML 文書で <h1>Hello, World!</h1>

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E

HTML 文書で <script>alert('hi');</script> であり、JavaScript のアラートを実行する HTML 文書。終了タグが必要ですので注意してください。

Base64 は、バイナリーからテキストへエンコードする方式の総称で、バイナリーデータを ASCII 文字列形式へ、64 進表現に変換することで表します。URL 構文で許可されている文字（「URL セーフ」）のみで構成されているため、データ URL にバイナリーデータを安全にエンコードすることができます。Base64 は、URL で特別な意味を持つ可能性のある文字 + と / を使用することができます。データ URL には URL パス区間やクエリー引数がないため、このコンテキストではこのエンコード方式は安全です。

Web API には、 base64 をエンコードまたはデコードするためのネイティブメソッド、 Base64 があります。

Linux や macOS システムでのファイルまたは文字列の Base64 エンコードは、コマンドラインの base64 （または、他にも uuencode ユーティリティの -m オプションつき）を使用して実現できます。

echo -n hello|base64
# コンソールへの出力: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# コンソールへの出力: aGVsbG8=

base64 a.txt>b.txt
# b.txt ファイルへの出力: aGVsbG8=

Windows では、 Convert.ToBase64String を PowerShell で使用することで Base64 エンコードを行うことができます。

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

他にも、 GNU/Linux シェル (WSL など) が base64 ユーティリティを提供しています。

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

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

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

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

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

構文

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

HTML におけるフォーマット

data はファイル内でファイルを提供しますが、外側の文書に比べて幅がとても広くなる可能性があります。 URL としては、 data はホワイトスペース (改行、タブ、空白) で体裁を整えることができるはずですが、 base64 エンコードをすると起こる問題 があります。

長さの制限

ブラウザーは特定の最大長のデータに対応する必要はありません。 Chromium と Firefox では data URL は 512MB に制限されており、 Safari (WebKit) は 2048MB に制限されています。 なお、 Firefox 97 では制限が 256KB から 32MB へ拡大され、 Firefox 136 ではさらに 512MB に拡大されました。

エラー処理の欠如

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

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

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

セキュリティの課題

多数のセキュリティ問題 (フィッシングなど) がデータ URL に関連付けられており、ブラウザーの最上位でそれらに移動しています。このような問題を軽減するために、最近のすべてのブラウザーでは data: URL へのトップレベルのナビゲーションがブロックされています。詳細については、 Mozilla Security Team のブログ投稿を参照してください。

• Base64
• パーセントエンコーディング
• atob()
• btoa()
• CSS <url>
• URI