Seite 4: Umbaumaßnahmen

Inhaltsverzeichnis

Umbaumaßnahmen

Um die CSP wirkungsvoll einsetzen zu können, sind in der Regel kleinere oder größere Änderungen an der Webseite nötig. Statische <script>-Blöcke können relativ einfach in .js-Dateien ausgelagert und über <script type="text/javascript" src="skripte.js"></script> wieder in die Seite eingebettet werden.

Von dem Verbot eingebetteter Skripte sind aber auch alle attributbasierten EventHandler wie onchange betroffen. Der JavaScript-Code im folgenden HTML-Element muss also ebenfalls modifiziert werden:

<input id="i0" class="amount" onchange="updateSum()">

Damit das ausgelagerte Skript über Veränderungen des Elements benachrichtigt wird, muss es mit der Funktion addEventListener() einen Event-Handler registrieren. Allerdings funktioniert das nicht bei allen Browsern: So müsste man etwa beim Internet Explorer bis Version 8 auf attachEvent() ausweichen. Für diese und weitere Browserabweichungen gibt es eine komfortable Lösung: Die jQuery-Bibliothek fängt solche Eigenheiten ab und erlaubt darüber hinaus das bequeme Adressieren von Elementen über CSS-Selektoren. So lässt sich etwa für Input-Felder mit der CSS-Klasse "amount" ein onchange-Event-Handler wie folgt registrieren:

$().ready(function () {
	$(".amount").change(function() {
		updateSum();
	});
});

Wer bislang noch nicht mit jQuery gearbeitet hat, bekommt auf der Projektseite Starthilfe.

Datenbrücke

Manchmal werden im JavaScript-Code Daten benötigt, die serverseitig dynamisch in den Code eingefügt werden. So schreibt etwa ein PHP-Skript dynamisch zur Laufzeit auf dem Server direkt den Wert 42 in die Variable price. Da der JavaScript-Code beim Einsatz einer CSP jedoch in statischen Dateien abgelegt werden sollte, funktioniert das dynamische Einbetten freilich nicht mehr.

Es gibt jedoch einen Trick: Man fügt die Daten weiterhin in den HTML-Code der Seite ein und greift über die ausgelagerten Skripte anschließend darauf zu. HTML5 erlaubt es, alle Elemente mit selbstdefinierten Attributen zu erweitern, sofern diese mit "data-" beginnen. Der Server kann also den folgenden HTML-Code generieren:

<input id="i1" class="amount" data-price="42">

Mit jQuery werden die data-Attribute dann wie normale Attribute über attr(name) angesprochen:

price=$("#i1").attr("data-price")

In alten Anwendungen, die keine HTML5- Funktionen verwenden dürfen, können unsichtbare input-Felder vom Typ "hidden" verwendet werden:

<input type="hidden" id="p3" value="9">

Eval is Evil

Die Standard-Policy verbietet es, Zeichenfolgen als JavaScript-Code zu interpretieren. Konkret bedeutet dies, dass die Verwendung von eval() und new Function() tabu ist. Die Funktionen setTimeout() und setInterval() dürfen nur noch mit einem function-Objekt als Parameter verwendet werden. Also beispielsweise statt

setTimeout("alert('vorbei')", 100);

muss diese Variante verwendet werden:

setTimeout(function() { alert("vorbei"); }, 100);

Wer eval() zum Parsen von Daten im JSON-Format nutzt, sollte stattdessen zu der Methode JSON.parse() greifen, die alle aktuellen Browser bieten. Wenn Internet Explorer 7 und älter unterstützt werden sollen, können JSON-Libraries verwendet werden.