Gestern Nacht war der Hackathon auf der Student Technology Conference 2013.
In einer Session am Freitag kam die Idee auf, das auf techstudent.de eine Sache fehlt: Katzenbilder!
Da trotz Versprechen am Samstag keine Katzenbilder auf techstudent.de waren, habe ich mich der Sache selber angenommen.
Meine Idee war es, einen Browser zu bauen, der auf jeder Seite Katzenbilder anzeigen kann.

Bei WIndows 8 Apps hat man dafür einen WebView, auf welchem man entweder zu einer URI navigieren kann, oder aber html Quelltext direkt laden kann.

Meine erste Idee war es, die Seite über die URI zu laden und dann den Quelltext aus dem WebView zu holen und zu ändern.
Allerdings ist es nicht möglich, an den Quelltext eines WebViews auszulesen, um ihn zu verändern.

Also war meine nächste Idee, den Quelltext herunter zu laden, zu manipulieren und dann im WebView direkt den Quelltext zu laden.
Das ist durchaus möglich, allerdings sind dann alle relativen Links auf der Webseite kaputt. Dies betrifft auch css Dateien, sodass die Webseite hinterhier ziemlich sch*** aussieht.

Die nächste Idee war, Javascript zu injecten, um die Bilder zu tauschen.
Hierfür gibt es im WebView die Methode InvokeScript, womit man eine Javascriptfunktion mit Parametern aufrufen kann.
Ich habe also eine Webseite mit iframe gebaut, welche Javascript Funktionen hatte, die ich aufrufen konnte.
Hier bekommt man allerdings Fehler aufgrund von xss (cross-site-scripting), da es verboten ist, Javascript auf einer fremden Webseite auszuführen.

Die Lösung war dann eval.
Ruft man InvokeScript auf und übergibt als Name der auszuführenden Funktion „eval“, kann man als Parameter beliebigen Javascript Code übergeben und ausführen.
Mit folgendem Code kann man nun alle Bilder durch Katzenbilder austauschen:

private void Button_Click_1(object sender, RoutedEventArgs e)
{
        var script = @"javascript:(
function()
{
    var a=document.getElementsByTagName('img'),i=a.length;
    while(b=a[--i])
    {
        b.setAttribute('src','http://placekitten.com/'+b.width+'/'+b.height);
    }
})()";
        var args = new string[]{ script };
        MyWebview.InvokeScript("eval", args);
}

Man kann übrigens auch den reinen Javascript Code nehmen und in die Adressleiste eines Browsers einfügen und ausführen, wenn man die Funktion einmal testen möchte 😉

Hier das Ergebnis: