CSS/JavaScript/hacking:检测:链接上的访问样式*没有*直接检查或比我更快

Question

这是出于研究目的http://cssfingerprint.com

请考虑以下代码:

<style>
  div.csshistory a { display: none; color: #00ff00;}
  div.csshistory a:visited { display: inline; color: #ff0000;}
</style>

<div id="batch" class="csshistory">
  <a id="1" href="http://foo.com">anything you want here</a>
  <a id="2" href="http://bar.com">anything you want here</a>
  [etc * ~2000]
</div>

我的目标是检测foo是否已使用:visited样式呈现.

1. 我想检测是否在没有直接查看$('1').getComputedStyle(或在Internet Explorer中currentStyle)或该元素上的任何其他直接方法的情况下访问foo.com .

   这样做的目的是绕过潜在的浏览器限制,以防止直接检查访问链接的样式.

   例如,也许你可以在<a>标签中放置一个子元素,或者直接检查文本的样式; 任何不直接或不直接依赖的方法$('1').anything都是可以接受的.做一些聪明的孩子或父母可能是必要的.

   请注意,只有这一点而言,该方案是,浏览器会骗JavaScript中的所有属性<a>元素(而不是其他),而且它只会呈现color:在:visited.因此,依赖于例如文本大小或background-image不符合此要求的方法.

2. 我想提高目前刮削方法的速度.

   大部分时间(至少使用Firefox中的jQuery方法)花费在上面document.body.appendChild(batch),因此找到改进该调用的方法可能是最有效的.

   有关当前速度测试结果,请参见http://cssfingerprint.com/about和http://cssfingerprint.com/results.

我目前使用的方法可以在http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js上看到.

总结tl; dr,它们是:

1. 设置颜色或显示:上面访问过,并直接检查每个 getComputedStyle
2. 在<a>标记内放置链接的ID(加上一个空格),并使用jQuery的:visible选择器,只提取可见文本(=访问过的链接ID)

FWIW,我是一个白帽子,我正在与EFF以及其他一些众所周知的安全研究人员协商.

如果你贡献一种新的方法或加速,你会感谢http://cssfingerprint.com/about(如果你想成为:-P),并可能在未来发表的论文中.

ETA:赏金只会因为建议而得到回报

• 可以在Firefox上避免上面第1点中描述的假设限制,或者
• 在我拥有足够当前数据的任何浏览器上执行速度比在http://cssfingerprint.com/about图表中列出的最佳性能方法快至少10%

如果多个建议符合任何一个标准,那么最好的建议就会胜出.

ETA 2:我添加了两个以前最好的测试方法的基于宽度的变体(reuse_noinsert,最好的Firefox/Mozilla和mass_insert,它非常接近的竞争对手).请从不同的浏览器访问http://cssfingerprint.com几次; 我会自动获得速度测试结果,因此我们会发现它是否比以前的方法更好,如果是这样的话.谢谢!

ETA 3:当前的测试表明使用速度储蓄offsetWidth(而非getCalculatedStyle/ currentStyle〜2ms的(1.8%)在铬和〜24MS(4.3%)在Firefox,这不是我想要用于固体奖金获胜的10%).知道如何维持剩余的10%？

Answer 1

[新更新]

如果您只想将结果用于视觉呈现，那么最快的方法是使用 CSS 计数器。

CSS：

body{
    counter-reset: visited_counter;
}

a:visited{
    counter-increment: visited_counter;
}

#results:before{
    content:counter(visited_counter);
}

这将在 id 为“results”的元素之前添加访问过的链接数。

不幸的是，没有办法从 JavaScript 访问它，你只能显示它。

[初步答复]

您知道 jQuery:visited直接支持选择器吗？

喜欢$('a:visited')

[更新]

作为替代方案，您可以应用不依赖于getComputedStyle检索的 CSS 属性。

喜欢a:visited{height:1px;display:block;}然后检查offsetHeight。