5

2 Grundlagen

In diesem Kapitel werden Grundlagen erklart, die unmittelbar mit der UI-Redressing-Problematik in Zusammenhang stehen. Die nachfolgenden Ab-schnitte sollen dabei zum Verstandnis der kommenden Kapitel beitragenund werden daher lediglich in der jeweils erforderlichen Lange verfasst. AlsErstes wird in Kapitel 2.1 auf das HTTP eingegangen, das u. a. fur das La-den von Webseiten aus dem WWW verwendet wird. Anschließend werdenin Kapitel 2.2 die Grundzuge der Sprachen HTML, CSS, JavaScript undXML behandelt. Diese Sprachen werden in den kommenden Kapiteln furUI-Redressing- respektive Clickjacking-Angriffe sowie fur die Gegenmaß-nahmen benotigt.

2.1 Hypertext Transfer Protocol

Im Allgemeinen werden die Daten einer Webseite mithilfe des zustands-losen Hypertext Transfer Protocol (HTTP) in einem Netzwerk ubertragen.Das erste offizielle Dokument HTTP/1.0 wurde 1996 im RFC 1945 vonT. Berners-Lee, R. Fielding und H. Frystyk veroffentlicht [256]. Drei Jah-re spater folgte der bis heute benutzte Standard HTTP/1.1 [214].

Abbildung 2.1: Vereinfachter Ablauf des HTTP [125]

Der vereinfachte Ablauf einer HTTP-Anfrage ist in Abbildung 2.1 darge-stellt. In der ersten Nachricht wird ein Request (Anforderung) an den Ser-ver geschickt. Dieser wertet die Nachricht aus und verschickt eine Respon-se (Antwort) an den Browser. Jede Nachricht besteht aus einer Start-Line,nachfolgenden Headers, einer Leerzeile und einem Message-Body. Die Leer-zeile trennt den Bereich Headers vom darunter liegenden Message-Body.

6 2 Grundlagen

Zur Veranschaulichung ist ein TCP-Stream [93] mit Request- bzw-Reponse-Nachrichten in den Codebeispielen 2.1 und 2.2 aufgelistet. Hier-bei wurde die URL http://www.example.org/halloWelt.txt aufgerufenund eine Textdatei mit dem Inhalt Hallo Welt! im Browser angezeigt.

1 GET /halloWelt.txt HTTP/1.1

2 User-Agent: Opera/9.80 (Windows NT 6.1; U; en) Presto/2.9.168

Version/11.50

3 Host: www.example.org

4 Accept: text/html, application/xml;q=0.9, application/xhtml+xml,

image/png, image/webp, image/jpeg, image/gif, image/x-

