为什么从历史记录打开网页时FingerprintJS生成的指纹会变化？

Question

**问题：为什么从历史记录打开网页时，FingerprintJS生成的浏览器指纹会发生变化？** 在使用 FingerprintJS 进行浏览器指纹识别时，有些开发者发现：当用户通过浏览器历史记录重新访问同一页面时，生成的指纹会发生变化。这可能导致用户识别失败或误判。这种现象通常与页面加载上下文、资源加载顺序、浏览器缓存机制以及某些动态特征（如 canvas 渲染、时区、语言设置）的变化有关。理解这些因素如何影响 FingerprintJS 的采集过程，是解决指纹不一致问题的关键。

Answer 1

1. 背景与问题定义

FingerprintJS 是一种广泛使用的浏览器指纹识别库，通过采集浏览器的多种属性（如 User-Agent、Canvas 渲染、屏幕分辨率、插件信息等）生成一个唯一的标识符，用于用户追踪、反欺诈、身份验证等场景。

然而，部分开发者反馈，在用户通过浏览器历史记录重新访问页面时，FingerprintJS 生成的指纹值会发生变化，这会导致用户识别失败或误判。这种现象的核心问题在于：为什么相同的用户、相同的浏览器、在同一页面上，指纹会不一致？

2. 核心影响因素分析

要理解指纹变化的原因，需要从浏览器行为、FingerprintJS 的采集机制以及浏览器缓存策略等多个维度进行分析。

• 页面加载上下文不同：通过历史记录加载页面时，浏览器可能使用了缓存资源，导致某些动态特征未被重新计算。
• 资源加载顺序和时机：异步加载的资源（如字体、脚本）可能影响 Canvas 渲染或 WebGL 的输出。
• 浏览器缓存机制：缓存可能跳过某些初始化逻辑，导致 FingerprintJS 某些检测项未能正确执行。
• 运行时环境差异：例如时区、语言、系统字体、插件列表等可能因加载方式不同而变化。

3. FingerprintJS 采集流程简析

FingerprintJS 采集指纹的过程通常包括以下步骤：

1. 获取浏览器基础信息（User-Agent、平台、语言）
2. 绘制 Canvas 并提取像素数据
3. 检测 WebRTC 支持情况
4. 获取硬件和系统信息（屏幕分辨率、颜色深度）
5. 计算 Hash 值生成唯一指纹

这些步骤中，任何一项的不一致都可能导致最终指纹值的变化。

4. 历史记录加载与正常加载的差异

当用户点击浏览器的“历史记录”访问页面时，浏览器通常会使用 back/forward cache（bfcache）来恢复页面状态，这与正常加载页面有显著区别：

加载方式	是否使用缓存	是否重新执行 JS	是否触发页面初始化
正常加载	否	是	是
历史记录加载（bfcache）	是	否	否

5. 指纹变化的典型场景与示例

以下是几个可能导致指纹变化的典型场景：

• Canvas 渲染结果不同：字体加载延迟或使用不同字体导致像素数据不同。
• WebGL 上下文丢失：某些浏览器在恢复缓存页面时未正确恢复 WebGL 状态。
• 系统时区或语言变化：页面恢复时可能使用了不同语言或时区设置。
• 插件状态不一致：插件加载状态可能因缓存而不同。

    
      // 示例：Canvas 渲染依赖字体加载
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = '14px Arial';
      ctx.fillText('Hello', 0, 10);
      const hash = hash(canvas.toDataURL());
    
  

6. 解决方案与优化建议

针对上述问题，可以采取以下措施来提高指纹的稳定性：

1. 强制页面重新加载：在页面恢复时检测是否来自缓存，并强制 reload。
2. 延迟指纹采集：等待所有资源加载完成后再执行指纹采集。
3. 使用稳定特征组合：避免使用易变特征（如 canvas 渲染），或对其进行归一化处理。
4. 使用服务端辅助指纹校正：结合时间戳、用户行为日志等辅助判断。

另外，可以监听 pageshow 和 pagehide 事件来判断页面是否来自缓存：

    
      window.addEventListener('pageshow', function(event) {
        if (event.persisted) {
          // 页面来自缓存
          location.reload();
        }
      });
    
  

7. 技术流程图示例

以下是一个指纹采集流程的 mermaid 流程图，展示了正常加载与缓存加载下的差异：

graph TD
      A[用户访问页面] --> B{是否来自缓存?}
      B -->|是| C[使用 bfcache]
      B -->|否| D[正常加载页面]
      C --> E[不执行 JS 初始化]
      D --> F[执行 JS 初始化]
      E --> G[指纹采集不完整]
      F --> H[指纹采集完整]
      G --> I[指纹不一致]
      H --> J[指纹一致]