Anzeige
Tutorialbeschreibung

Javascript und Ajax - Code schützen

Javascript und Ajax - Code schützen

Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Das Wesentliche ist für die Augen unsichtbar, man muss es mit dem Herzen sehen. – Antoine de Saint-Exupéry, Der kleine Prinz

Kapitel 27 Code schützen

Beim Lesen von JavaScript-Newsgroups und in Diskussionslisten sowie in den Gängen von Web-Agenturen taucht immer wieder eine Frage auf: Wie kann ich meinen JavaScript-Code schützen? Wie kann ich verhindern, dass andere Personen meinen Code auslesen, kopieren, abändern und dann als ihr geistiges Eigentum ausgeben können?

Um die Antwort vorwegzunehmen: gar nicht.

Sie haben richtig gelesen – es ist nicht möglich, den Code hundertprozentig zu schützen. Es gibt mehrere Ansätze, und manche Programmierer behaupten tatsächlich, ihr Ansatz würde funktionieren. Bis jetzt konnte aber noch niemand nachweisen, dass seine Lösung auch wirklich funktioniert.

Denken Sie daran: JavaScript ist eine clientseitige Skriptsprache. Das heißt, sie wird vom Client, also vom Webbrowser, interpretiert. Die Daten müssen daher irgendwie beim Browser ankommen. Man kann die Daten auf mehrere Arten und Weisen abfangen; manchmal bietet der Browser sogar Möglichkeiten an, auf den Quellcode zuzugreifen.

Im Folgenden werden wir einige Möglichkeiten vorstellen, wie Sie es dem Benutzer möglichst schwer machen, auf die Daten zuzugreifen. Mögliche Illusionen wollen wir Ihnen jedoch vollständig nehmen. Aus diesem Grund erfahren Sie jedes Mal, wie das vorgestellte Verfahren ausgehebelt werden kann.

Bei den Methoden zum Datenzugriff beschränken wir uns auf die Browser Internet Explorer und Mozilla, aber auch mit anderen Browsern ist es sehr einfach, an Quellcodeinformationen zu gelangen.


 

 

27.1 Quellcode einsehen  

Von einem Webserver übertragene Dateien werden von den verschiedenen Browsern an unterschiedlichen Stellen zwischengespeichert. Es gibt mehrere Möglichkeiten, auf diese Dateien zuzugreifen:

>

über Menübefehle

 

>

mit Tastenkürzeln

 

>

durch Kontextmenüs

 

>

über das Dateisystem

Im Folgenden stellen wir die erfolgreichsten Methoden vor.

 

27.1.1 Menübefehle 

Jeder Browser, der etwas auf sich hält, bietet Menübefehle an, um auf den Quelltext von einzelnen HTML-Seiten zuzugreifen.

Im Microsoft Internet Explorer steht dazu das Kommando Ansicht N Quelltext anzeigen zur Verfügung. Der Browser öffnet dann den Standard-Texteditor des Systems (unter Windows: Notepad). Für größere Dateien wird unter einigen Windows-Versionen bei Bedarf WordPad geöffnet, weil Notepad dort eine Größenbeschränkung hat.

Mozilla-Browser bieten die Menüoption Ansicht N Seitenquelltext bzw. View N Page Source. Hierzu wird ein neues Browserfenster ohne jeglichen Schnickschnack geöffnet (also ohne irgendwelche Leisten; nur die Titelleiste und gegebenenfalls Scrollbalken sind sichtbar). In diesem Fenster wird der Seitenquelltext angezeigt.


Bilder

Abbildung 27.1     Quellcode einsehen im Firefox


27.1.2 Tastenkürzel 

Die wichtigsten Menübefehle einer Applikation können auch mit Tastenkürzeln aufgerufen werden. Das ermöglicht erfahreneren Benutzern, auf die wichtigsten Funktionen einer Applikation möglichst schnell zuzugreifen. Ein Tastenkürzel kann schneller ausgeführt werden als ein Mausklick, denn mit der Maus muss zunächst das zu klickende Element gesucht und mit dem Cursor erreicht werden. Diese »Arbeit« entfällt bei Tastenkürzeln, weil versiertere Benutzer blind tippen können und dabei die Augen nur auf den Bildschirm richten müssen. Wo sich die einzelnen Tasten befinden, verrät das Gefühl.

