ファビコンにウェブサイトを保存する：技術的な概念実証
ファビコンにウェブサイトを保存する：技術的な概念実証
HTMLデータを画像ピクセルにエンコードする
Tim Wehrleは、ウェブサイトのHTMLコンテンツをファビコン内に直接保存する概念実証を実演しました。これは、画像のピクセルのRGB（Red, Green, Blue）チャンネルを生のバイトストレージとして扱うことで実現され、ファビコンを視覚的なアイコンとしてではなく、データコンテナとして効果的に使用します。
エンコードプロセス
ファビコンにウェブサイトを保存するために、コンテンツはテキストからバイトに変換され、ピクセルにマッピングされます：
- バイト変換: HTMLペイロードは
TextEncoderを使用してバイト配列に変換されます。 - 長さヘッダー: ペイロードの長さを保存するために、4バイトのヘッダーが配列の先頭に追加されます。これにより、画像に未使用の末尾ピクセルが含まれている可能性があるため、デコーダーがデータの終了位置を正確に把握できるようになります。
- ピクセルマッピング: 各バイトはカラーチャンネルに割り当てられます。最初のバイトは最初のピクセルの赤チャンネルになり、2番目のバイトは緑、3番目のバイトは青になります。このプロセスは、画像内のすべてのピクセルにわたって順次繰り返されます。
ストレージ効率と寸法
各ピクセルが3バイトのデータを保存するため、ストレージ容量は画像サイズに対して高くなります。208バイトのペイロードと4バイトのヘッダー（合計212バイト）の場合、わずか71ピクセルが必要です。9x9ピクセルの正方形の画像は81ピクセルを提供し、合計239バイトの容量を提供します。この特定の実施例では、212バイトのペイロードは9x9の画像で利用可能なスペースの87%を使用しました。
コンテンツのデコードとレンダリング
保存されたウェブサイトを取得するには、画像のデータを読み取り、HTMLを再構築するためのJavaScriptブートストラップローダーが必要です。
取得ワークフロー
- 画像読み込み: ブラウザはファビコンを標準的な画像として読み込みます。
- Canvasレンダリング: 画像はHTML5 Canvas要素に描画されます。
- ピクセル抽出: Canvas APIを使用して、すべてのピクセルのRGB値を取得します。
- 再構築: バイトは書き込まれたときと同じ順序でRGBチャンネルから抽出され、最初の4バイトはペイロードの長さを決定するために使用されます。
- デコード: バイト配列はUTF-8テキストにデコードされ、ドキュメントのbodyに注入されます。
ウェブ資産における代替データストレージ方法
ピクセルベースのアプローチは境界テストにおける創造的な演習ですが、ウェブ資産内にデータを隠したり保存したりするための他の技術的な方法が存在します：
- SVGマークアップ: SVGファビコンはXMLベースであるため、マークアップやテキストをSVGファイル内に直接保存し、
fetchリクエストと正規表現マッチングを介して抽出することができます。 - PNGメタデータ: PNG形式は、画像の視覚的な外観を変更せずに任意のテキストデータを保存することを可能にする特定のコメントチャンク (
tEXt,zTXt,iTXt) をサポートしています。 - ICO形式:
.ico形式は、単一ファイル内に異なる解像度の複数のアイコンをサポートしており、データのための追加のスペースを提供します。 - Faviconキャッシュ: 一部の研究者は、ブラウザがシークレットモードでキャッシュを不用意に再利用する場合、ファビコンキャッシュがドメインを横断したユーザーのトラッキングやフィンガープリント作成に使用できる可能性があると指摘しています。
技術的な制限
この方法は、標準的なウェブホスティングの実用的な代替手段ではありません。機能するためにはJavaScriptブートストラップローダーが必要であり、これは、ファビコン単体ではウェブサイトをレンダリングリングできないことを意味します。さらに、保存できるデータの量は、画像の寸法によって極めて限定されます。コミュニティメンバーが指摘しているように、プライバシー重視のブラウザ（Braveなど）は、トラッキング防止機能が有効な場合、ファビコンの読み込みをブロックする可能性があり、その場合ブートストラップローダーがデータにアクセスできなくなります。