Canvas 指纹怎么生成

防关联浏览器指纹前端开发 Canvas指纹

浏览器指纹开发教程

发布日期: 2026-05-29

Canvas 指纹是浏览器指纹中最重要、最稳定的参数之一。它利用 HTML5 Canvas 的图形渲染差异，在不同设备上生成几乎唯一的标识值。

生成原理

Canvas 指纹的核心思想是：同一图形指令在不同硬件和软件环境下的渲染结果存在细微差异。

这些差异来源于：

显卡型号与驱动：NVIDIA、AMD、Intel 核显的渲染算法不同
操作系统：Windows、macOS、Linux 的字体渲染和抗锯齿策略不同
浏览器内核：Chromium、Firefox、Safari 的图形管线实现不同
浏览器版本：同一浏览器不同版本的渲染引擎可能有微调

标准生成流程

第一步：创建离屏画布

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 50;
const ctx = canvas.getContext('2d');

第二步：绘制复合图形

关键是在画布上混合多种元素（文本、几何图形、渐变、阴影），最大化渲染差异：

function drawFingerprintCanvas(ctx, width, height) {
  // 背景渐变
  const gradient = ctx.createLinearGradient(0, 0, width, height);
  gradient.addColorStop(0, '#f60');
  gradient.addColorStop(1, '#ff6');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);

  // 阴影设置
  ctx.shadowColor = 'rgba(0,0,0,0.3)';
  ctx.shadowBlur = 5;
  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;

  // 主文本
  ctx.textBaseline = 'alphabetic';
  ctx.font = 'bold 18px Arial, sans-serif';
  ctx.fillStyle = '#069';
  ctx.fillText('EasyBR Canvas FP', 10, 25);

  // 叠加文本（制造抗锯齿差异）
  ctx.font = 'italic 14px Georgia, serif';
  ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
  ctx.fillText('Browser Fingerprint', 12, 40);

  // 几何图形
  ctx.beginPath();
  ctx.arc(170, 20, 12, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.fill();
  ctx.strokeStyle = '#00f';
  ctx.lineWidth = 2;
  ctx.stroke();

  // 贝塞尔曲线
  ctx.beginPath();
  ctx.moveTo(10, 45);
  ctx.bezierCurveTo(50, 35, 100, 55, 140, 40);
  ctx.strokeStyle = 'rgba(0, 255, 255, 0.6)';
  ctx.lineWidth = 1.5;
  ctx.stroke();
}

第三步：提取像素数据并哈希

async function getCanvasFingerprint() {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 50;
  const ctx = canvas.getContext('2d');

  drawFingerprintCanvas(ctx, 200, 50);

  // 方法 1：toDataURL（Base64 编码的 PNG）
  const dataUrl = canvas.toDataURL('image/png');

  // 方法 2：getImageData（原始像素数组）
  const imageData = ctx.getImageData(0, 0, 200, 50);
  const pixels = imageData.data; // Uint8ClampedArray

  // 哈希计算
  const hash = await hashPixels(pixels);
  return { hash, dataUrlLength: dataUrl.length };
}

async function hashPixels(pixels) {
  const buffer = pixels.buffer;
  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

为什么会产生差异

1. 字体渲染差异

不同操作系统对同一字体的字形、字距、抗锯齿处理不同。例如 Arial 在 Windows ClearType、macOS 子像素渲染、Linux FreeType 下的显示效果有明显差异。

2. 抗锯齿算法

各浏览器使用不同的抗锯齿策略：

Chromium：基于 Skia 图形库
Firefox：基于 Gecko 自己的渲染管线
Safari：基于 WebKit 的 CoreGraphics

3. 色彩空间处理

sRGB 与其他色彩空间的转换在不同实现中有舍入差异。

4. GPU 加速差异

部分浏览器对 Canvas 操作使用 GPU 加速，部分使用 CPU 软渲染，结果可能不同。

在 EasyBR 中修改 Canvas 指纹

EasyBR 指纹浏览器通过以下方式修改 Canvas 指纹：

噪声注入：在渲染结果的像素数据中注入微小噪声，使哈希值改变但人眼不可察觉
CPU 模拟：强制使用 CPU 软渲染，绕过 GPU 差异
一致性保持：同一环境内的多次 Canvas 指纹采集结果保持一致

注意：EasyBR 的 Canvas 指纹修改是"噪声型"而非"替换型"，
即不会替换成另一台设备的指纹，而是在原有基础上添加可控噪声。
这样可以避免与真实设备指纹完全重合导致的异常标记。

风险边界

Canvas 修改可被检测：部分高级反作弊系统会检测 Canvas 指纹的”噪声特征”，过度修改可能反而被标记
toDataURL 和 getImageData 结果需一致：如果两者返回的指纹不同，会被视为异常
性能开销：噪声注入会增加少量渲染开销，对普通页面影响很小
不保证 100% 通过检测：Canvas 指纹只是防关联的一个环节，需配合 IP、Cookie、行为等多个维度

测试你的 Canvas 指纹

// 快速测试脚本，可在浏览器控制台运行
(async () => {
  const c = document.createElement('canvas');
  c.width = 200; c.height = 50;
  const x = c.getContext('2d');
  x.textBaseline = 'top';
  x.font = '14px Arial';
  x.fillText('Test Canvas FP', 2, 2);
  const d = c.toDataURL();
  const h = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(d));
  console.log('Canvas FP:', Array.from(new Uint8Array(h)).map(b => b.toString(16).padStart(2,'0')).join('').slice(0,16));
})();