Loading article…
データURIスキームは、 Webページにデータを外部リソースのようにインラインで埋め込む方法を提供する統一リソース識別子（URI）スキームです。 [ 1 ]これはファイルリテラルまたはヒアドキュメントの一種です。この手法により、通常は別々に扱われる画像やスタイルシートなどの要素を単一のHypertext Transfer Protocol（HTTP）リクエストで取得できるため、複数のHTTPリクエストよりも効率的になる可能性があります。[ 2 ]また、いくつかのブラウザ拡張機能では、画像やその他のマルチメディアコンテンツを単一のHTMLファイルにパッケージ化してページを保存するために使用されています。[ 3 ] [ 4 ] 2024年現在データURIは、主要なブラウザすべてで完全にサポートされています。[ 5 ]
データURIの構文は、 1998年8月に公開されたRequest for Comments（RFC） 2397 [ 6 ]で定義されており、 URIスキーム構文に従います。典型的なデータURI（例data:content/type;base64,）は、以下の要素で構成されます。
data:attribute=value。メディアタイプ部分は、セミコロン（;）で区切られた の形式で 1 つ以上のパラメータを含めることができます。一般的なメディアタイプパラメータは でcharset、メディアタイプの文字セットを指定します。ここで、 の値は IANA の文字セット名リストから取得されます。[ 7 ]が指定されていない場合、データ URI のメディアタイプはtext/plain;charset=US-ASCIIであるとみなされます。base64、前の部分とはセミコロンで区切られます。この拡張子が存在する場合、URI のデータコンテンツはバイナリデータであり、バイナリからテキストへのエンコードにBase64スキームを使用してASCII形式でエンコードされていることを示します。base64 拡張子は、コンポーネントを持たず、メディアタイプパラメータの後に来ることで、メディアタイプパラメータと区別されます。Base64 エンコードされたデータは元のデータより約 33% 大きくなるため、サーバーがHTTP 圧縮をサポートしている場合、または埋め込みファイルが 1KB 未満である場合にのみ、Base64 データ URI を使用することをお勧めします。=value,）で区切られます。データは、文字として表される 0 個以上のオクテットのシーケンスです。データ URI では、データ部分の長さが 0 の場合でも、コンマが必要です。データ部分で許可される文字には、ASCII の大文字と小文字、数字、および多くの ASCII 句読点と特殊文字が含まれます。これには、データ部分の前の URI コンポーネントの区切り文字であるコロン、セミコロン、コンマなどの文字が含まれる場合があることに注意してください。その他のオクテットはパーセントエンコードする必要があります。データが Base64 エンコードされている場合、データ部分には有効な Base64 文字のみを含めることができます。[ 8 ] Base64 エンコードされたURI は、いわゆる「 URL セーフ Base64 」文字セットではなく、data:標準の Base64 文字セット（文字 62 と 63 として ' +' と ' ' を使用）を使用することに注意してください。/ほとんどの機能を示すデータURIの例を以下に示します。
data:text/vnd-example+xyz;foo=bar;base64,R0lGODdhdata:text/plain;charset=UTF-8;page=21,the%20data:1234,5678（出力：「データ：1234,5678」）data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAADdata:image/svg+xml,<svg width="10"... </svg>最小限のデータURIはdata:,、スキーム、メディアタイプなし、および長さゼロのデータで構成されます。
したがって、URI構文全体において、データURIはスキームとパスで構成され、オーソリティパート、クエリ文字列、フラグメントは含まれません。オプションのメディアタイプ、オプションのbase64インジケータ、およびデータはすべてURIパスの一部です。
小さな赤い点（）のbase64エンコードされたPNG画像を埋め込んだHTMLフラグメント：
< img alt = "赤い点" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" width = "5" height = "5" >この例では、書式設定のために改行されています。実際のURI（データURIを含む）では、制御文字（ASCII 0～31、および127）とスペース（ASCII 32）は「除外文字」です。つまり、データURIでは空白文字は許可されていません。ただし、HTML 4およびHTML 5では、要素属性値（上記の「src」など）内の改行は無視されます。したがって、上記のデータURIは改行を無視して処理され、正しい結果が得られます。ただし、これはHTMLの機能であり、データURIの機能ではないことに注意してください。他のコンテキストでは、URI内の空白が無視されることを前提とすることはできません。
より大きな赤い点のSVG画像（）を埋め込んだHTMLフラグメント
：
< img alt = "赤い点" src = "data:image/svg+xml, <svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'> <circle style='fill:red' cx='5' cy='5' r='5'/> </svg>" >この例では、画像ソースを囲むためにダブルクォートが使用されているため、SVGデータではシングルクォートを使用する必要があります。
ファビコンは、HTMLの「head」セクションに記述する必要のあるSVGデータを使用して作成することもできます。
< link rel = "icon" href = 'data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"> <circle style="fill:red" cx="5" cy="5" r="5"/> </svg>' >背景画像を含むカスケーディングスタイルシート（CSS）ルール：
ウル。チェックリスト完全な{パディング左: 20ピクセル;背景：白URL （'data:image/png;base64,iVB\ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\AAAD///+l2Z/dAAAAM 0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\FTkSuQmCC' )繰り返しなしで左上にスクロールします。}この例では、\ + <linefeed>行末記号はCSSの機能であり、次の行への継続を示しています。これらはCSSスタイルシートプロセッサによって削除され、データURIは空白なしで再構成されるため、正しいものになります。なぜなら、データURIのデータコンポーネント内には空白が許可されていないからです。
脚注リンクのように、埋め込みサブウィンドウを開くJavaScriptステートメント：
window.open ( 'data:text/html;charset=utf-8,' + encodeURIComponent ( // URLフォーマットのためのエスケープ'<!DOCTYPE html>' + '<html lang="en">' + ' <head><title>Embedded Window</title></head>' + '<body><h1>42</h1></body>' + '</html>' ) );
Base64でエンコードされたJPEG画像が埋め込まれたスケーラブルベクターグラフィック画像：
<svg> <画像幅= "64"高さ= "24" href= 「データ:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5lt」 c1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O///////// ////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAG QAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFA EBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4U yRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1e AzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k= /> </svg>データURIは、疑いを持たないWebユーザーからユーザー名とパスワードを取得しようとする攻撃ページを作成するために利用できます。また、クロスサイトスクリプティング（XSS）の制限を回避するためにも使用でき、攻撃ペイロードをアドレスバー内に完全に埋め込んだり、第三者が管理する完全なWebサイトを必要とせずにURL短縮サービスを介してホストしたりできます。[ 9 ]その結果、現在では一部のブラウザがWebページからデータURIへのナビゲーションをブロックしています。[ 10 ]