1. 浏览器指纹中的 Canvas 是什么
Canvas (HTMLCanvasElement) 是一个广泛支持的 API,用于在网页上渲染 2D 图形和图像。虽然它主要用于绘制形状和操作图像,但由于其半确定性像素输出,已被浏览器指纹引擎广泛采用。
每个使用 Canvas 的浏览器在渲染相同文本、渐变或形状时可能会有细微的视觉差异,受以下因素影响:
- GPU 加速状态(启用/禁用)
- 字体渲染引擎(FreeType、DirectWrite、CoreText 等)
- 抗锯齿、子像素精度
- Canvas 和图像处理栈(Chromium 基于浏览器的 Skia)
这些像素级差异形成了跨站点唯一识别设备的基础。
2. 平台如何检测 Canvas 指纹
Canvas 指纹通过添加隐藏的 <canvas> DOM 元素并执行标准绘图命令来提取栅格化像素数据。
指纹平台使用的示例测试代码:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");
// Draw a styled text
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
ctx.fillStyle = "#00f";
ctx.fillText("FlashID", 2, 2);
// Extract base64-encoded PNG
const dataURL = canvas.toDataURL();
指纹平台分析这些数据以:
- 逐像素比较输出
- 哈希编码的 PNG/JPEG 输出
- 检测渲染管道指纹 — 例如,文本布局或渐变处理的细微差异
- 使用 Canvas2DRenderingContext 属性进行功能推断
- 与 WebGL 和 WebGPU 输出关联,构建一致的渲染身份
此外:
- 伪造 navigator.userAgent 但使用真实渲染引擎的浏览器仍会生成唯一的 Canvas 输出
- 无头和自动化系统显示不一致的渲染行为,这是检测的红旗
3. FlashID 如何掩码 Canvas 指纹
FlashID 提供多层 Canvas 掩码技术,保护免受基于 Canvas 的识别和文本渲染分析。
FlashID 的保护包括:
- Canvas.toDataURL 和 toBlob 掩码
- FlashID 劫持 Canvas 渲染的数据输出,并用预生成的稳定 base64 哈希替换
- 模拟假 PNG 来源,同时保持相同的编码行为和压缩方案
- 虚拟文本和形状渲染
- 为任何绘图模式产生一致的假像素输出
- 模拟假抗锯齿行为,模仿标准桌面、移动设备,甚至遗留系统的帧缓冲区
- Canvas2DRenderingContext 伪装
- 隐藏/最小化基于
isPointInPath、measureText、getImageData、createLinearGradient等调用的检测
- 字体内部一致性引擎
- 模拟字体渲染栈,如 CoreText、Skia、Freetype,而不依赖真实操作系统的字体栅格化
- 反取证渲染功能
- 允许用户在每个浏览器会话中随机化或锁定渲染响应
- 完全支持非确定性(随机化)、静态(预设)或标准化(混合)渲染策略
- 与 WebGL、WebGPU 和 ImageData 的集成
- 创建匹配、统一的 GPU+Canvas 渲染配置文件
- 防止渲染 API 之间的不匹配警报
依赖 Canvas 进行指纹的平台(包括 Panopticlick、FingerprintJS 和商业 AML 引擎)被 FlashID 击败。我们的 Canvas 掩码不需要浏览器补丁、特殊钩子或激进修改 — 它在保持渲染逻辑和预期行为的同时悄无声息地工作。
您可能还喜欢

