将网站存储在 Favicon 中：技术概念验证
将网站存储在 Favicon 中：技术概念验证
将 HTML 数据编码进图像像素
Tim Wehrle 展示了一个概念验证，即网站的 HTML 内容可以直接存储在 favicon 中。这是通过将图像像素的 RGB（红、绿、蓝）通道视为原始字节存储空间来实现的，实际上是将 favicon 用作数据容器，而不是视觉图标。
编码过程
为了将网站存储在 favicon 中，内容会从文本转换为字节并映射到像素：
- 字节转换：使用
TextEncoder将 HTML 负载（payload）转换为字节数组。 - 长度头部：在数组前添加一个四字节的头部，用于存储负载的长度。这确保了解码器确切地知道数据在哪里结束，因为图像可能包含末尾未使用的像素。
- 像素映射：每个字节被分配给一个颜色通道。第一个字节成为第一个像素的红色通道，第二个字节成为绿色通道，第三个字节成为蓝色通道。此过程在图像的所有像素中按顺序重复。
存储效率与尺寸
由于每个像素存储三个字节的数据，因此相对于图像尺寸而言，存储容量很高。对于一个 208 字节的负载加上 4 字节的头部（总计 212 字节），仅需 71 个像素。一个 9x9 像素的正方形图像提供 81 个像素，总容量为 239 字节。在这种特定的实现中，212 字节的负载利用了 9x9 图像中 87% 的可用空间。
解码与渲染内容
检索存储的网站需要一个 JavaScript bootstrap loader 来读取图像数据并重建 HTML。
检索工作流
- 图像加载：浏览器将 favicon 加载为标准图像。
- Canvas 渲染：图像被绘制到 HTML5 Canvas 元素上。
- 像素提取：使用 Canvas API 读取每个像素的 RGB 值。
- 重建：字节按照写入时的相同顺序从 RGB 通道中提取，并且前四个字节用于确定负载的长度。
- 解码：字节数组被解码回 UTF-8 文本并注入到文档主体（body）中。
Web 资产中的其他数据存储方法
虽然基于像素的方法是一种边界测试的创意练习，但同时也存在其他技术方法可以在 Web 资产中隐藏或存储数据：
- SVG 标记：由于 SVG favicon 是基于 XML 的，因此可以将标记或文本直接存储在 SVG 文件中，并通过
fetch请求和正则表达式匹配进行提取。 - PNG 元数据：PNG 格式支持特定的注释块（
tEXt、zTXt和iTXt）来允许存储任意文本数据，而不会改变图像的视觉外观。 - ICO 格式：
.ico格式支持在单个文件中包含不同分辨率的多个图标，从而为数据提供额外的空间。 - Favicon 缓存：一些研究人员指出，如果浏览器在无痕模式下天真地复制使用缓存，favicon 缓存可以被用于跨域追踪或指纹识别用户。
技术局限性
这种方法并不是标准 Web 托管的实际替代方案。它需要一个 JavaScript bootstrap loader 才能运行，这意味着 favicon 本孩无法独立渲染网站。此外，可存储的数据量受到图像尺寸的极端限制。正如社区成员所指出的，一些注重隐私的浏览器（如 Brave）可能会在启用追踪预防功能时阻止 favicon 的加载，从而阻止 bootstrap loader 访问数据。