Unter dem Microsoft Internet Explorer steht kein Tastenkürzel für die Anzeige des Quelltextes zur Verfügung. Die Mozilla-Versionen dagegen kennen (Strg)+(U), was denselben Effekt hat wie Ansicht N Seitenquelltext bzw. View N Page Source.

Eine besondere Bedeutung kommt hier den Frames zu. Bei mehreren Frames ist oft nicht der Quellcode des Hauptdokuments mit dem <frameset>-Element interessant, sondern der Code in den einzelnen Frames. Sobald Sie mit der Maus in einen Frame klicken, erhalten Sie bei Mozilla-Browsern über Ansicht N Rahmenquelltext bzw. View N Frame Source den Quelltext des ausgewählten Frames.

 

27.1.3 Kontextmenü 

Wenn Sie mit der rechten Maustaste in einen leeren Bereich eines HTML-Dokuments klicken, erhalten Sie ein Kontextmenü, über das Sie unter anderem auch den Quelltext des aktuellen Dokuments anzeigen können. Das funktioniert durchgängig bei allen Browsern, seien es der Internet Explorer, Netscape Navigator oder Opera. Lediglich die Bezeichnung des entsprechenden Menüeintrags ist anders:

gpBilder
 

Beim Internet Explorer heißt der Eintrag Quelltext anzeigen.

 

gpBilder
 

Bei Mozilla-Browsern heißt der Eintrag Seitenquelltext anzeigen bzw. View Page Source (siehe Abbildung 27.2).


Bilder

Abbildung 27.2     Das Kontextmenü im Firefox

Sie müssen nur darauf achten, dass Sie nicht mit der rechten Maustaste auf eine Grafik klicken; der Internet Explorer streicht dann den Eintrag Quelltext anzeigen aus dem Kontextmenü.

Was wenige wissen: Das Kontextmenü lässt sich auch per Tastendruck aufrufen, wenn die Tastatur das unterstützt. Windows-Tastaturen haben nämlich rechts von (AltGr) noch eine spezielle Taste (), die das Kontextmenü aufruft. So kann auch ohne Mausbetätigung der Quelltext einer Seite über das Kontextmenü angezeigt werden.


27.1.4 Dateisystem  

Wenn ein Browser Daten von einem Webserver anfordert, hält er diese in der Regel nicht im Speicher (der wäre sonst schnell voll), sondern legt sie auf der Festplatte ab. Wenn Sie also Ihre Festplatte durchsuchen, stoßen Sie auf eine Reihe von HTML-Dateien, Grafiken und eben auch auf JavaScript-Files. Sie müssen nur wissen, wo Sie zu suchen haben:

>

Der (Windows-)Internet Explorer speichert die Dateien in einem Ordner namens Temporary Internet Files zwischen. Dieser Ordner befindet sich:

 

   

>

bei Windows 9x/Me unterhalb des Verzeichnisses C:windows

 

   

>

bei Windows NT/2000/XP/2003/Vista im Profilverzeichnis des Benutzers (z.  B. C:winntprofilesenutzername oder C:Dokumente und Einstellungen<Benutzername>Anwendungsdaten)

Die genauen Ordnerbezeichnungen sind auch von der jeweiligen Systemkonfiguration abhängig.

>

Mozilla-Browser speichern (unter Windows) die Dateien im Verzeichnis C:windowsAnwendungsdaten (beziehungsweise C:Dokumente und Einstellungen<Benutzername>Anwendungsdaten) ab; der genaue Pfad hängt natürlich unter anderem davon ab, welches Mozilla-Derivat Sie einsetzen.


Bilder

Abbildung 27.3     Im Cache des Internet Explorer befinden sich auch .js-Dateien.

Sie können also Ihren Cache über das Dateisystem durchsuchen und dort abgelegte Dateien beispielsweise in einem Texteditor öffnen. Schon haben Sie Zugriff auf den dortigen Code.

In Mozilla-Browsern haben Sie über die Pseudo-URL about:cache die Möglichkeit, einen Einblick in die im Cache abgelegten Dateien zu erhalten, sogar inklusive Einblick in den Speicher-Cache (siehe Abbildung 27.4).


Bilder

Abbildung 27.4     Zugriff auf den Cache eines Mozilla-Browsers leicht gemacht

Sie haben nun einen Überblick darüber erhalten, wie Sie an den Code herankommen können. In den folgenden Abschnitten werden verschiedene Ansätze vorgestellt, wie Sie den Zugriff auf die Daten zumindest erschweren können.

27.2 Code im Frame verstecken 