xbitmap, */*;q=0.1

5 Accept-Language: de-DE,de;q=0.9,en;q=0.8

6 Accept-Encoding: gzip, deflate

7 Connection: Keep-Alive

8

Codebeispiel 2.1: Der Inhalt einer exemplarisch erstellten HTTP-Request-

Nachricht

Anhand des Codebeispiels 2.1 lasst sich der typische Aufbau einer Client-Anfrage ableiten. In der Start-Line, die in diesem Fall auch als Request-Line bezeichnet werden kann, werden die HTTP-Methode GET, die ange-fragte Ressource sowie die HTTP-Versionsnummer spezifiziert. Im Falle derMethode GET ist im Message- bzw. Request-Body kein Inhalt vorhanden.Bei Verwendung von den ebenfalls verfugbaren Methoden POST oder PUTist der Message-Body nicht leer. Ein typisches Szenario zur Verwendung derPOST-Methode ist die Ubermittlung von Formulardaten. Die PUT-Methodewird benutzt, um eine Datei auf den Server zu ubertragen. Neben GET,POST und PUT gibt es u. a. auch Methoden wie DELETE, HEAD undTRACE [213].

In den Zeilen 2 bis 7 befinden sich die Header. In diesem Fall ma-chen sie Angaben zum verwendeten Betriebssystem, dem Host, akzeptier-ten MIME-Types, bevorzugten Sprachen, Kodierungsverfahren sowie zurVerbindungseinstellung. Es gibt daruber hinaus viele weitere Header diefur unterschiedliche Anforderungen konstruiert wurden. Die 8. und letzteZeile sorgt fur eine Abgrenzung der Bereiche Header und Message-Body.

2.2 Sprachen 7

1 HTTP/1.1 200 OK

2 Date: Thu, 07 Jul 2011 18:12:44 GMT

3 Server: Apache

4 Last-Modified: Thu, 07 Jul 2011 18:12:03 GMT

5 ETag: "174b0542-c-4a77ea76562c0"

6 Accept-Ranges: bytes

7 Content-Length: 12

8 Keep-Alive: timeout=15, max=100

9 Connection: Keep-Alive

10 Content-Type: text/plain

11

12 Hallo Welt!

Codebeispiel 2.2: Der Inhalt einer exemplarisch erstellten HTTP-Response-

Nachricht

Der Aufbau der HTTP-Response-Nachricht lasst sich aus dem Codebei-spiel 2.2 ableiten. In der Start- bzw. Reponse-Line befinden sich die An-gaben zur HTTP-Version, der aktuelle Statuscode sowie der Statustext.Der Nachrichtenteil 200 OK signalisiert, dass die Client-Anfrage ordnungs-gemaß verlaufen ist. Die erste Ziffer beschreibt dabei die Kategorie des Sta-tuscodes. Eine 1xx steht fur eine Information, 2xx fur einen Erfolg, 3xx furdas Weiterleiten, 4xx fur einen Client- und 5xx fur einen Serverfehler [254].Statuscodes tauchen neben dem HTTP u. a. auch beim Session InitiationProtocol (SIP) [96, 13] auf. Dieses Protokoll wird haufig bei der Internet-Telefonie bzw. Voice over IP (VoIP) angewandt.

In der Zeile 2 bis 10 werden wieder unterschiedliche Header angegeben.Diese Art von Header wird auch Response-Header genannt. Im Beispielwird definiert, wann das Dokument versendet und bspw. zuletzt geandertwurde. In der Zeile 11 trennt die Leerzeile den Message-Body, der sich inder 12. Zeile befindet. Dieser enthalt den Text Hallo Welt!.

2.2 Sprachen

In den nachfolgenden Kapiteln werden die AuszeichnungssprachenHTML und XML, die Formatierungssprache CSS sowie die SkriptspracheJavaScript mit einem Fokus auf Clickjacking und UI-Redressing erlautert.

2.2.1 Hypertext Markup Language

Die Auszeichnungssprache [95] Hypertext Markup Language (HTML) istder vermutlich wichtigste Bestandteil einer modernen Webseite. HTML ba-siert auf der Standard Generalized Markup Language (SGML). Sie besteht

8 2 Grundlagen

aus Auszeichnungen (Markup), die SGML-Elemente bilden. Die Auszeich-nungen sind fur die Struktur, die Prasentation sowie die Semantik einesDokuments verantwortlich [287].

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2 "http://www.w3.org/TR/html4/loose.dtd">

3 <html>

4 <head>

5 <title>Titel der Seite</title>

6 </head>

7 <body>

8 <h1>Buch</h1>

9 Nach dem <b>Doppelpunkt</b> folgt ein Link:

10 <a href="http://www.dpunkt.de">dpunkt.verlag</a>

11 </body>

12 </html>

Codebeispiel 2.3: Beispiel fur eine HTML-Datei

Das Grundgerust sowie die fur UI-Redressing wichtigsten Bestandtei-le einer HTML-Datei werden nachfolgend anhand des Codebeispiels 2.3erlautert und – vom Browser Internet Explorer 9 interpretiert – in der Ab-bildung 2.2 anzeigt.

In den ersten beiden Zeilen wird der Dokumenttyp deklariert.1 Hierwird bestimmt, welche Auszeichnungssprache und Version verwendet wird.Alternative Deklarationen zu HTML 4.01 sind u. a. XHTML 1.0, XHTML 1.1,SVG 1.0 sowie SVG 1.2 Tiny [298]. Daruber hinaus gibt es auch die Vari-anten Frameset, Strict und Transitional. In den Zeilen 4 bis 11 werdendie Elemente der HTML-Datei von den Tags <html> und </html> umhullt.2

In diesem Zusammenhang werden innerhalb der html-Tags sowohl head-als auch body-Tags definiert. Innerhalb der head-Tags befinden sich wieder-um Tags, die beispielsweise fur Meta-Angaben oder logische Beziehungenzustandig sind. In der 5. Zeile des Codebeispiels werden title-Tags be-nutzt. Der Wert innerhalb der Tags wird in Abbildung 2.2 im oberen Teilder Registerkarte angezeigt.

1Ein Dokument befindet sich im Dokumentkompatibilitats- [167] bzw. Quirks-Modus, wenn kein Dokumententyp deklariert wird [53]. Dieser soll die Abwarts-kompatibilitat sicherstellen.

2Bei HTML-Tags wird i.d.R., mit der Ausnahme von Standalone-Tags, zwischeneinem Start- und einem End-Tag unterschieden. Ein pragnantes Unterscheidungs-merkmal ist das zweite Zeichen des End-Tags, das laut Spezifikation [300] einSchragstrich sein muss.

2.2 Sprachen 9

Abbildung 2.2: Codebeispiel 2.3 im Internet Explorer 9

Der eigentliche Inhalt der Datei befindet sich zwischen den body-Tags. Inder 8. Zeile wird eine Uberschrift erster Ordnung mit dem Wort Buch defi-niert. Anschließend werden innerhalb des nachfolgenden Satzes b-Tags so-wie a-Tags verwendet. Die b-Tags sorgen dafur, dass das Wort Doppelpunktfett (bold) gedruckt wird. Die a-Tags erzeugen einen Anker (anchor), dereinen Verweis zu einer externen Webseite bildet. Die URL der Webseite isthierbei der Wert des Attributs href, das sich innerhalb des ersten a-Tagsbefindet.

2.2.1.1 Formulare

Formulare werden ublicherweise dazu benutzt, Daten mithilfe eines HTTP-GET- bzw. HTTP-POST-Requests an den Server zu ubertragen. Ein Anwen-der muss dabei lediglich vordefinierte Eingabefelder ausfullen oder etwaAuswahlelemente selektieren. Fur das Ubermitteln der erfassten Daten istein Submit-Button zustandig.3

Anhand des Codebeispiels 2.4 wird der grundlegende Aufbau eines ein-fachen HTML-Formulars erlautert. Die von Opera 11.50 interpretierte An-sicht wird in Abbildung 2.3 dargestellt.

In der ersten und letzten Zeile befinden sich form-Tags.4 Im Start-Tag werden die Attribute action und method benutzt. Der Wert des At-tributs action ist die URL der fur die Daten zustandigen Webseite. Die-ser empfangt uber eine HTTP-Methode die in dem Formular eingegebenenDaten. Im Codebeispiel wird die HTTP-Methode GET im Attribut method

3Die Existenz eines Submit-Buttons ist kein ausschlaggebendes Kriterium zurUbermittlung von Formulardaten. Aufgrund der richtigerweise haufigen Verwen-dung wird er jedoch explizit erwahnt.

4Genau genommen handelt es sich um ein form-Element, das aus einem Start-und End-Tag (also zwei Tags) besteht. In diesem Buch steht Tags auch stellvertre-tend fur den Begriff Element [14].

10 2 Grundlagen

definiert.5 Innerhalb der Tags befinden sich alle zum Formular gehorendenFormularelemente.

Abbildung 2.3: Codebeispiel 2.4, dargestellt in Opera 11.50

Die 2. Zeile enthalt h1-Tags, die fur die Erstellung einer Uberschrift sor-gen. Ein Textabsatz wird in der Zeile 3 mit einem p-Tag6 (paragraph) ein-geleitet. Dieses sorgt fur die raumliche Trennung zwischen Name: und demnachfolgenden input-Tags. Anhand des input-Tags wird deutlich, dass esauch Tags gibt, die kein End-Tag haben und somit in die Kategorie derStandalone-Tags fallen. Weitere Tags dieser Art sind u. a. <br>, <frame>,<hr> und <img> [229]. Innerhalb des input-Tags befinden sich die Attributename, type, size und maxlength. Das Attribut name dient als Identifikatordes input-Tags und ist fur die Ubermittlung der Daten erforderlich. Anga-ben zum Typ des Eingabefeldes werden mit dem Attribut type getatigt. EinGegenstuck zum verwendeten Attributwert text ist password, da die ein-gegebenen Zeichen nicht im Klartext angezeigt werden. Das Attribut sizedefiniert mit dem Wert 30 die Anzahl der anzuzeigenden Zeichen. Analog

5Das Attribut method sorgt in diesem Fall fur Redundanz, da die Methode GETautomatisch verwendet wird.

6Die Verwendung von p-Tags ist hier semantisch falsch, da sie nur zum Kapselnvon Textblocken gedacht sind und keine Layout-Elemente darstellen. Richtigerweisemussten, das UI-Redressing außer acht gelassen, label-Tags benutzt werden.

2.2 Sprachen 11

dazu beschrankt das Attribut maxlength die Anzahl der Zeichen, die einge-tippt werden konnen.

1 <form action="http://www.example.org/formular.php" method="get">

2 <h1>Feedback</h1>

3 <p>Name:</p>

4 <input name="Name" type="text" size="30" maxlength="30">

5 <p>Kommentar:</p>

6 <textarea name="Text" rows="5" cols="30"></textarea>

7 <p>Vielen Dank!</p>

8 <input type="submit" value="Absenden">

9 <input type="reset" value="Abbrechen">

10 </form>

Codebeispiel 2.4: Einfaches HTML-Formular

Weiterhin erwahnenswert ist das textarea-Tag aus der Zeile 6. Diesesermoglicht es ein mehrzeiliges Eingabefeld zu erstellen. Die Anzahl der an-zuzeigenden Zeilen wird mit dem Attribut rows definiert. Das Attribut colsist fur die Spaltenanzahl zustandig. Weitere type-Attribute des input-Tagssind submit und reset. Beim Attribut submit wird eine Schaltflache er-stellt, um das Formular an die im action-Attribut des form-Tags definierteAdresse des Servers zu schicken. Fur das Leeren respektive das Zuruck-setzen auf den Ausgangszustand des Formulars wird das Attribut reset

verwendet. Beide Schaltflachen werden mit dem Attribut value beschriftet.

2.2.1.2 Framesets und Frames

Um eine Internetprasenz in mehrere Bildschirmfenster aufzuteilen, konnenFramesets mit den sich darin befindlichen Frames (Rahmen, Fassung) ver-wendet werden [228]. Dabei ist es empfehlenswert, die in Kapitel 2.2.1erwahnte Dokumenttyp-Deklaration mit der Variante Frameset zu benut-zen [321]. Die Struktur eines Framesets wird anhand des Codebeispiels 2.5exemplarisch erlautert. Die von Opera 11.50 interpretierte Seite wird inAbbildung 2.4 angezeigt.

In der ersten sowie der letzten Zeile werden frameset-Tags benutzt. DerStart-Tag beinhaltet das Attribut cols. Es sorgt fur die Fensteraufteilung,indem die innerhalb der Framesets vorhandenen Frames eine bestimmteGroße zugewiesen bekommen. Im Codebeispiel 2.5 hat der linke Frame eineSpaltenbreite von 120 Pixel, der rechte Frame erhalt den Rest der verfugba-ren Browserbreite.7 Analog kann auch die Reihenhohe mit dem Attributrows definiert werden.

7Es hangt vom jeweils verwendeten Gerat ab, ob es wirklich 120 Pixel sind.

12 2 Grundlagen

Abbildung 2.4: Von Opera 11.50 interpretiertes Codebeispiel 2.5. In der

Abbildung werden beide Frames innerhalb des Framesets durch einen sicht-

baren Rahmen voneinander abgegrenzt.

1 <frameset cols="120,*">

2 <frame src="navigation.html" name="Navigation">

3 <frame src="hauptseite.html" name="Inhalt">

4 <noframes>

5 <a href="navigation.html">Navigation</a>, <a href="

hauptseite.html">Hauptseite</a>

6 </noframes>

7 </frameset>

Codebeispiel 2.5: Ein exemplarischer HTML-Code zur Erstellung eines

Framesets mit Frames. Das Beispiel wurde von der SELFHTML-

Dokumentation abgeleitet. [228]

Anschließend werden in der 2. sowie 3. Zeile frame-Tags verwendet. BeideTags beinhalten die Attribute src und name. Das src-Attribut kann als Werteine relative oder absolute URL der Zielseite enthalten. Die Identifizierungdes Frames wird mit dem Attribut name gewahrleistet. Falls der Browserkeine Frames unterstutzt, wird der Code ausgefuhrt, der sich innerhalb dernoframes-Tags befindet.

Das erste frame-Tag aus dem Codebeispiel 2.5 sorgt dafur, dass derBrowser die Seite navigation.html ladt. Der Inhalt der HTML-Datei wirdim Codebeispiel 2.6 angezeigt. Dort befinden sich in der ersten sowie derletzten Zeile ul-Tags (unordered list). Jeweils ein Listenpunkt wird mithil-fe der sich innerhalb der ul-Tags befindlichen li-Tags (list item) gebildet.Jeder Punkt enthalt einen Link. Dieser Link kann wie in den Zeilen 2 bis5 relativ oder wie in den Zeilen 6 bis 7 absolut sein. 8 In welchem Frame

8An dieser Stelle ist das base-Tag erwahnenswert. Mit diesem Tag kann inner-halb eines href-Attributs eine absolute URI angegeben werden, die die Basis-URI

2.2 Sprachen 13

des Framesets die Seite geladen wird, bestimmt das Attribut target. Ist esnicht vorhanden, wird die Seite im aktuellen Frame geoffnet.

1 <ul>

2 <li><a href="hauptseite.html" target="Inhalt">Hauptseite</a></

li>

3 <li><a href="produkte.html" target="Inhalt">Produkte</a></li>

4 <li><a href="kontakte.html" target="Inhalt">Kontakte</a></li>

5 <li><a href="impressum.html" target="Inhalt">Impressum</a></li

>

6 <li><a href="http://www.example.org" target="Inhalt">Example.

org</a></li>

7 <li><a href="http://www.example.org">Example.org</a></li>

8 </ul>

Codebeispiel 2.6: HTML-Code der im Codebeispiel 2.5 erwahnten

navigation.html-Datei

Im Codebeispiel 2.5 wird ein zweiter Frame verwendet. Dieser offnetdie Seite hauptseite.html, die im Codebeispiel 2.7 dargestellt wird. DerHTML-Code der Seite erzeugt lediglich eine Uberschrift mit dem InhaltHauptseite.

Angemerkt sei, dass Frames auch weitere Frames enthalten konnen. Esist daher moglich, mehrere Frames ineinander zu verschachteln.

1 <h1>Hauptseite</h1>

Codebeispiel 2.7: Einzeiliger HTML-Code der im Codebeispiel 2.5

erwahnten hauptseite.html-Datei

2.2.1.3 Eingebettete Frames

Im Gegensatz zu Framesets fuhren eingebettete Frames nicht zur Auftei-lung des Bildschirms [227]. Sie werden direkt in die Seite integriert und la-den dort, innerhalb des vom eingebetteten Frame definierten Bereichs, dieim iframe-Tag spezifizierte Seite. 9 Das Verhalten wird im Codebeispiel 2.8respektive Abbildung 2.5 veranschaulicht.

fur relative URIs darstellt. Wenn das Tag eingesetzt wird, muss dieses noch vor denElementen, die auf externe Ressourcen verweisen, eingebunden werden [319].

9In Kapitel 4.1 wird auf die Historie von Frames eingegangen. Dort wirderlautert, wieso Frames zum Zeitpunkt ihrer Einfuhrung mit Sicherheitsrisiken ver-bunden waren.

14 2 Grundlagen

1 <p>Google.de in einem iFrame</p>

2 <iframe src="http://www.google.de" width="400" height="250" name

="google">

3 Ihr Browser kann keine iFrames anzeigen.

4 </iframe>

Codebeispiel 2.8: Die Suchmaschine von Google Inc. wird in einem

eingebetteten Frame geladen.

In der 1. Zeile wird eine kurze Beschreibung innerhalb eines Textabsat-zes eingefugt. Dies soll zeigen, dass HTML-Code sowohl vor als auch nachden iframe-Tags platziert werden kann. In der 2. und 4. Zeile befindensich die iframe-Tags. Im Start-Tag werden die Attribute src, width, heightund name verwendet. Das Attribut src legt mit einer relativen oder abso-luten Adresse fest, welche Seite geladen werden soll. Die Attribute width

und height sind fur die Breiten- sowie Hohenangaben zustandig. DerenAttributwerte konnen aus einer prozentualen Angabe oder der direktenPixelangabe bestehen. In der 3. Zeile steht innerhalb der iframe-Tags ei-ne Nachricht, die angezeigt wird, wenn der Browser die Ausfuhrung voniframe-Tags nicht erlaubt oder unterstutzt.

Abbildung 2.5: Das von Opera 11.50 interpretierte Codebeispiel 2.8

Eingebettete Frames werden im Ubrigen haufig bei Clickjacking-Angriffenbenutzt. Aufgrund der Wichtigkeit werden in Tabelle 2.1 einige HTML4-

2.2 Sprachen 15

Attribute aus den W3C-Empfehlungen10 aufgelistet [311]. Weitere Attribu-te konnen u. a. beim Microsoft Developer Network (MSDN) sowie – insbe-sondere im Hinblick auf HTML5 – beim W3C abgerufen werden [166, 291].

Attribut Beschreibung

id Im Dokument eindeutige ID; gehort zu den coreattrs [325].

class Durch Leerzeichen getrennte Liste von Klassen (coreattrs)

style Verbundene Gestaltungsinformationen (coreattrs)

title Informationen uber das Element (coreattrs)

longdesc Link zur langen Beschreibung (erganzt title)

name Name des Frames fur die Ausrichtung

src Quelle des Frame-Inhalts

frameborder Informationen uber den Rand des Rahmens; Werte: 0 oder 1

marginwidth Randbreite in Pixel

marginheight Randhohe in Pixel

scrolling Scrollbar aktivieren oder nicht; Werte: yes, no, auto

align Vertikale oder horizontale Ausrichtung

height Rahmenhohe

width Rahmenbreite

Tabelle 2.1: Ubersicht der iframe-Tag-Attribute aus den W3C-

Empfehlungen [311]

2.2.1.4 HTML5

Um das Jahr 2004 entstanden beim W3C die ersten Ideen zu HTML5 [134].Dabei verfolgte das Konsortium einen strikten Ansatz, der jedoch eini-ge Einstiegshurden mit sich brachte. Die Idee dahinter war, dass sichWebentwickler aufgrund der vorgesehenen interaktiven Aktionen unbe-dingt mit der Thematik beschaftigen sollten. Dies war bereits damalsunter Berucksichtigung der Einbindungsmoglichkeiten von Java-Applets,JavaScript oder auch Flash-Dateien sinnvoll. Die strikte Vorgehensweisemit den damit verbundenen Einschrankungen der Sprache stieß jedoch aufKritik, sodass von Browserherstellern wie Apple, Mozilla Foundation undOpera Software im Jahr 2004 eine vom W3C unabhangige Arbeitsgrup-

10Das World Wide Web Consortium (W3C) ist eine internationale Gemeinschaft, inder Webstandards entwickelt werden [301].

16 2 Grundlagen

pe, die WHATWG (Web Hypertext Application Technology Working Group),gegrundet wurde [269]. Im Oktober 2006 hat sich Tim Berners-Lee, derbeim W3C mitwirkt, mit einem Blogeintrag zu der Weiterentwicklung vonHTML geaußert [259]. Daraus resultierend wurde ein Fork (Abspaltung)des WHATWG genommen und dieser eigenstandig als HTML5 weiterent-wickelt [295]. Es gab zum damaligen Zeitpunkt also zwei Versionen vonHTML5, wobei die Entwurfe des W3C dem WHATWG folgten. Das Teamvom Internet Explorer orientierte sich damals am W3C. Im Gegensatz dazuhaben sich die Teams von Firefox sowie Chrome an die WHATWG gehalten.Seit dem Jahr 2007 arbeiten beide Parteien miteinander zusammen.

Ein generelles Problem von HTML5 ist, dass die Anzahl der Ideen einensehr hohen Umfang hat [313]. Dies fuhrt unweigerlich dazu, dass die Spe-zifikationen nicht fertig sind und sich somit in einem standigen Weiter-entwicklungsprozess befinden. Folglich konnen die Browserhersteller auchnicht behaupten, dass sie HTML5 vollstandig implementiert haben. Tests,die prufen, ob ein Browser HTML5 unterstutzt, sind daher nicht wirklichvertrauenswurdig, da sie die Spezifikation oder ggf. den Entwurf davon nurzu einer bestimmten Zeit, die in der Vergangenheit liegt, erfassen [131].Die Schlussfolgerung ist somit, dass jeder Browser eine unterschiedlicheAnzahl an neuen HTML5-Merkmalen besitzt [100]. Darunter fallt die un-terschiedlich ausfallende Implementierung von Parsing-Regeln, Canvas-,Video-, Formular- und u. a. Drag&Drop-Funktionalitat [188].

HTML5 bietet beispielsweise DOM-Schnittstellen zur Kontrolle vonMultimediainhalten an. Weiterhin ist es moglich, die History zu manipulie-ren [91]. Aufgrund der kaum uberschaubaren und sich standig anderndenMenge an neuen HTML-Tags, strukturierenden Elementen und Attributenergeben sich jedoch Schwachstellen, die vorher, mit den gegebenen Mittelnvon HTML4.01, nicht moglich waren. Genau hier entstehen neue Angriffs-punkte, insbesondere im Bereich UI-Redressing.

2.2.1.5 Validierung

Formal richtig ist es, die im Codebeispiel 2.3 beschriebene Struktur einzu-halten. Streng genommen muss man das jedoch nicht tun, da ein Browserin der Lage ist, bestimmte Fehler zu ignorieren oder auszubessern. EinigeFehler werden aus der Sicht eines regularen Benutzers jedoch falsch in-terpretiert, sodass diese von einem Angreifer ausgenutzt werden konnen.Daher ist es ggf. moglich, bestimmte Schutzmechanismen wie Filter zu um-gehen und Schadcode einzuschleusen.

2.2 Sprachen 17

1 <h1>

2 <a abc/href=http://www.example.org ="hier steht nichts"<abc=

foobar">

3 Big

4 </A >

5 <H5>Small</h5>

6 Normal

Codebeispiel 2.9: Ein manipulierter HTML-Code

Im Codebeispiel 2.9 wird dies anhand eines manipulierten HTML-Codesdeutlich. Das vom Internet Explorer 9 interpretierte Ergebnis wird imCodebeispiel 2.10 bzw. in Abbildung 2.6 dargestellt. In anderen Browsernwie Firefox, Opera oder Chrome kann die Interpretierung anders ausfallen.

Zuerst wird eine Uberschrift erstellt. Dementsprechend sollte alles, wassich innerhalb von <b> und dem spater folgendem </h1> befindet, groß-geschrieben11 werden. Das </h1> ist jedoch nicht vorhanden. Daher wirdalles, was nicht explizit anders deklariert wurde, als eine Uberschrift for-matiert.

1 <h1>

2 <a href="http://www.example.org" <abc=’foobar"’ abc="">

3 Big

4 </a>

5 <h5>Small</h5>

6 Normal

Codebeispiel 2.10: Vom Internet Explorer 9 interpretierter HTML-Code

des Codebeispiels 2.9

In den Zeilen 2 bis 4 wird das Wort Big von a-Tags umhullt. Anhand desabschließenden a-Tags wird deutlich, dass HTML-Tags nicht case sensiti-ve sind und zudem nachfolgende Leerzeichen erlauben. Innerhalb des Tagswird ein Attribut abc definiert und dem Attribut kein Wert zugewiesen.Durch den nachfolgenden Schragstrich wird in diesem Fall ein zum Leer-zeichen aquivalentes Zeichen benutzt und anschließend ein neues Attri-but href erstellt. Dieses Attribut enthalt als Wert die URL http://www.

example.org, die nach einem Klick auf Big aufgerufen wird. Der Browsererganzt hierbei die fehlenden Anfuhrungsstriche automatisch. Nach derURL folgt ein Leerzeichen sowie anschließend die typische Struktur der

11Diese Aussage ist etwas vage formuliert. Ein h1-Tag steht generell fur eineUberschrift erster Ordnung. Eine Vergroßerung des Textes erfolgt jedoch i.d.R. ohneeine anderweitige Modifikation.

18 2 Grundlagen

Wertangabe eines Attributs. Das Attribut selbst existiert jedoch nicht, so-dass der Webbrowser Internet Explorer diese Angaben entfernt. Zu guterLetzt wird, trotz des fehlenden Leerzeichens, ein Attribut <abc mit demWert foobar" definiert. Fur die Abgrenzung sorgt der letzte Anfuhrungs-strich. Skurril ist, dass das erste Zeichen des Attributs das Kleiner-Zeichenist. Damit wird fur gewohnlich ein HTML-Tag eingeleitet. Das ist hier je-doch kein Fehler, sondern eine von HTML5 vorgesehene Eigenschaft [300].Weiterhin ist zu beachten, dass der Wert des Attributs ein Anfuhrungszei-chen enthalt. Dafur ausschlaggebend ist das nach dem Gleichheitszeichenfehlende Anfuhrungszeichen.

Abbildung 2.6: Codebeispiel 2.9 im Internet Explorer 9

(Browsermodus: IE9, Dokumentenmodus: IE9-Standards)

Die kleine Uberschrift mit dem Wort Small wird anhand von h5-Tagserstellt. Der Buchstabe h wird in beiden Tags jeweils klein- bzw. groß-geschrieben. Anschließend wird das Wort Normal verwendet. Trotz des nichtabgeschlossenen h1-Tags wird das Wort nicht großgeschrieben, da die h5-Tags fur eine Trennung gesorgt haben.

2.2.2 Cascading Style Sheets

Mit der Formatierungssprache Cascading Style Sheets (CSS) konnen struk-turierte Dokumente, wie HTML-Dokumente und XML-Instanzen, mit ein-fachen Mitteln gestaltet werden [305]. Mogliche Anwendungsszenarien sinddie Spezifizierung der Schriftarten, Farben, Abstande sowie akustischeAspekte.

Es gibt mehrere CSS-Versionen [281]. Die erste Version wurde im De-zember 1996 als CSS Level 1 publiziert [282]. CSS Level 2 (CSS2) er-schien im Mai 1998 und ist der heutige Standard in Webbrowsern. 12 Bis

12Es existieren auch Zwischenversionen wie CSS 2.1 [306].

2.2 Sprachen 19

auf wenige Ausnahmen basiert CSS2 auf CSS1, folglich sind valide CSS1-Stylesheets auch valide CSS2-Stylesheets [283]. Im April 2010 wurde einCSS3 Arbeitsentwurf vom W3C veroffentlicht [288]. Eine fertige Spezifika-tion ist nicht vorhanden, sodass analog zur HTML5-Problematik auch beiCSS3 lediglich Teile des Entwurfs in die aktuellen Browser implementiertwerden.

2.2.2.1 Anwendungsbeispiel

Da sich uber die Formatierungssprache CSS mehrere hundertseitigeBucher [216] schreiben lassen, werden hier lediglich die notwendigenFachtermini sowie einige Grundlagen zur Struktur anhand des Codebei-spiels 2.11 erlautert. Die von Opera 11.50 interpretierte Version wird inAbbildung 2.7 dargestellt.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

2 <html>

3 <head>

4 <title>CSS</title>

5 <style type="text/css">

6 <!--

7 iframe { height:100px; }

8 #klein { font-size:12pt; }

9 -->

10 </style>

11 </head>

12 <body>

13 <h1>h1-Tags</h1>

14 <h1 style="opacity:0.4">h1-Tags</h1>

15 <h1 id="klein">h1-Tags</h1>

16 <iframe src="http://www.dpunkt.de" width="320"></iframe>

17 <iframe src="http://www.google.de" width="200" style="

position:absolute; top:30px; left:150px;"></iframe>

18 </body>

19 </html>

Codebeispiel 2.11: HTML-Dokument zum Erlauterung der

Formatierungssprache CSS

Im Codebeispiel 2.11 kann man die typische Struktur eines HTML-Dokuments erkennen. Interessant ist, dass sich innerhalb der head-Tagsneben den title-Tags auch style-Tags befinden. In Zeile 6 steht ein ein-leitender HTML-Kommentar, der in Zeile 10 geschlossen wird. Er sollte be-nutzt werden, um den in den style-Tags befindlichen Code nicht anzuzei-gen, falls er von alten Browsern falsch interpretiert wird. Anhand der 7.

20 2 Grundlagen

sowie 8. Zeile wird deutlich, dass das Format dem folgenden Muster ent-spricht [235]:

n selektor { eigenschaft:wert; }

In Zeile 7 werden somit iframe-Tags selektiert und es wird die Hohe desiFrames auf 100 Pixel gesetzt. In der nachsten Zeile wird am Anfang eineRaute verwendet, um dem Tag mit dem id-Attributwert klein die Eigen-schaft “Schriftgroße: 12pt” zuzuweisen.

Die in den style-Tags definierten Selektoren werden innerhalb derbody-Tags angewandt. Als Erstes wird eine mit h1-Tags ubliche Uberschrifterster Ordnung erzeugt. Anschließend wird in Zeile 14 bis auf ein style-Attribut sowie dessen Attributwert der gleiche HTML-Code verwendet. Dieopacity-Eigenschaft sorgt mit ihrem Wert dafur, dass die Uberschrift nurzu 40 % sichtbar ist. Ein Wert von 0.0 ware eine vollstandige Transparenzund ein Wert von 1.0 eine regulare (nicht transparente) Darstellung.

Abbildung 2.7: Von Opera 11.50 interpretiertes Codebeispiel 2.11

In Zeile 15 wird das id-Attribut mit dem Wert klein verwendet. Aufgrunddes in den style-Tags definierten Selektors wird die Uberschrift mit einerGroße von 12 pt erstellt. In Zeile 16 werden iframe-Tags verwendet. DasStart-Tag enthalt die Attribute src und width. Es wird also ein eingebetterFrame erstellt, der eine Breite von 320 Pixel besitzt. Da in den style-Tagsder Selektor iframe benutzt wird, hat das iFrame eine Hohe von 100 Pixel.

2.2 Sprachen 21

Dies ist auch beim iFrame aus Zeile 17 der Fall. Der wesentliche Unter-schied ist jedoch, dass beim zweiten iFrame ebenfalls ein style-Attributverwendet wird. Es ist folglich moglich, Definitionen in style-Tags mit De-finitionen in style-Attributen zu kombinieren.

Angemerkt sei, dass eine weitere Moglichkeit der Zuweisung die Ein-bindung einer CSS-Datei ist. Dafur kann ein link-Tag verwendet werden,das die CSS-Datei mithilfe des href-Attributs als eine externe Ressourceladt [319]. Analog dazu konnen Stylesheet-Dateien mit der @import-Regelinnerhalb der CSS-Syntax eingebunden werden [302].

Das style-Attribut hat verschiedene Eigenschaften, die die Platzierungdes iFrames beeinflussen. Die erste Eigenschaft , postion, ist fur die Posi-tionierung zustandig. Der Wert absolute gibt an, dass zur Positionierungdie Eigenschaften top, right, bottom und left benutzt werden konnen. ImFalle des iFrames wird top fur die Hohen- und left fur die Linksausrich-tung benutzt. Die moglichen Werte des Attributs werden in Tabelle 2.2 an-gegeben.

position-Werte Beschreibung

static Normaler Elementfluss; die Eigenschaften top, right,bottom und left werden nicht verwendet; Anfangswert.

relative Relative Positionierung

absolute Absolute Positionierung; die Eigenschaften top, right,bottom und left werden verwendet.

fixed Absolute Positionierung; die Eigenschaften top, right,bottom und left werden nicht verwendet.

inherit Gleiches Verhalten wie beim Elternelement.

Tabelle 2.2: Ubersicht der Werte der CSS-position-Eigenschaft [308]

2.2.3 JavaScript

Die Skriptsprache JavaScript ist im Dezember 1995 durch eine Kooperationvon Netscape und Sun Microsystems entstanden [32]. Sie wurde im Juni1997 von der ECMA (European Computer Manufacturers Association) alsECMA-262 standardisiert [58]. Wird von JavaScript gesprochen, ist demzu-folge eigentlich ECMA-Script gemeint [56]. Ende 2010 ist der fertige Ent-wurf der ECMAScript-5.1-Spezifizierung erschienen [280].

22 2 Grundlagen

2.2.3.1 Anwendungsbeispiel

Im Codebeispiel 2.12 wird der JavaScript-Bereich mithilfe von script-Tagserstellt. Innerhalb des Start-Tags befindet sich das Attribut type, das alsAttributwert den MIME-Typ [265] fur JavaScript-Code enthalt. Anschlie-ßend wird eine Funktion mit dem Namen zaehlen erstellt. Innerhalb derFunktion wird aufgrund der Deklaration var die lokale Variable Eingabe

definiert. Als Wert enthalt die Variable die Benutzereingabe aus dem Dia-logfenster, das mit window.prompt erstellt wird. In diesem Dialogfensterwird der Anwender dazu aufgefordert, eine Zahl von 1 bis 10 einzugeben.Der Anwender muss diese zwar nicht zwangslaufig ubergeben, trotzdem istes fur die korrekte Ausfuhrung des nachfolgenden Codes erforderlich. DasDialogfenster wird in Abbildung 2.8 dargestellt.

1 <script type="text/javascript">

2 function zaehlen () {

3 var Eingabe = window.prompt("Zahl eingeben (1-10)", "");

4 for(var i = 1; i <= 10; i++) {

5 if(i==Eingabe) {

6 alert(Eingabe);

7 break;

8 } else {

9 document.write(i+"<br>");

10 }

11 }

12 }

13 </script>

14 <p onclick="zaehlen()">Hier klicken</p>

Codebeispiel 2.12: Mit dem HTML- und JavaScript-Code wird nach

einem Mausklick auf Hier klicken eine Funktion zur Auflistung eines

Zahlenbereichs dargestellt.

In der 4. Zeile wird eine for-Schleife benutzt, die zehnmal durchlaufenwird. Fur die Anzahl der Schleifendurchlaufe ist die Variable i zustandig.Bei der Initialisierung wird der Wert auf 1 gesetzt. Nach jedem Schlei-fendurchlauf wird der Wert der Variable inkrementiert. Falls die Variablegroßer als der Wert 10 ist, so wird der Code innerhalb der Schleife nichtmehr ausgefuhrt. Der dort befindliche Code pruft bei jedem Durchlauf, obder anhand des Dialogfensters ubergebene Wert derselbe wie bei der Varia-ble i ist. Ist dies der Fall, wird ein Dialogfenster ausgegeben. Das Fenstergibt dem Wert der Variable Eingabe und folglich auch den Wert der Va-riable i aus. In der 7. Zeile wird der Schleifendurchlauf mit break been-det. Sollte der Wert i nicht den Wert der Variable Eingabe entsprechen,wird der JavaScript-Code aus Zeile 9 ausgefuhrt. Dieser fugt mithilfe von

2.2 Sprachen 23

document.write den aktuellen Wert von i aufgrund des br-Tags zeilenweiseein.

Abbildung 2.8: Von Opera 11.50 ausgefuhrtes Codebeispiel 2.12 wahrend

der Eingabeaufforderung. Im Textfeld des Dialogfensters wird die Zahl 6

eingegeben.

In Zeile 14 ist ein p-Tag gegeben, das den Text Hier klicken umhullt. Beieinem Klick auf diesen Text wird der Event-Handler onclick ausgefuhrt.Dieser sorgt dafur, dass die Funktion zaehlen durchlaufen wird. Aufgrundder Verwendung von document.write wird der Text Hier klicken uber-schrieben. Event-Handler spielen bei UI-Redressing-Angriffen eine wich-tige Rolle. Die Attribute des script-Tags, also die Event-Handler, werdenin Tabelle 2.3 angegeben.

2.2.3.2 Document Object Model

Das DOM (Document Object Model) ist eine plattform- und sprachneutraleSchnittstelle. Mit ihrer Hilfe ist es moglich, uber Programme und Skrip-te dynamisch den Inhalt, die Struktur und den Stil eines Dokuments auf-zurufen und zu verandern [293]. Das DOM ermoglicht es auf HTML- undXML-Dokumente zuzugreifen [276]. Daneben ist u. a. auch ein Zugriff aufStylesheets, insbesondere CSS [290], sowie auch auf Java-Applets [231]moglich. In der Vergangenheit haben die Browserhersteller untereinan-der inkompatible DOM-Umsetzungen [37] benutzt; heutzutage hat sich desDOM des W3C als Standard etabliert [55].

Zur Verdeutlichung des DOM wird das mit der Firefox-ErweiterungDOM Inspector [172] interpretierte Codebeispiel 2.12 in Abbildung 2.9 ange-zeigt. Der DOM Inspector besteht aus verschiedenen Teilbereichen. An der

24 2 Grundlagen

Event-Handler Ausloser

onload Komplettes Laden eines Fensters oder aller Frames einesFramesets

onunload Entfernen eines Dokuments von einem Fenster oder Frame;kann in body- und frameset-Tags benutzt werden.

onclick Klick auf ein Element

ondblclick Doppelter Klick auf ein Element

onmousedown Zeiger wird uber einem Element gedruckt.

onmouseup Gedruckte Taste des Zeigers wird uber einem Elementlosgelassen.

onmouseover Zeiger befindet sich uber einem Element.

onmousemove Zeiger wird uber ein Element bewegt.

onmouseout Zeiger wird aus einem Element bewegt.

onfocus Aktivierung eines Elements: Kann in a-, area-, label-,input-, select-, textarea- und button-Tags benutztwerden.

onblur Wenn ein Element aktiviert und anschließend durch den Zeigeroder Tab verlassen wurde. Gleiche Tags wie bei onfocus.

onkeypress Taste wird gedruckt und gehalten.

onkeydown Bei aktiviertem Element eine Taste drucken

onkeyup Gedruckte Taste wird wieder losgelassen.

onsubmit Formular wird verschickt; wird nur beim form-Tagangewendet.

onreset Formular wird zuruckgesetzt; wird nur beim form-Tagangewendet.

onselect Im Textfeld wird Text ausgewahlt; kann in den input- undtextarea-Tags benutzt werden.

onchange Element hat nach einer Bearbeitung einen anderen Wert; kannin den input-, select- und textarea-Tags verwendetwerden.

Tabelle 2.3: Vom W3C angegebene Attribute des script-Typs [323]

obersten Stelle befindet sich die Menuleiste, anschließend folgt die Adress-leiste mit der Angabe der zur inspizierenden URL. Darunter befindet sichin der linken Halfte eine in einer Hierarchie gegliederte Ansicht der vor-handenen Knoten des Dokuments. Sie zeigt die Sicht des DOM an. Auf derrechten Halfte werden explizit Informationen von dem selektierten Elementdargestellt.

2.2 Sprachen 25

Abbildung 2.9: Von der Firefox-Erweiterung DOM Inspector interpretiertes

Codebeispiel 2.12

Die Gliederung des DOM kann genutzt werden, um gezielt auf bestimmteObjekte zuzugreifen. Dies wird im Codebeispiel 2.13 deutlich. In der Zeile1 und 3 befinden sich script-Tags. Auffallend ist, dass kein type-Attributangegeben wird. Seit HTML 4.0 muss es angegeben werden, ein Webbrow-ser fuhrt JavaScript-Code jedoch auch in script-Tags ohne type-Attributaus [233]. In der 2. Zeile wird ein alert-Fenster aufgerufen. Der angezeig-te Wert wird uber das DOM erfragt. Als Erstes wird das Dokument mitdocument ausgewahlt. Anschließend wird auf den body des Dokuments zu-gegriffen. Der erste Kindknoten des body-Tags ist das p-Tag; der Zahler furden Zugriff auf die Kindknoten beginnt programmtypisch mit dem Wert 0.Zuletzt wird mit innerHTML der HTML-Code innerhalb der p-Tags abgeru-fen. Folglich gibt das alert-Fenster die Meldung Hier klicken aus.

1 <script>

2 alert(document.body.children[0].innerHTML);

3 </script>

Codebeispiel 2.13: Der JavaScript-Code kann am Ende

des Codebeispiels 2.12 eingefugt werden. Anschließend wird mithilfe des

DOM ein alert-Fenster mit dem HTML-Code innerhalb der p-Tags, also

der Text Hier klicken, ausgegeben.

26 2 Grundlagen

2.2.4 Extensible Markup Language

XML (Extensible Markup Language) ist ebenso wie HTML eine Auszeich-nungssprache, die aus SGML hervorgegangen ist. Die Sprache wurde ur-sprunglich entwickelt, um große elektronische Datenmengen zu veroffentli-chen sowie auszutauschen [310]. Das W3C hat im Jahr 1999 eine Liste mitinsgesamt 10 Punkten erstellt, die die Grundlagen der Sprache verdeutli-chen sollen [292]. Nachfolgend werden wichtige Punkte aufgelistet:

n Mit XML werden strukturierte Daten nicht in Binardateien, sondernin Textdateien abgelegt.

n XML ist nicht HTML, es sieht aber teilweise so aus.n XML besteht aus Text, der gelesen werden kann und nicht gelesen

werden soll.n Das Design von XML ist ausfuhrlich, d. h., XML-Dateien sind großer

als vergleichbare Binardateien.n XML ist eine Familie von unterschiedlichen Technologien wie XML

1.0, Xlink oder etwa XSL.n XML uberfuhrt HTML in XHTML.n XML ist lizenzfrei, plattformunabhangig und wird gut unterstutzt.

Im Codebeispiel 2.14 wird ein wohlgeformtes XML-Dokument dargestellt,also eine Datei mit der korrekter Benutzung der XML-Regeln [109]. Inder 1. Zeile steht die XML-Deklaration. Diese enthalt neben der Angabezur verwendeten XML-Version auch Angaben zur Unicode-Unterstutzung.Das standalone-Attribut weist mit dem Wert yes darauf hin, dass es keineMarkup-Deklarationen außerhalb des Dokumentes gibt [121]. In der nachs-ten sowie der letzten Zeile befindet sich das Wurzelelement unterhaltung.Anhand des Wurzelelements wird deutlich, dass Start- sowie End-Tags ana-log zu HTML ein elementarer Sprachbestandteil sind. In der Zeile 4 und 5befinden sich die frage- und antwort-Tags13, die passend zu ihrem Nameneinen entsprechenden Inhalt aufweisen. Angemerkt sei, dass XML zwischeneiner Groß- und Kleinschreibung unterscheidet und somit case sensitive ist.

13An dieser Stelle sei erneut darauf hingewiesen, dass es sich eigentlich um Ele-mente und nicht um Tags handelt. Ein Element kann bei XML aus einem Start-sowie End-Tag oder aus einem Empty-Element-Tag bestehen. Zur Angleichung andie anderen Kapitel wird jedoch weiterhin der Begriff Tags anstelle von Elementbenutzt.

2.2 Sprachen 27

1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

2 <unterhaltung>

3 <frage>Aus welcher Stadt kommen Sie?</frage>

4 <antwort>Ich komme aus Bochum.</antwort>

5 </unterhaltung>

Codebeispiel 2.14: Ein Beispiel fur ein XML-1.0-Dokument

2.2.4.1 Asynchronous JavaScript and XML

Ajax (Asynchronous JavaScript and XML) ist ein Konzept, das zur asyn-chronen Datenubertragung zwischem dem Client, also dem Webbrowser,und dem Server verwendet wird. Im Regelfall werden die Webtechni-ken HTML bzw. XHTML, DOM, JavaScript und das XMLHttpRequest-Objekt [274] verwendet. Der Kernpunkt ist, dass ein HTTP-Request durch-gefuhrt werden kann, ohne die Webseite komplett neu zu laden. Genau dasist bei einem UI-Redressing-Angriff interessant14. Nachfolgend ist ein An-wendungsbeispiel gegeben.

1 <span id="senden">Request erstellen</span>

2 <script type="text/javascript">

3 var httpRequest;

4 document.getElementById("senden").onclick = function() {

erstelleRequest(’clickjacking.html’); };

5

6 function erstelleRequest(URL) {

7 httpRequest = new XMLHttpRequest();

8 if (!httpRequest) {

9 alert(’XMLHTTP-Instanz kann nicht erstellt werden.’);

10 return false;

11 }

12 httpRequest.onreadystatechange = alertFensterMitInhalt;

13 httpRequest.open(’GET’, URL);

14 httpRequest.send();

15 }

16

17 function alertFensterMitInhalt() {

18 if (httpRequest.readyState === 4) {

19 if (httpRequest.status === 200) {

20 alert(httpRequest.responseText);

21 } else {

14Bei manchen Angriffen kann es von Vorteil sein, dass Inhalte, wie abgegriffeneDaten des Opfers, automatisch, ohne das die Webseite erneut vollstandig geladenwird, zum Angreifer geschickt werden.

28 2 Grundlagen

22 alert(’Es gibt ein Problem mit dem HTTP-Request.’);

23 }

24 }

25 }

26 </script>

Codebeispiel 2.15: Ein Beispiel einer Ajax-Anwendung mit einem

XMLHttpRequest. Es orientiert sich an der ausfuhrlichen Version des Mozilla

Developer Network [175].

Im Codebeispiel 2.15 ist ein vereinfachter JavaScript-Code fur die Anwen-dung eines via Ajax erstellten XMLHttpRequest gegeben. Als Erstes werdenspan-Tags verwendet. Diese werden benutzt, um Inline-Elemente zu grup-pieren. Sie verandern nicht das Aussehen des Inhalts innerhalb der Tags.Im Start-Tag befindet sich das Attribut id, das den Attributwert senden

beeinhaltet.

readyState-Zustand Beschreibung

0 Request wurde nicht initialisiert.

1 Serververbindung hergestellt.

2 Request empfangen.

3 Request verarbeiten.

4 Request beendet, und die Antwort ist fertig.

Tabelle 2.4: Auflistung von moglichen readyState-Zustanden [262].

In der Zeile 2 und 26 werden script-Tags verwendet; das Start-Tag enthaltdas Attribut type mit dem MIME-Typ fur JavaScript-Dateien. In der nachs-ten Zeile wird die Variable httpRequest erstellt. Anschließend wird mithilfedes DOM das Element mit dem id-Attributwert senden ausgewahlt und miteinem onclick-Handler versehen. Das heißt, bei einem Klick auf Requesterstellen wird der Code innerhalb der geschweiften Klammern der Funk-tion ausgefuhrt. Dort wird die Funktion erstelleRequest mit dem Para-meter clickjacking.html aufgerufen. Die Funktion wird ab der 6. Zeile er-stellt und zeigt, dass der Parameter mit dem Namen URL bezeichnet wird. Indiesem Anwendungsfall wird also eine relative URL zu einer HTML-Dateiangegeben; die Seite beinhaltet zur Veranschaulichung lediglich den Textfoobar. In der 4. Zeile wird mit XMLHttpRequest die API zur Datenubert-ragung abgerufen. Anschließend wird in der 8. bis 10. Zeile gepruft, obdie Instanz erzeugt werden konnte. Falls nicht, wird eine Fehlermeldungausgegeben und der Funktionsaufruf mit return false beendet. Nachfol-

2.2 Sprachen 29

gend wird in der 12. Zeile der Event-Handler fur den asynchronen Zugriffaufgerufen. Hierbei wird die Funktion alertFensterMitInhalt ausgefuhrt.Die Funktion pruft in der ersten if-Bedingung, ob der aktuelle Zustanddes Objekts dem Wert 4 entspricht. In Tabelle 2.4 werden die moglichenreadyState-Zustande aufgelistet.

Ist der Request beendet und die Antwort vorhanden, wird in der nachs-ten if-Bedingung uberpruft, ob der HTTP-Statuscode dem Wert 200 ent-spricht, d. h., ob die Clientanfrage erfolgreich verlaufen ist. Ist dies der Fall,wird der Inhalt der Datei clickjacking.html in einem alert-Fenster aus-geben. Andernfalls wird eine Fehlermeldung angezeigt.

Insgesamt wird also nach einem Klick auf den Text Request erstellen

via Ajax ein XMLHttpRequest ausgefuhrt, sodass der Inhalt der Webseiteclickjacking.html in einem alert-Fenster erscheint, das den Text foobarenthalt. Folglich ist es moglich, die Daten einer anderen Seite zu laden,

ohne die aktuelle Seite vollstandig zu aktualisieren.An dieser Stelle sei angemerkt, dass das Codebeispiel 2.15 zumindest

in der erstelleRequest-Funktion in Bezug auf eine Unterstutzung fur un-terschiedliche Browser unzureichend ist. Dies ist darauf zuruckzufuhren,dass der HTTP-Request von Browsern wie Firefox, Safari oder insbesonderedem Internet Explorer unterschiedlich verarbeitet wird. In diesem Fallbei-spiel wurde der Internet Explorer <7 außer acht gelassen. Genauere Detailskonnen Sie im vollstandigen Codebeispiel des Mozilla Developer Networknachlesen [175].

2.2.4.2 Scalable Vector Graphics

SVG (Scalable Vector Graphics) ist eine W3C-Empfehlung fur eine Sprache,die zweidimensionale Grafik-Anwendungen, Bilder und eine Reihe von da-zugehorigen Skript-Schnittstellen fur Grafiken beschreibt [318]. Sie ist ur-sprunglich, seit dem Jahr 1998, auf Vorschlage fur vektorbasierte Auszeich-nungssprachen zuruckzufuhren. So wurde die auf XML basierende SprachePrecision Graphics Markup Language (PGML) [284] im April 1998 beimW3C als Standard vorgeschlagen. Sie wurde jedoch vom W3C abgelehnt.Analog dazu gab es im Mai 1998 ein konkurrierendes Format, die VectorMarkup Language (VML) [285]. Letztendlich ging SVG aus einer Verbes-serung sowie Vereinigung von PGML und VML hervor [277]. SVG bestehtim Wesentlichen aus XML sowie optionalen CSS und JavaScript, somit gel-ten auch die dortigen charakteristischen Eigenschaften.15 Einer der Vortei-

15Wahrend der spaten Entwicklungsphase der SVG Mobile 1.1-Spezifikation wur-de deutlich, dass es notig ist, das DOM von SVG sowie XML in einer schlankerenImplementierung zur Verfugung zu stellen. SVG Tiny 1.1 hat dabei neue Featu-res zum Micro DOM (uDOM) [294] hinzugefugt, die im Hinblick auf die SVG Ti-

30 2 Grundlagen

le von SVG ist, dass es frei skalierbar und daher auch fur mobile Geratemit einer niedrigen Auflosung geeignet ist. Umgekehrt kann SVG selbst-verstandlich auch fur hohe Auflosungen genutzt werden. Zudem konnenGrafiken oder etwa andere SVG-Dateien eingebunden werden [138] .

1 <?xml version="1.0" standalone="no"?>

2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

4 <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="

http://www.w3.org/2000/svg" version="1.1">

5 <desc>SVG Beispiel</desc>

6 <rect x="1" y="1" width="1000" height="300" fill="none" stroke

="black" stroke-width="5" />

7 <circle cx="500" cy="150" r="100" fill="white" stroke="black"

stroke-width="15" />

8 <text x="455" y="165" font-size="50">SVG</text>

9 </svg>

Codebeispiel 2.16: Beispiel einer SVG-Datei. Innerhalb des Rechtecks

befindet sich ein Kreis mit einem Wort [304].

Im Codebeispiel 2.16 werden einige charakteristische Eigenschaften vonSVG-Dateien gezeigt. Das von Opera 11.50 interpretierte Ergebnis wird inAbbildung 2.10 dargestellt.

Abbildung 2.10: Von Opera 11.50 interpretiertes Codebeispiel 2.16

ny-Implementierung erstellt wurden. Mit der uDOM gab es also, gegenuber bspw.dem XML-DOM, eine schlankere Moglichkeit, um Dokumente auf primar mobilenGeraten zu modifizieren [2].

2.2 Sprachen 31

In der 1. Zeile folgt die fur XML typische XML-Deklaration. In der nachs-ten Zeile wird der Dokumenttyp auf das vom W3C spezifizierte SVG 1.1festgelegt [322]. Der eigentliche SVG-Code wird innerhalb von svg-Tags ein-gebettet [264]. Im Start-Tag werden die Attribute width und height dazuverwendet, die Breite und Hohe, also die Ausdehnung, des SVG-Dokumentsfestzulegen. Das Attribut viewBox fuhrt ein Koordinatensystem ein, das esermoglicht, eine gegebene Menge an Grafiken in einem Container-Elementzu skalieren. Der Wert besteht aus vier Zahlen, die fur die X- und Y-Koordinate sowie fur die Breite und Hohe stehen. Sie werden durch einLeerzeichen und ein optionales Komma getrennt und spezifizieren einRechteck. Jedes Container- und Grafikelement einer SVG-Datei kann optio-nale desc- und optionale title-Tags beinhalten. Sie sind fur die Beschrei-bung des Elements zustandig [309].

rect-Attribute Beschreibung

x Die X-Achsenkoordinate von der Seite des Rechtecks, die denkleineren X-Achsen-Koordinatenwert im aktuellenKoordinatensystem des Benutzers hat. Falls der Wert nichtspezifiziert ist, wird standardmaßig eine 0 verwendet.

y Analog zu x, jedoch mit Y-Achsen.

width Die Breite des Rechtecks. Negative Werte ergeben einenFehler [316], bei 0 wird das Rendering deaktiviert.

height Analog zu der width , jedoch mit Hohenangaben.

rx Fur runde Ecken in der X-Achse des Rechtecks. NegativeWerte ergeben einen Fehler; kein Wert wird als eine 0interpretiert.

ry Analog zu rx, jedoch fur die Y-Achse.

Tabelle 2.5: Auflistung einiger moglicher SVG-rect-Attribute [304]

circle-Attribute Beschreibung

cx Die Koordinate von der X-Achse der Mitte des Kreises.Standardmaßig wird eine 0 verwendet.

cy Analog zu cx, jedoch fur die X-Achse.

r Der Radius des Kreises. Negative Werte ergeben einen Fehler;bei 0 wird das Rendering deaktiviert.

Tabelle 2.6: Auflistung einiger moglicher SVG-circle-Attribute [304]

32 2 Grundlagen

Anschließend wird ein Rechteck, ein Kreis sowie ein Text definiert. Die je-weiligen Attribute sind bis auf die text-Tags in den Tabellen 2.5 und 2.6nachzulesen. Beim text-Start-Tag wird die Positionierung des Textes aufder X- sowie der Y-Achse und die Schriftgroße festgelegt.

2.3 Anmerkungen und Literaturtipps

Sowohl in Kapitel 2.1 als auch in 2.2 gilt, dass nur ein Bruchteil der furdas Protokoll bzw. die behandelten Sprachen wichtigen Merkmale erwahntwurden. Aufgrund der ausgewahlten Codebeispiele sollte es jedoch moglichsein, die nachfolgenden Kapitel in einem ausreichenden Maße nachzuvoll-ziehen. Anzumerken sei weiterhin, dass die Erklarungen der im Buch ge-nannten Codebeispiele an manchen Stellen redundant bzw. selbst erklarendwirken. Dies wurde bewusst gemacht, um eventuelle Unklarheiten zu ver-meiden. Sollten trotzdem einige Fragen offen bleiben, so ist es empfehlens-wert, die angebenden Referenzen und Quellenverweise aufzurufen.

Daruber hinaus ist es hinsichtlich der Erstellung von eigenen UI-Redressing-Machbarkeitsnachweisen oder -Gegenmaßnahmen sinnvoll,uber ein tieferes Wissen in dem jeweiligen Fachgebiet zur verfugen. Dies-bezuglich werden nachfolgend einige Literaturtipps angegeben.

n HTML5 & CSS3: Webentwicklung mit den Standards von morgenAutor: B. P. Hogan; Ubersetzer: S. FrolichVerlag: O’Reilly; Auflage: 1 (2011); 272 SeitenSprache: Deutsch; ISBN-13: 978-3897213166

n JavaScript: Einfuhrung, Programmierung und ReferenzAutor: S. KochVerlag: dpunkt.verlag; Auflage: 6 (2011); 476 SeitenSprache: Deutsch; ISBN-13: 978-3898647311

n JavaScript: The Definitive Guide (Definitive Guides)Autor: D. FlanaganVerlag: O’Reilly Media; Auflage: 6 (2011); 1077 SeitenSprache: Englisch; ISBN-13: 978-0596805524

n Einstieg in XML: Grundlagen, Praxis, ReferenzAutor: H. VonhoegenVerlag: Galileo Computing; Auflage: 6 (2011); 619 SeitenSprache: Deutsch; ISBN-13: 978-3836217118

2.3 Anmerkungen und Literaturtipps 33

n Cross Site Scripting Attacks: XSS Exploits and Defense: Cross SiteScripting Exploits and DefenseAutoren: S. Fogie, J. Grossman, R. Hansen, A. Rager, P. PetkovVerlag: Syngress Media, Auflage: 1 (2007); 478 SeitenSprache: Englisch; ISBN-13: 978-1597491549

n Sichere Webanwendungen: Das PraxisbuchAutoren: M. Heiderich, C. Matthies, J. Dahse, fukamiVerlag: Galileo Computing; Auflage: 1 (2008); 644 SeitenSprache: Deutsch; ISBN-13: 978-3836211949

n The Tangled Web: A Guide to Securing Modern Web ApplicationsAutor: M. ZalewskiVerlag: No Starch Press; Auflage: 1 (2011); 299 SeitenSprache: Englisch; ISBN-13: 978-1593273880