请考虑以下代码:
<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:
>我想检测是否访问foo.com而不直接查看$(‘1’)。getComputedStyle(或Internet Explorer,currentStyle)或该元素上的任何其他直接方法。
这样做的目的是避免潜在的浏览器限制,从而阻止对访问链接的风格进行直接检查。
例如,也许你可以把一个子元素放在< a>标签,或直接检查文字的样式;任何不直接或者非正式地依赖于$(‘1’)的方法都可以接受。与孩子或父母做一些聪明的事情可能是必要的。
请注意,仅仅出于这一点的目的,情况是浏览器将涉及到关于< a>的所有属性的JavaScript。元素(但不是其他),并且它只会渲染颜色:in:visited。因此,依赖于例如文字大小或背景图片将不符合此要求。
>我想提高我目前刮刮方法的速度。
大多数时间(至少在Firefox中使用jQuery方法)花在document.body.appendChild(批处理)上,因此找到一种改进该调用的方法可能最有效。
参见http://cssfingerprint.com/about和http://cssfingerprint.com/results,了解当前的速度测试结果。
我正在使用的方法可以在http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js看到
总结为tl; dr,他们是:
>设置颜色或显示:上面访问,并直接检查每个人/ getComputedStyle
将< a>中的链接的ID(加一个空格)放在标签,并使用jQuery的:可见选择器,仅提取可见文本(=访问链接ID)
FWIW,我是white hat,我正在与EFF和其他一些相当知名的安全研究人员协商。
如果您提供新的方法或加速,您将在http://cssfingerprint.com/about(如果您想要:-P)感到感激,并且可能在将来发布的论文中。
ETA:赏金只会得到建议
在Firefox上可以避免上述第1点所述的假设限制,或者
>在我拥有足够的当前数据的任何浏览器上执行速度至少要提高10%,而不是我在图表上列出的最佳表现方法
如果一个以上的建议符合两个标准,那么最好的就是获胜。
ETA 2:我已经添加了基于宽度的两种以前最好的测试方法(reuse_noinsert,最好在Firefox / Mozilla和mass_insert,它的竞争对手)。请从不同浏览器多次访问http://cssfingerprint.com;我会自动得到速度测试结果,所以我们会找出它是否比以前的方法更好,如果是这样多了。谢谢!
ETA 3:目前的测试表明,使用chrome的offsetWidth(而不是getCalculatedStyle / currentStyle)在Firefox中为〜2ms(1.8%),而Firefox中则为24ms(4.3%),这不是我想要的一个坚实的赏金的10%赢得。有一个想法如何消除其余的10%?
解决方法
如果你想要结果只是为了视觉呈现,那么最快的方法就是使用CSS计数器。
CSS:
body{ counter-reset: visited_counter; } a:visited{ counter-increment: visited_counter; } #results:before{ content:counter(visited_counter); }
不幸的是没有办法从JavaScript访问它,你只能显示它..
[初回答]
你知道jQuery支持:直接访问的选择器?
像$(‘a:visited’)
[更新]
或者,您可以应用不依赖于getComputedStyle来检索的CSS属性。
像a:visited {height:1px; display:block;},然后检查offsetHeight。