Frames sind ein beliebtes Mittel, um den Inhalt einer Website zu strukturieren – oder um permanent ein Werbebanner einzublenden. Ein häufig eingesetztes Mittel sind zudem unsichtbare Frames.

Angenommen, Sie haben eine Homepage bei Ihrem ISP und Ihre URL ist http://privat.xy.de/IhrName/. Nun würden Sie gern eine Domain dazu registrieren, beispielsweise http://www.0815.de/. Als alter Schotte nehmen Sie den billigsten Anbieter, der keinerlei Webspace (Speicherplatz) anbietet, sondern nur eine Weiterleitung. Wenn ein Benutzer also http://www.0815.de/ in seinem Browser aufruft, sowll eigentlich http: //privat.xy.de/IhrName im Browser erscheinen. Damit die hässliche URL aber nicht auftaucht, werden unsichtbare Frames eingesetzt. Die Seite http://privatxy.de/IhrName wird zwar aufgerufen, allerdings in einem Frame, was dazu führt, dass die URL nicht in der Adressleiste des Browsers auftaucht. Es muss nur dafür gesorgt werden, dass der Frame möglichst das gesamte Browserfenster einnimmt:

<html>

<head>

<title>www.0815.de</title>

</head>

<frameset rows="100%">

  <frame src="http://privat.xy.de/IhrName/" />

</frameset>

</html>

Natürlich können Sie auch ein <iframe>-Element einsetzen.

Diese Methode können Sie auch für Ihre JavaScript-Bemühungen einsetzen. Einige Benutzer greifen nur über Ansicht N Quelltext anzeigen auf den Quelltext zu. Wenn Sie also nach obigem Muster Frames einsetzen, erhält der Benutzer den Quellcode mit <frameset> bzw. <iframe>, aber nicht die eigentliche Seite (mit dem geheimen JavaScript-Code).

Dieses Vorgehen lässt sich aber wie folgt besonders einfach aushebeln:

>

durch das Kontextmenü

 

>

im Netscape mit dem Menübefehl Ansicht N Rahmenquelltext bzw. View N Frame Source.

Zu Beginn des Abschnitts war von »unsichtbaren Frames« die Rede. Damit bezeichnet man im Allgemeinen Frames, die nicht sichtbar sind, also eine Breite/Höhe von einem oder null Pixeln haben. Nachfolgend ein Beispiel:

<html>

<head>

<title>Unsichtbarer Frame</title>

</head>

<frameset rows="100%, *" border="no" frameborder="0">

  <frame src="hauptseite.html" />

  <frame name="js" src="skript.html" />

</frameset>

</html>

Der untere Frame mit dem name-Attribut "js" ist unsichtbar. In ihm wird die Datei skript.html geladen, die eine Reihe von JavaScript-Funktionen enthalten kann.

Sie können nun vom Hauptframe aus die Funktionen im unsichtbaren Frame aufrufen:

<a href="javascript:if (parent.frames['js']) parent.frames['js'].funktionsname()">Funktion aufrufen

</a>

Beachten Sie die Überprüfung:

if (parent.frames['js'])

Damit können Sie sicherstellen, dass der Frame überhaupt existiert. Wenn nämlich ein Benutzer einen Link im oberen Frame im neuen Fenster öffnet, stehen die Skripten nicht mehr zur Verfügung.

Bei komplexeren Frame-Strukturen müssen Sie die Abfrage selbstredend anpassen, beispielsweise die Frame-Referenz ändern:

if (top.frames['js']){

   top.frames['js'].funktionsname()

}

Dieses Vorgehen lässt sich nicht mehr über Menübefehle aushebeln und auch nicht über das Kontextmenü, da Sie nicht in den unsichtbaren Frame klicken können.

Der Benutzer muss hier ein wenig mehr Gehirnschmalz aufwenden. Wenn er das Hauptdokument mit dem <frameset> analysiert, wird er die Referenz auf die Datei skript.html finden. Wenn diese Datei einzeln im Browser aufgerufen wird, kann sie problemlos eingesehen werden.

27.3 Mausklick verhindern 

Mit JavaScript lassen sich Fenster ohne Menüleiste erstellen (siehe Kapitel 8). Die naheliegendste Variante, auf den Quelltext zuzugreifen, besteht dann in der Verwendung des Kontextmenüs. Dazu muss die rechte Maustaste betätigt werden. Diesen Mausklick kann man bei Browsern ab Version 4 abfangen:

>

