データ URL

データ URLdata: スキームが先頭についた URL で、コンテンツ制作者は小さなファイルをインラインで文書に埋め込むことができます。

メモ: 最近のブラウザーでは、データ URL はナビゲーションを担当する設定オブジェクトの起源を継承するのではなく、一意の不透明な起点として扱われます。

構文

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

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

mediatype は MIME タイプ文字列で, 例えば 'image/jpeg' で 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 形式へのエンコード

Base64 はバイナリからテキストへのエンコード方法の集まりで、バイナリデータを64進数表現に変換することで ASCII 文字列形式にするものです。 ASCII 文字のみから成るため、 Base64 の文字列は一般に URL でも安全ですので、データ URL のデータのエンコードに利用することができます。

Javascript でのエンコード

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

Unix システムでのエンコード

Linux や Mac OS X システムでのファイルまたは文字列の 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=

Microsoft Windows でのエンコード

Windows でのエンコードは、 PowerShell またはいくつかの専用のツールで実現できます。 WSL が有効な場合は bash の base64 ユーティリティ (Unix システムでのエンコード) で実現することもできます。

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

bash -c "echo -n hello`|base64"
# コンソールへの出力: aGVsbG8=
# ここではバッククオート記号 (`) を使ってパイプ記号 (|) をエスケープしています

よくある問題

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

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
構文
data URL の書式は非常に単純ですが、"データ" 部分の前にコンマを置くのを忘れがちです。忘れるとデータが正しく base64 形式にエンコードされません。
HTML におけるフォーマット
data はファイル内でファイルを提供しますが、外側の文書に比べて幅がとても広くなる可能性があります。 URL としては、 data はホワイトスペース (改行、タブ、空白) で体裁を整えることができるはずですが、 base64 エンコードをすると起こる問題 があります。
長さの制限
Firefox は基本的に長さ制限のない data URL に対応していますが、ブラウザーは特定の最大長のデータに対応する必要はありません。たとえば、 Opera 11 ブラウザーでは URL が65535文字に制限されており、 data URL は65529文字に制限されています (65529文字は、 MIME タイプを指定せずにプレーンの data: を使用した場合、ソースではなくエンコードされたデータの長さです)。
エラー処理の欠如
メディア内の不正な引数や、 'base64' の定義内の打ち間違いは無視され、何もエラーは出ません。
クエリ文字列のサポートの欠如、など

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

セキュリティの課題
多数のセキュリティ問題 (フィッシングなど) がデータ URL に関連付けられており、ブラウザーの最上位でそれらに移動しています。このような問題を軽減するために、Firefox 59+ (リリース版、Nightly/Beta は58以降) では data:// URLへのトップレベルのナビゲーションがブロックされており、他のブラウザがすぐに対応することを期待しています。詳細については、Firefox 58 におけるデータ URL へのトップレベルナビゲーションのブロックを参照してください。

仕様書

仕様書 題名
RFC 2397 The "data" URL scheme

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
data URL schemeChrome 完全対応 ありEdge 完全対応 12
補足
完全対応 12
補足
補足 The maximum size supported is 4GB
Firefox 完全対応 ありIE 完全対応 8
補足
完全対応 8
補足
補足 The maximum size supported is 32kB
Opera 完全対応 7.2Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
CSS filesChrome 完全対応 ありEdge 完全対応 12
補足
完全対応 12
補足
補足 The maximum size supported is 4GB
Firefox 完全対応 ありIE 完全対応 8
補足
完全対応 8
補足
補足 The maximum size supported is 32kB
完全対応 9
補足
補足 The maximum size supported is 4GB
Opera 完全対応 7.2Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
HTML filesChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
JavaScript filesChrome 完全対応 ありEdge 完全対応 12
補足
完全対応 12
補足
補足 The maximum size supported is 4GB
Firefox 完全対応 ありIE 完全対応 9
補足
完全対応 9
補足
補足 The maximum size supported is 4GB
Opera 完全対応 7.2Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Top-level navigation blocked to data:// URIsChrome 完全対応 60Edge ? Firefox 完全対応 59IE 未対応 なしOpera 完全対応 47Safari ? WebView Android 未対応 なしChrome Android 完全対応 60Firefox Android 完全対応 59Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報