CSS/JavaScript/hacking: Detect :visited styling on a link *without* checking it directly OR do it faster than me
This is for research purposes on http://cssfingerprint.com
Consider the following code:
<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>
My goal is to detect whether foo has been rendered using the :visited styling.
I want to detect whether foo.com is visited without directly looking at $('1').getComputedStyle (or in Internet Explorer, currentStyle ), or any other direct method on that element.
The purpose of this is to get around a potential browser restriction that would prevent direct inspection of the style of visited links.
For instance, maybe you can put a sub-element in the <a> tag, or check the styling of the text directly; etc. Any method that does not directly or indierctly rely on $('1').anything is acceptable. Doing something clever with the child or parent is probably necessary.
Note that for the purposes of this point only, the scenario is that the browser will lie to JavaScript about all properties of the <a> element (but not others), and that it will only render color: in :visited . Therefore, methods that rely on eg text size or background-image will not meet this requirement.
I want to improve the speed of my current scraping methods.
The majority of time (at least with the jQuery method in Firefox) is spent on document.body.appendChild(batch) , so finding a way to improve that call would probably most effective.
See http://cssfingerprint.com/about and http://cssfingerprint.com/results for current speed test results.
The methods I am currently using can be seen at http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js
To summarize for tl;dr, they are:
getComputedStyle <a> tag, and using jQuery's :visible selector, extract only the visible text (= the visited link IDs) FWIW, I'm a white hat, and I'm doing this in consultation with the EFF and some other fairly well known security researchers.
If you contribute a new method or speedup, you'll get thanked at http://cssfingerprint.com/about (if you want to be :-P), and potentially in a future published paper.
ETA: The bounty will be rewarded only for suggestions that
In case more than one suggestion fits either criterion, the one that does best wins.
ETA 2: I've added width-based variants of two previous-best test methods (reuse_noinsert, best on Firefox/Mozilla, and mass_insert, its very close competitor). Please visit http://cssfingerprint.com several times from different browsers; I'll automatically get the speed test results, so we'll find out if it's better than the previous methods, and if so by how much. Thanks!
ETA 3: Current tests indicate a speed savings using offsetWidth (rather than getCalculatedStyle / currentStyle ) of ~2ms (1.8%) in Chrome and ~24ms (4.3%) in Firefox, which isn't the 10% I wanted for a solid bounty win. Got an idea how to eke out the rest of that 10%?
[new update]
If you wanted the results just for visual presentation then the fastest method would be to use CSS counter..
CSS:
body{
counter-reset: visited_counter;
}
a:visited{
counter-increment: visited_counter;
}
#results:before{
content:counter(visited_counter);
}
This would add the number of visited links before the element with id 'results'.
Unfortunately there is no way to access it from JavaScript, you can only display it..
[initial answer]
You are aware that jQuery supports the :visited selector directly right?
Like $('a:visited')
[update]
As an alternative, you could apply a CSS property that does not rely to the getComputedStyle to retrieve..
Like a:visited{height:1px;display:block;} and then check for offsetHeight .
color : inherit caveat: afaik it won't work on lte ie7
for lte ie7 ull have to
visibility : hidden on a:visited and visibility : inherit on the child A similar idea, but sidestepping .getComputedStyle() :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
a:visited { display: inline-block; font-family: monospace; }
body { font-family: sans-serif; }
</style>
<script type="text/javascript">
function test() {
var visited = document.getElementById("v").childNodes[1].firstChild.clientWidth;
var unvisited = document.getElementById("u").childNodes[1].firstChild.clientWidth;
var rows = document.getElementsByTagName("tr");
for (var i = 1, length = rows.length; i < length; i++) {
var row = rows[i];
var link = row.childNodes[1].firstChild;
var width = link.clientWidth;
row.firstChild.appendChild(document.createTextNode(link.href));
row.childNodes[2].appendChild(document.createTextNode(width === visited ? "yes" : (width === unvisited ? "no" : "unknown")));
}
}
</script>
</head>
<body onload="test()">
<table>
<tr><th>url</th><th>link</th><th>visited?</th></tr>
<tr id="u"><td></td><td><a href="http://invalid_host..mplx/">l</a></td><td></td>
<tr id="v"><td></td><td><a href="css-snoop.html">l</a></td><td></td>
<tr><td></td><td><a href="http://stackoverflow.com/">l</a></td><td></td>
<tr><td></td><td><a href="http://www.dell.com/">l</a></td><td></td>
</table>
</body>
</html>
The trick, of course, is ensuring that visited and unvisited links have different widths (here, by using sans-serf vs. monospace fonts) and setting them to inline-block so that their widths can be accessed via clientWidth . Tested to work on FF3.6, IE7, Chrome 4, and Opera 10.
In my tests, accessing clientWidth was consistently faster than anything which relied on computed styles (sometimes by as much as ~40%, but widely varying).
(Oh, and apologies for the <body onload="..."> nonsense; it's been too long since I tried to do events in IE without a framework and I got tired of fighting it.)
上一篇: HTTPS标头是否已加密？