Für den Internet Explorer muss aufgrund des dortigen Event-Handlings beim Eintreten der Ereignisse mousedown und mouseup die entsprechende Behandlungsfunktion aufgerufen werden:

if (document.all) {

   document.onmouseup = kein_kontext;

   window.onmouseup = kein_kontext;

}

>

Für Mozilla-Browser muss die Funktion ebenfalls mit den Event-Handlern verknüpft werden; zusätzlich jedoch wird die Funktion captureEvents() benötigt:

if (document.getElementById) {

   window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

   window.onmousedown = kein_kontext;

   window.onmouseup = kein_kontext;

}

>

Die Funktion kein_kontext() fragt zunächst ab, ob Maustaste 2 oder 3 gedrückt worden ist (je nach Browser hat die rechte Maustaste eine andere Nummer). Falls ja, wird eine Warnmeldung ausgegeben und die Funktion mit return false verlassen. So wird sichergestellt, dass das Ereignis nicht an den Browser weitergereicht wird, der dann das Kontextmenü öffnen würde.

function kein_kontext(e) {

   if (document.all) {

      if (event.button >= 2) {

         alert("Kein Rechtsklick!");

         return false;

      }

   } else if (document.getElementById) {

      if (e.which >= 2) {

         alert("Kein Rechtsklick!");

         return false;

      }

   } else {

      return true;

   }

}

Nachfolgend finden Sie das gesamte Skript, wieder in einer Funktion gekapselt, zum einfachen Einbau in Ihre HTML-Seiten:

function codeschutz_kontext(){

   if (document.all) {

      document.onmouseup = kein_kontext;

      window.onmouseup = kein_kontext;

   } else if (document.getElementById) {

      window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

      window.onmousedown = kein_kontext;

      window.onmouseup = kein_kontext;

   }

}

 

function kein_kontext(e) {

   if (document.all) {

      if (event.button >= 2) {

         alert("Kein Rechtsklick!");

         return false;

     }

   } else if (document.getElementById) {

      if (e.which >= 2) {

         alert("Kein Rechtsklick!");

         return false;

      }

   } else {

      return true;

   }

}

Der Einbau in ein HTML-Dokument gestaltet sich sehr einfach. Die Funktion muss nur eingebunden und aufgerufen werden:

<html>

<head>

<title>Codeschutz</title>

<script language="JavaScript" src="codeschutz.js"></script>

<script language="JavaScript"><!--

codeschutz_kontext();

//--></script>

</head>

<body oncontextmenu="return false;">

</body>

</html>


Bilder

Abbildung 27.5     Die »Fehlermeldung« bei einem Rechtsklick

Der Event-Handler oncontextmenu ist ein Feature ab Internet Explorer 5.0. Dieser Event-Handler wird aktiv, sobald das Kontextmenü aufgerufen wird. Durch return false; kann dies sinnvoll unterbunden werden – in halbwegs aktuellen Versionen des Internet Explorers, wohlgemerkt.

Gegen das oben vorgestellte Skript gibt es die folgenden Gegenmittel:

>

Deaktivierung von JavaScript

 

>

Menübefehl (Ansicht N Quelltext anzeigen beim Internet Explorer, Ansicht N Seitenquelltext bzw. View N Page Source im Mozilla)

 

>

Tastenkürzel ((Strg)+(U) im Netscape)

 

>

Verwendung einer speziellen Taste auf Windows-Tastaturen (außer beim Internet Explorer mit oncontextmenu="return false;")

 

>

Durchsuchen des Browser-Caches

 

27.4 Code codieren


Wenn der JavaScript-Code schon einsehbar ist, können Sie wenigstens dafür sorgen, dass nur Sie ihn verstehen und niemand sonst. Natürlich gibt es Programmierer, die von vornherein so programmieren, dass nur sie noch durch ihren Code durchblicken, aber das wollen wir hier nicht annehmen.


27.4.1 Optisch verschleiern 

Wenn Sie also schönen Code vorliegen haben, können Sie wie folgt vorgehen, um es Datendieben ein wenig schwerer zu machen, den Code zu verstehen und einzubinden:

>

Entfernen Sie alle Kommentare.

 

>

Benennen Sie Variablen um. Eine Variable zaehler könnten Sie beispielsweise in FensterReferenz, gurken oder xlbrmf umbenennen. Aber passen Sie auf, dass Sie nicht selbst die Übersicht verlieren!

 

>

