CSS/JavaScript/hacking: Detect :visited styling on a link *without* checking it directly OR do it fa
- by Sai Emrys
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 e.g. 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:
set color or display on :visited per above, and check each one directly w/ getComputedStyle
put the ID of the link (plus a space) inside the <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
can, on Firefox, avoid the hypothetical restriction described in point 1 above, or
perform at least 10% faster, on any browser for which I have sufficient current data, than my best performing methods listed in the graph at http://cssfingerprint.com/about
In case more than one suggestion fits either criterion, the one that does best wins.
