Data URI 解析｜data: URL を確認・デコード・再エンコード

data URI を解析する手順

URI をボックスに貼り付けます。url("data:...") を含む CSS のルール、<img src="data:..."> タグ、Markdown の画像など、コードの中に入ったままでもかまいません。最初の data: URI が抽出され、ステータス行にその旨が表示されます。
結果を確認します。MIME タイプ、パラメータ、エンコード方式（Base64 か URL エンコード）、データ部分 の文字数、デコード後のサイズ、推定される内容 が表示されます。
その下で、ペイロードが SHA-256 と 16進ダンプとともにプレビューされます。画像、SVG、PDF、音声、動画、フォント、テキスト、JSON、ZIP アーカイブなどに対応しています。
出力エンコード で URI をそのまま残すか Base64 や URL エンコードに変換し、CSS の url() や HTML タグなどの 出力形式 を選んで結果をコピーします。ファイルをダウンロード でペイロードを保存できます。

パーサーが受け付けるもの

パーサーは Fetch 標準の data URL の規則に従います。ブラウザが実装しているのはこの規則で、元の RFC 2397 より寛容なので、ブラウザが受け付けるものはすべて受け付けます。

入力	結果
`data:,A%20brief%20note`	`text/plain`（暗黙）、文字コード US-ASCII、12 バイト：`A brief note`
`DATA:Image/PNG ; Base64 ,iVBORw0KGgo=`	`image/png`、Base64、8 バイト：PNG のシグネチャ
`data:text/plain;charset=iso-8859-7,%e1%e2%e3`	3 バイト。宣言された文字コードで `αβγ` と表示
`data:;base64,SGk=`	`text/plain`（暗黙）、2 バイト：`Hi`
`data:text/plain;base64,SGVsbG8gV29ybGQ`	パディングがなくても問題なし：`Hello World`
`data:image/png;name=logo.png;base64,iVBOR...`	パラメータ `name=logo.png`。ダウンロード時の名前に使用
`data:image/png;base64`	エラー：カンマがないため、データ部分がない

ブラウザと同じく、URI 内の改行とタブは解析前に取り除くので、スタイルシートで複数行に折り返された URI も解析できます。;base64 は大文字と小文字を区別せず、引用符で囲まれたパラメータの値は引用符を外し、URL セーフな Base64 も受け付けます。パーセントエスケープは先にバイトへデコードするので、Base64 の本体が %2B%2F のように書かれていても動作します。

宣言されたタイプと実際の内容

data URI の MIME タイプはただのラベルです。パーサーはデコードしたバイト列を既知のファイルシグネチャと照合し、食い違っていれば警告します。

data:image/jpeg;base64,iVBORw0KGgo... では「image/jpeg と宣言されていますが、内容は PNG のようです。」と表示されます。ブラウザはラスター画像の中身を推測するので、たいていはそれでも表示されますが、より厳格なソフトウェアは拒否します。
スペースを含む image png のように、有効な MIME タイプでないものには別の警告が出ます。

ラベルを直すには、ファイルをダウンロード でファイルをデコードして Data URI 生成ツールできれいな URI を作り直すか、Base64 の部分を Base64 からファイルへに貼り付けてください。こちらは正しい拡張子と MIME タイプを提示します。

怪しい data: リンクを調べる

data:text/html の URI は、偽のページ全体がリンクの中に入っていて、ブロックできるサーバーが背後に存在しないため、フィッシングに使われてきました。現在の Chrome と Firefox はリンクからタブでそれらを開くことを拒否しますが、メール、QR コード、文書、チャットのメッセージには今でも現れます。

そうしたリンクをここに貼り付ければ、何が表示されるのかを安全に確認できます。完全な HTML 文書は、スクリプト、フォーム、外部リソースをブロックするサンドボックスのフレームで描画され、その下にソース全体が表示されます。それ以外の HTML やスクリプトはテキストとしてのみ表示します。SVG のペイロードはスクリプトを実行しない画像として描画し、そのマークアップも一覧にするので、<script> 要素や on... ハンドラーがないかを確認できます。ページの Content Security Policy はスクリプトの接続先を Cloudflare のページビュー計測だけに限り、画像はサイト自身か data: と blob: の URL からしか読み込まないため、ペイロード内のトラッキングピクセルやリモートスクリプトが取得されることはありません。

再エンコードと変換

出力エンコード は、ペイロードに手を加えずに URI を別のエンコード方式に変えます。

そのまま は、改行を取り除いた URI を返します。
Base64 は、バイナリデータや、特殊文字が問題を起こす場面に向いています。
URL エンコード は、プレーンな ASCII テキストや SVG なら短くなり、ソース上でも読めます。

出力の下の ペイロード、URI の長さ、オーバーヘッド を見れば、自分のデータにはどちらのエンコード方式が短いかがわかります。SVG の場合は、SVG から Data URI へが最適化したエンコードも提供し、gzip も含めた 3 つを比較できます。

よくある質問

data URI からファイルを取り出すには？

URI を貼り付けて ファイルをダウンロード を押します。ペイロードは内容に合った拡張子で保存され、URI に name= や filename= パラメータがあればその名前で保存されます。

MIME タイプのない data URI はどういう意味ですか？

data:,text や data:;base64,... も有効です。その場合タイプは既定の text/plain;charset=US-ASCII になり、パーサーはそれを （暗黙） と表示します。

SVG の data URI の ;utf8 は有効な文字コード指定ですか？

いいえ。data:image/svg+xml;utf8,... は広く見かける書き方ですが、この utf8 は値のないパラメータで、文字コードの指定ではありません。ブラウザはこれを無視します。正しくは ;charset=utf-8 で、何も書かなくてもかまいません。

怪しいメールに含まれる data: リンクを調べても安全ですか？

ここでなら安全です。HTML はスクリプト、フォーム、外部リソースをブロックしたサンドボックスのフレームでプレビューし、SVG は画像として描画します。さらにページの Content Security Policy により、ペイロードがほかのサーバーから何かを読み込むことはできません。中身を知るためにブラウザのタブでリンクを開くのはやめてください。