Entfernen Sie alle Einrückungen und andere Hilfsmittel wie beispielsweise Leerzeilen, die den Code lesbar mach(t)en.

 

>

Verzichten Sie möglichst auf Zeilensprünge. Mit ausreichend geschweiften Klammern und Strichpunkten lässt sich der gesamte Code in einer Zeile platzieren.

 

>

Verwenden Sie ein wirres Sammelsurium aus mehreren .js-Dateien, die Sie einbinden.

 

>

Fügen Sie unsinnige Funktionen und Variablen ein, die gar nicht verwendet werden (aber dafür fast genauso heißen wie tatsächlich verwendete Variablen und Funktionen).

Das waren natürlich nur ein paar Beispiele, in der Praxis sind Ihrer Fantasie kaum Grenzen gesetzt. Sie sollten aber auf jeden Fall eine Sicherheitskopie Ihrer Originalskripten behalten, um im Notfall noch eine funktionierende Kopie Ihres Codes vorliegen zu haben.


 

 

27.4.2 Inhaltlich verschleiern 

Trotz aller Tricks, den Code umzustellen und hässlich zu machen, sind die Befehle immer noch im Klartext vorhanden. Was spricht also gegen eine Verschlüsselung?

Es gibt hierzu mehrere Ansätze, und wir werden einen recht einfachen davon vorstellen. Der Trick besteht darin, den Code entsprechend umzuwandeln. Schreiben Sie dazu zunächst den notwendigen Code in eine Zeile:

function hallo() { document.write("Hallo!"); } hallo();

Nun geht es darum, obigen Code geeignet zu verschlüsseln. Die einfachste Möglichkeit besteht darin, alle Buchstaben umzuwandeln, beispielsweise indem Sie im Alphabet eine gewisse Anzahl von Zeichen voranschreiten.

Dazu benötigen Sie den ISO-Code des entsprechenden Zeichens. Wir wollen uns hier nur auf Buchstaben beschränken:

>

a hat den Zeichencode 97.

 

>

z hat den Zeichencode 122.

 

>

A hat den Zeichencode 65.

 

>

Z hat den Zeichencode 90.

Die folgende Funktion verschlüsselt eine Zeichenkette:

>

Zunächst wird der Zeichencode jedes einzelnen Zeichens bestimmt. Dazu steht die Funktion charCodeAt() zur Verfügung.

 

>

Ist das Zeichen ein Buchstabe (Code zwischen 97 und 122 oder zwischen 65 und 90), so wird eine bestimmte Zahl hinzugezählt. Damit der Code etwas schöner wird, achten wir darauf, dass am Ende trotzdem noch ein Buchstabe herauskommt.

Hier ein exemplarisches Beispiel: Das Z hat den Zeichencode 90. Wenn man drei dazuzählt, erhält man 93, dieser Code ergibt aber keinen Buchstaben. Aus diesem Grund beginnen wir bei den Zeichen wieder von vorn. Das Zeichen nach dem Z ist also das A; drei Zeichen nach dem Z kommt wieder das C.

>

Die Funktion fromCharCode()wandelt den Zeichencode wieder in ein Zeichen um.

 

>

Der erzeugte String wird von der Funktion wieder zurückgegeben.

Die Funktion sieht wie folgt aus:

function codeschutz_encode(s, delta) {

   var temp = "";

   var alt, neu;

   for (var i=0; i<s.length; i++) {

      alt = s.charCodeAt(i);

      if (alt >= 65 && alt <= 90) {

         neu = alt + delta;

         if (neu > 90) {

            neu -= 26;

         }

      } else if (alt >= 97 && alt <= 122) {

         neu = alt + delta;

         if (neu > 122) {

            neu -= 26;

         }

      } else {

         neu = alt;

      }

      temp += String.fromCharCode(neu);

   }

   return temp;

}

Der Aufruf

codeschutz_encode("function hallo() { document.write("Hallo!"); } hallo();", 13)

liefert folgendes Ergebnis:

shapgvba unyyb() { qbphzrag.jevgr("Unyyb!"); } unyyb();

Das ist schon etwas kryptischer als zuvor. Zur Decodierung muss der Algorithmus nur noch rückwärts durchlaufen werden, das heißt, der Delta-Wert muss rückwärts durchlaufen werden:

