javascript - CSS/JavaScript/黑客攻击 : Detect :visited styling on a link *without* checking it directly OR do it faster than me

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. 我想检测是否访问了 foo.com 而不直接查看 $('1').getComputedStyle (或在 Internet Explorer 中，currentStyle)，或该元素上的任何其他直接方法。

   这样做的目的是绕过潜在的浏览器限制，该限制会阻止直接检查所访问链接的样式。

   例如，也许您可​​以在 <a> 中放置一个子元素标记，或直接检查文本的样式；等等。任何不直接或间接依赖$('1').anything的方法是可以接受的。可能有必要与 child 或 parent 一起做一些聪明的事情。

   请注意，仅出于这一点的目的，场景是浏览器将对 <a> 的所有属性向 JavaScript 撒谎。元素(但不是其他元素)，它只会呈现 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

总而言之，它们是:

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

FWIW，我是 white hat ，我正在与 EFF 协商后这样做和其他一些相当知名的安全研究人员。

如果您贡献新方法或加速，您将在 http://cssfingerprint.com/about 得到感谢(如果你想成为 :-P)，并有可能在未来发表的论文中。

预计到达时间:赏金将仅针对以下建议给予奖励

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

如果有多个建议符合任一标准，则最佳建议获胜。

预计到达时间 2:我添加了两种先前最佳测试方法的基于宽度的变体(reuse_noinsert，最适合 Firefox/Mozilla，以及 mass_insert，其非常接近的竞争对手)。请访问http://cssfingerprint.com多次来自不同的浏览器；我会自动获得速度测试结果，所以我们会发现它是否比以前的方法更好，如果好的话，好多少。谢谢!

预计到达时间 3:当前测试表明使用 offsetWidth 可以节省速度(而不是 getCalculatedStyle/currentStyle )在 Chrome 中为 ~2ms (1.8%)，在 Firefox 中为 ~24ms (4.3%)，这不是我想要的 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。