零JavaScript环境下的纯DOM行为追踪：CSS状态持久化与隐私边界

打开 clickclickclick.click，你会看到一个极简的白色页面，中央只有一个绿色按钮。点击它，页面开始 "说话"："Subject has clicked on the button." 继续探索，你会发现更多 —— 光标移动轨迹、停留时长、浏览器类型、甚至访问本站之前浏览过的网站数量。这个由荷兰 VPRO 媒体公司与 Studio Moniker 联合开发的项目，用 128 个待解锁的 "成就"，将现代 Web 追踪技术的底层逻辑赤裸呈现。

项目的核心讽刺在于：它并非使用复杂的 JavaScript 追踪库，而是依赖 HTML5 原生 API 与 CSS 状态机制，在 "零 JavaScript" 环境下完成了对用户行为的精准画像。这种纯 DOM 事件溯源技术，揭示了 Web 隐私边界的脆弱性 —— 即使用户禁用脚本，行为数据依然可以通过浏览器原生机制被捕获。

纯 DOM 事件溯源的技术实现

clickclickclick.click 的技术架构建立在浏览器原生能力之上。项目开发者 Roel Wouters 明确指出，底层技术 "并不复杂"，所有追踪行为都通过 HTML5 标准 API 实现。这意味着任何现代 Web 开发者都可以复现这些追踪手段，无需引入第三方分析库。

具体而言，项目利用了以下浏览器原生机制：

CSS 伪类状态捕获：通过 :hover、:active、:focus、:target 等伪类，页面可以在无 JavaScript 的情况下感知用户交互。当用户点击锚点链接 #section 时，对应元素成为 :target，触发样式变化；表单元素获得焦点时匹配 :focus；鼠标按下瞬间元素进入 :active 状态。这些状态变化可以被 CSS 选择器捕获并用于视觉反馈，更重要的是，它们可以被服务端通过请求日志间接推断。

HTTP Referrer 链分析：项目能够显示 "Subject has visited three websites before coming here"，这并非通过 JavaScript 读取 document.referrer，而是依赖 HTTP 请求头中的 Referer 字段。当用户从搜索引擎或社交媒体进入目标站点时，浏览器会自动携带来源页面信息，形成访问路径的被动暴露。

鼠标轨迹追踪：通过 CSS 的 :hover 伪类配合精心布局的网格元素，可以实现对光标移动路径的采样。虽然精度不及 JavaScript 的 mousemove 事件，但足以判断用户的阅读焦点区域与页面浏览模式。

停留时间计算：结合页面加载时间戳与后续请求的时间差，服务端可以推算用户在页面的停留时长。当用户 "一分钟未移动" 时，系统触发 "Subject absent?" 的判定。

CSS 状态持久化与隐私边界

clickclickclick.click 的深层启示在于：CSS 不仅是样式层，更是一种状态持久化机制。当用户与页面交互时，CSS 伪类创建的 "状态快照" 可以被用于行为推断，而这种机制完全绕过用户对 JavaScript 的管控。

这种技术路径的隐私风险体现在三个层面：

第一，绕过脚本拦截。即使用户启用了 NoScript 或 uBlock Origin 的脚本拦截功能，只要允许页面加载 HTML 与 CSS，追踪依然可以发生。CSS 伪类不依赖 JavaScript 执行环境，因此传统的 "禁用 JS 保隐私" 策略在此失效。

第二，被动指纹收集。浏览器类型、操作系统、屏幕分辨率、字体渲染差异等信息，可以通过 CSS 媒体查询与样式计算被动获取。结合 :hover 交互测试，可以构建独特的设备指纹，用于跨站追踪。

第三，行为模式推断。通过分析用户触发 :active 与 :focus 的频率、顺序与位置，可以推断用户的阅读速度、注意力分布与交互偏好。这些数据对广告精准投放具有商业价值 —— 正如项目所示，"Adventurous click and scrolling behavior will be rewarded"。

从麦克卢汉到数字自我截肢

在 Hacker News 的讨论中，有评论者引用麦克卢汉《理解媒介》中的 "自我截肢" 概念：技术作为人类感官的延伸，同时也导致被延伸感官的 "麻木"。clickclickclick.click 中的点击行为，正是这种自我截肢的微观体现。

麦克卢汉以纳西索斯神话为例：纳西索斯并非爱上自己，而是爱上自己在水中的倒影 —— 一个外部的技术化自我。同样，用户在 clickclickclick.click 中的每一次点击，都是在与 "被追踪的自我" 互动。页面中的 narrator 不断将用户称为 "Subject"，将行为数据转化为人格化描述（"A loner?"），这种镜像反馈让用户意识到：在数字空间中，我们的行为数据已经外化为独立于肉体的 "技术假体"。

当用户授予摄像头权限，页面 "意外" 拍摄照片时，这种自我外化达到顶点：用户不再只是数据的来源，而是成为了被观察、被记录、被分析的对象。麦克卢汉所预言的 "人成为技术的伺服机制"（servomechanism）在此得到验证 —— 我们点击，是因为页面设计了按钮；我们被追踪，是因为技术具备了追踪的能力。

可落地的防御参数与监控清单

面对纯 DOM 行为追踪，传统的隐私保护策略需要升级。以下是可落地的技术参数与监控要点：

浏览器级防御

• 启用 network.http.referer.XOriginPolicy: 2（Firefox）或设置 Referrer-Policy 为 no-referrer，阻断跨站 Referrer 泄露
• 配置 privacy.resistFingerprinting: true（Firefox）启用指纹抵抗模式
• 使用容器标签（Firefox Containers）或站点隔离（Chrome Site Isolation）阻断跨站状态共享

CSS 状态隔离

• 通过 :visited 样式限制（现代浏览器已默认限制）防止浏览历史泄露
• 使用 prefers-reduced-motion 媒体查询减少动画追踪向量
• 禁用第三方 CSS 资源，防止外部样式表收集 :hover 行为数据

监控与审计

• 定期审查浏览器扩展权限，移除不必要的摄像头、麦克风访问授权
• 使用 DevTools Network 面板监控异常请求，关注携带行为参数的 Beacon API 调用
• 启用 Strict-Origin-When-Cross-Origin Referrer 策略，平衡功能与隐私

服务端防护

• 部署 CSP（Content Security Policy）限制内联脚本与外部资源加载
• 使用 Feature-Policy/Permissions-Policy 头显式禁用摄像头、麦克风、地理位置等敏感 API
• 配置 Clear-Site-Data 头，允许用户请求清除站点存储的状态数据

clickclickclick.click 的价值不在于展示某种 "黑科技"，而在于揭示一个基本事实：Web 隐私的边界远比我们想象的模糊。当 128 个成就逐一解锁，用户被迫面对一个 uncomfortable truth—— 在浏览器这个 "镜像" 面前，我们的一举一动都在被记录、被分析、被商品化。麦克卢汉的警告在此回响：当我们将自我外化为技术，最终留下的可能只有 "artifice and facsimile"—— 技巧与摹本，而非真实的自我。

资料来源

• clickclickclick.click 项目官网
• The Outline: "I know what you did last click" (2016)
• Hacker News 讨论: Marshall McLuhan 媒介理论引用

web