function codeschutz_decode(s, delta) {

   var temp = "";

   var alt, neu;

   for (var i=0; i<s.length; i++) {

      alt = s.charCodeAt(i);

      if (alt >= 65 && alt <= 90) {

         neu = alt – delta;

         if (neu < 65) {

            neu += 26;

         }

      } else if (alt >= 97 && alt <= 122) {

         neu = alt – delta;

         if (neu < 97) {

            neu += 26;

         }

      } else {

         neu = alt;

      }

      temp += String.fromCharCode(neu);

   }

   return temp;

}

Der folgende Code würde also das verschlüsselte Listing ausführen:

var code = codeschutz_decode("shapgvba unyyb() { qbphzrag.jevgr("Unyyb!"); } unyyb(); ");

eval(code);

Achten Sie darauf, im codierten Code Anführungszeichen entsprechend mit zu entwerten.

Das folgende Listing hilft Ihnen dabei, Ihren JavaScript-Code entsprechend zu codieren (unter der Prämisse, dass die beiden vorgenannten Hilfsfunktionen in der Datei codeschutz.js stehen). In ein Texteingabefeld geben Sie den Code ein, und auf Knopfdruck wird die kryptische Zeichenkette in einem <textarea>-Element ausgegeben. Der Code wird hier ohne weitere Erklärung wiedergegeben. Er ist nicht sonderlich kompliziert.

<html>

<head>

<title>Code verschlüsseln</title>

<script type="text/javascript" src="codeschutz.js"></script>

<script type="text/javascript"><!--

function encode(f) {

   var eingabe = f.elements["eingabe"].value;

   var delta = parseInt(f.elements["delta"].value);

   var ausgabe = codeschutz_encode(eingabe, delta);

   f.elements["ausgabe"].value = ausgabe;

}

//--></script>

</head>

<body>

<form onsubmit="return false;">

<textarea name="eingabe" cols="70" rows="10">

</textarea><br />

<input type="text" name="delta" value="13" />

<input type="button" value="Kodieren"

  onclick="encode(this.form);" />

<textarea name="ausgabe" cols="70" rows="10"

  onfocus="this.blur();">

</textarea>

</form>

</body>

</html>


Bilder

Abbildung 27.6     Der JavaScript-Code (oben) wurde verschlüsselt (unten).

Sie müssen aber nicht einmal selbst in die Tasten greifen, um Ihren Code zu verschlüsseln. Es gibt im Web eine Reihe von Freeware- und Shareware-Tools, die eine Codeverschlüsselung vornehmen können. Diese Produkte codieren zumeist den kompletten HTML-Code.

Die Seite besteht dann aus einer Menge JavaScript-Code, der (mithilfe von document.write()) die eigentliche HTML-Seite erstellt. Der große Nachteil solcher Programme ist folgender: Wenn der Browser kein JavaScript unterstützt, sieht er natürlich überhaupt nichts. Sie sollten ein solches Mittel also nur sehr bedacht einsetzen. Außerdem kann Ihren Bemühungen ein Uralt-Browser wie der Netscape Navigator 4 einen Strich durch die Rechnung machen. Unter Umständen zeigt diese Version nämlich bei der Verwendung von document.write() den erzeugten Code an, nicht aber den JavaScript-Code.

Durch die Eingabe der Suchbegriffe »html encrypt« bei einschlägigen Download-Angeboten wie etwa http://www.download.com/ erhalten Sie eine Übersicht über potenzielle Hilfsmittel. Bekannte Vertreter sind das englischsprachige Webcrypt Pro (http://www.moonlight-software .com/webcrypt.htm) und das aus deutscher Schmiede stammende HTML Guard (http://www.aw-soft.de/htmlguard.html).

Dieses Vorgehen bietet wohl die mit am besten funktionierende Verschlüsselung von Code, weist aber zwei Nachteile auf:

>

Das Updaten von Code wird schwieriger, da Sie immer wieder die Umwandlung vornehmen müssen.

 

>

An irgendeiner Stelle wird document.write() und/oder eval() aufgerufen. Ein versierter JavaScript-Programmierer kann an dieser Stelle eingreifen und sich den auszuführenden Code ausgeben lassen.

 

 

27.5 Dateien auslagern 

Während JavaScript-Code innerhalb eines HTML-Dokuments sofort sichtbar ist, ist das bei <script src="..."> nicht so einfach. Der Datendieb muss dann innerhalb des HTML-Codes den Aufruf suchen und daraus die URL auslesen. Als Nächstes muss er versuchen, auf die Datei einzeln zuzugreifen. Wenn Sie die URL im Netscape Navigator einlesen, wird die Datei tatsächlich geladen – aber unter Umständen sofort interpretiert; Sie bekommen dann nichts zu sehen. Da die Datei die Endung .js hat, wird sie (korrekterweise) für eine JavaScript-Datei gehalten und sofort ausgeführt.

Der Microsoft Internet Explorer ist da schon etwas kooperativer und fragt den Benutzer, ob er die Datei lokal speichern oder etwa doch ausführen will (siehe Abbildung 27.7). So erhalten Sie bequem Zugriff.

Auch wenn Sie nur Mozilla-Browser einsetzen können oder möchten, können Sie dennoch auf Code zugreifen, der mit <script src="..."> eingebaut wurde. Durchsuchen Sie einfach den Cache des Browsers.

Sie haben in diesem Buch schon häufiger gesehen, wie Sie durch externe .js-Dateien den Code übersichtlich und modular gestalten können. Der Code ist damit zwar nicht bombensicher, aber der Aufwand für das Klauen von Code steigt dennoch an.


Bilder

Abbildung 27.7     Der Internet Explorer will .js-Dateien abspeichern.

 

27.6 Caching verhindern

Normalerweise werden alle Dateien im Cache des Browsers gespeichert. Es gibt jedoch zwei Ausnahmen:

> Dateien, die über eine gesicherte Verbindung (per HTTPS) übertragen worden sind. Die Standardeinstellung der meisten Browser ist, diese Dateien nicht zwischenzuspeichern – das kann aber auch in den Optionen ausgeschaltet werden.
> Dateien, bei denen explizit angegeben ist, dass sie nicht im Cache landen sollen.

Wir wollen hier auf den letzten Punkt kurz eingehen. Es gibt zwei Möglichkeiten, einen Browser (und nebenbei auch einen Proxyserver) darauf hinzuweisen, dass das Dokument nicht abgespeichert werden darf, sondern jedes Mal neu vom Server angefordert werden muss:

> Durch eine Angabe im HTTP-Header:
Pragma: no-cache
Dieses Mittel steht allerdings nur bei der Verwendung von serverseitigen Skriptsprachen zur Verfügung. Hier der entsprechende Code in PHP:
header("Pragma: no-cache");
Mit ASP/ASP.NET:
Response.AddHeader("Pragma", "no-cache")
> Durch eine entsprechende Angabe im HTML-Tag mittels eines <meta>-Tags:
<meta http-equiv="pragma" content="no-cache" />

So schön das in der Theorie funktioniert, so mau sieht es in der Praxis aus. Nicht jeder Browser hält sich an die Angaben in Bezug auf das Caching-Verhalten der Dokumente. Dadurch können Datendiebe auch bei derart geschützten Dateien im Cache über das Dateisystem fündig werden.

Sie sollten sich ohnehin überlegen, ob Sie das Mittel tatsächlich einsetzen möchten. Falls ja, wird die Datei jedes Mal von Ihrem Webserver angefordert (und es wird nicht etwa zuerst nachgesehen, ob sich dieselbe Dateiversion schon im Browsercache befindet). Dadurch steigt das Transfervolumen auf Ihrem Webserver – und dadurch steigen auch Ihre Kosten.

Sollte die Caching-Angabe doch funktionieren, so gibt es einen recht einfachen Trick, auf die Datei zuzugreifen: Bei HTML-Dokumenten speichern Sie diese einfach aus dem Quellcode-Fenster Ihres Browsers ab. Bei eingebauten .js-Dateien geben Sie die URL der Datei direkt im Browser an und speichern das Ergebnis. Sie sehen – auch dies ist kein echter Schutz; Sie können damit lediglich die Ablage im Browser-Cache verhindern. Dieser ist aber ohnehin die letzte Stelle, an der nach Quellcode gesucht wird, da es ja so viele einfachere Methoden gibt.

27.7 Code serverseitig generieren

Was wäre, wenn Sie die folgenden zwei Schutzmechanismen kombinieren würden?

> Verwendung einer externen .js-Datei
> Verhinderung des Cachings der Datei

Dann gäbe es nur noch eine Möglichkeit, den Schutz zu knacken: durch die direkte Eingabe der URL in die Adressleiste des Browsers.

Um hierfür eine entsprechende Strategie zu entwickeln, benötigen wir zwei Testdateien. Die erste ist eine (fast leere) HTML-Datei:

<html>
<head>
<script type="text/javascript" src="js.php"></script>
</head>
<body>
</body>
</html>

Die Datei js.php ist – wie Sie sofort erkennen – ein PHP-Skript, das JavaScript-Code ausgeben muss. Damit das folgende Beispiel auch funktioniert, muss bei Ihnen natürlich PHP korrekt installiert sein.

Der PHP-Code macht nun Folgendes:

> Er wirft einen Blick auf alle Umgebungsvariablen und speichert diese in einem String.
> Dieser String wird mit einer JavaScript-alert()-Anweisung ausgegeben.

Mehr zur Interaktion von serverseitigen und clientseitigen Mitteln finden Sie in Kapitel 25.

<?php
$x = "";
foreach ($_SERVER as $key => $value) {
   if (is_string($value)) {
      $value = htmlspecialchars($value);
   }
   $x .= "Schlüssel: $key; Wert: $value
";
}
$x = str_replace("
", '', $x);
echo("alert('$x');");
?>

Rufen Sie nun die Datei js.html in Ihrem Browser auf. Wegen der serverseitigen Mittel dürfen Sie die Datei nicht über das Dateisystem starten (also nicht C:...js.html aufrufen), sondern müssen über den Server gehen (z.  B. http://localhost/js.html).

Nach kurzer Zeit erscheint ein Warnfenster, das alle Servervariablen ausgibt. Dabei gibt es zwischen den einzelnen Browsern leider Unterschiede. Der Internet Explorer setzt nämlich die Variable HTTP_REFERER auf die HTML-Seite, in der die .js-Datei eingebaut worden ist, auch moderne Mozilla-Browser. Aber man kann sich nicht bei allen Browsern darauf verlassen (einige bieten an, dass der Referer nicht geschickt wird), weswegen das nun folgende Vorgehen nur bedingt funktioniert:

> In dem serverseitigen Skript, das die JavaScript-Datei erzeugt, wird die Variable HTTP_REFERER abgefragt.
> In dieser wird nachgeschaut, welche HTML-Seite das Skript aufruft. Die Adresse dieser HTML-Seite muss dann den korrekten Servernamen enthalten (beispielsweise http://www.xy.de/ oder http://10.11.12.13/).
> Falls diese Werte stimmen, wird JavaScript-Code zurückgegeben, ansonsten nichts (oder eine Fehlermeldung).

Bilder

Abbildung 27.8     Der Internet Explorer setzt HTTP_REFERER.

Das folgende PHP-Skript nimmt die erforderliche Überprüfung vor:

<?php
header('Pragma: no-cache');
$r = $_SERVER['HTTP_REFERER'];
if (strpos($r, 'http://www.xy.de/') == 0 ||
    strpos($r, 'http://10.11.12.13/') == 0) {
   echo("alert('Alles ok!');");
}

Sie müssen dann nur noch das Skript entsprechend in den HTML-Code einbauen:

<script type="text/javascript"
        src="js-servercheck.php"></script>

Bedenken Sie aber, dass dieses Verfahren nur mit dem Internet Explorer funktioniert; Benutzer anderer Browser sehen in die Röhre.

Dafür funktioniert es vergleichsweise zuverlässig. Es gibt nur zwei Möglichkeiten, auf den Code zuzugreifen:

> Sie werden im Browser-Cache fündig (wenn der Browser die Cache-Anweisung mal wieder ignoriert hat).
> Sie verwenden ein spezielles Programm, das die Angabe des HTTP-Referers fälscht.

Sie sehen also: Mit ein wenig Aufwand können Sie zumindest ein wenig Schutz für Ihren Code erreichen. Hundertprozentige Sicherheit ist aber nicht zu gewährleisten. Aus diesem Grund sollten Sie in Erwägung ziehen, Ihre Energien für die Programmierung von mehr Funktionalität zu verwenden und nicht darauf, Ihren Code (ergebnislos) zu schützen.




Wenn Sie jeweils 13 Zeichen weitergehen, haben Sie das ROT13-Verfahren, das einige Mail-Clients zur Verschlüsselung anbieten. Da das Alphabet 26 Zeichen hat, ist es egal, ob Sie 13 Zeichen nach vorn oder nach hinten gehen.

 

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.01.2018 - 15:21

Danke für das Tutorial.

Portrait von Diveraowd
  • 25.05.2014 - 01:46

Klasse Tutorial. Gefällt mir

Portrait von kleeaar
  • 29.07.2008 - 14:55

WOW!
Das ist mal ein hammer Tutorial!!!

x
×
×