Anzeige
Tutorialbeschreibung

Userüberwachung - Big Brother is watching you

Userüberwachung - Big Brother is watching you

Hallo zusammen

Aufgrund der massiven Erhöhung des "Überwachunsfummels" (Kameras auf Bahnhöfen, usw.) nahm es mich schliesslich wunder, wie gut das Internet Überwachbar ist.
Da ich sowieso schon Probleme mit Usern hatte die meine Page als Spielplatz benützten (Welcher Webmaster hat das Problem schon nicht?), sah ich mein Projekt darin, ein Script zu schreiben dass jede Bewegung des Users aufzeichnet.

Unter anderem habe ich versucht ein Script zu entwickeln dass die Bewegung des Mauszeigers aufzeichnet.

Da dies so viel einfacher war als ich erwartet habe, werde ich das Prinzip hier Schritt für Schritt erklären, um zu zeigen wie einfach man den User Überwachen kann.

Vorkenntnisse sind von Vorteil:

- HTML
- Javascript
- PHP


Die Struktur des ganzen ist relativ einfach:

Ein Javascript, das in die eigentliche Seite geladen wird, zeichnet die Bewegung des Mauszeigers auf, speichert das Datum und die Seite (da das Script ja in alle verschiedenen Seiten der Website geladen wird). Anschliessend schickt das Script beim schliessen der Page die Daten an ein PHP Script, das diese in einer Datenbank speichert und die IP-Adresse des Users hinzufügt.

Das heisst:
Alle Seiten müssen folgende Teile im Quelltext enthalten:

<html>
<head>
<script type="text/javascript" src="mousescript.js"></script>
</head>
<body onmousemove="recordMouse(event)" onunload="sendRecord()">
</body>
</html>

Nun erkläre ich die beiden Funktionen die im Body-Tag aufgerufen werden.
Diese sind in der Datei "mousescript.js" gespeichert:

var record="";
var number=0;
var site=document.URL;
var date=new Date();

In der Variablen "record" werden später die Koordinaten des Mauszeigers gespeichert.

Wenn alle Mauszeigerpositionen aufgezeichnet würden, würde sich der Speicher der Datenbank zimlich schnell füllen. Daher wird nur jede fünfte Position aufgezeichnet. Die Variable "number" wird dabei als Zähler benutzt.

In der Variable "site" wird die URL der Site gespeichert.

Und die Variable "date" nimmt das Datum mit Zeit auf.

Wenn sich der Mauszeiger bewegt wird diese Funktion ausgeführt:

function recordMouse(event) {
 if (number==5) {
  x=event.screenX;
  y=event.screenY;
  record+=x+","+y+";";
  number=0}
 else {
  number++}
};

Wenn der Zähler bei 5 steht wird die Position aufgezeichnet (wird nachher beschrieben), sonst wird der Zähler um 1 erhöht (number++).

function recordMouse(event) {
 if (number==5) {
  x=event.screenX;
  y=event.screenY;
  record+=x+","+y+";";
  number=0
}
 else {
  number++}};

Dieses Script zeichnet die Mauspositionen auf.

In der Variable "x" wird die Position des Mauszeigers auf der X-Achse aufgenommen.
Dasselbe für die Y-Achse in der Variable "y".

Die Koordinaten werden nun den schon bestehenden Koordinaten in der Variable "record" hinzugefügt.

Das ganze sieht dann so aus:
758,950;771,902; ...

Der Zähler wird auf 0 zurückgesetzt.

Wenn der User nun die Site schliesst wird folgende Funktion ausgeführt:

function sendRecord() {
 var conn=null;
 if (window.XMLHttpRequest) {
  conn=new XMLHttpRequest()}
 else if (window.ActiveXObject) {
  conn=new ActiveXObject("Microsoft.XMLHTTP")};

 if (conn) {
  var postData="record="+record+"&date="+date+"&site="+site;
  conn.open("POST", "save.php", true);
  conn.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  conn.send(postData)}};

Da nun die Daten im Hintergrund an das PHP-Script gesendet werden müssen, wird eine HTTPRequest-Verbindung aufgebaut.
Da nicht alle Browser die gleiche Funktion benützen muss nun herausgefunden werden welche Funktion benötigt wird.
Internet Explorer = new ActiveXObject("Microsoft.XMLHTTP")
Fast alle anderen Browser = new XMLHttpRequest()

function sendRecord() {
 var conn=null;
 if (window.XMLHttpRequest) {
  conn=new XMLHttpRequest()}
 else if (window.ActiveXObject) {
  conn=new ActiveXObject("Microsoft.XMLHTTP")};
 if (conn) {
  var postData="record="+record+"&date="+date+"&site="+site;
  conn.open("POST", "save.php", true);
  conn.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  conn.send(postData)}
};

Nun wird getestet ob eine Verbindung hergestellt werden kann.

Falls nicht, wird nichts mehr ausgeführt.
Falls doch werden in der Variable "postData" die Daten ("record", "date", "site") zusammengefasst:
record=758,950;771,902;...&date=Wed Aug 09 2006 18:21:31 GMT+0200&site=http://www.xxx.de/index.html

Jetzt wird eine Verbindung mit der methode "POST" zu "save.php" hergestellt.

Der Header wird festgelegt.

Die Daten ("postData") werden gesendet.

Das PHP-Script:

<?php
 $ip = $_SERVER["REMOTE_ADDR"];
 $date = $_POST["date"];
 $site = $_POST["site"];
 $record = $_POST["record"];

 if ($record!="") {
  mysql_connect("adresse", "username", "passwort");
  mysql_select_db("datenbank");
  mysql_query("INSERT INTO `records` (`ip`,`date`, `site`, `record`) VALUES ('$ip', '$date', '$site', '$record')");};
?>

Die IP-Adresse des Users wird in der Variable $ip festgehalten.

"postData" wird nun wieder in 3 Variablen zerlegt ($record, $date, $site).

<?php
 $ip = $_SERVER["REMOTE_ADDR"];
 $date = $_POST["date"];
 $site = $_POST["site"];
 $record = $_POST["record"];
 if ($record!="") {
  mysql_connect("adresse", "username", "passwort");
  mysql_select_db("datenbank");
  mysql_query("INSERT INTO `records` (`ip`,`date`, `site`, `record`) VALUES ('$ip', '$date', '$site', '$record')");};

?>

Falls Daten in der Variable $record gespeichert sind wird nun eine Verbindung zur Datenbank hergestellt.

Diesen letzten Teil des Scripts ist von der Datenbankversion abhängig.

In der Datenbank muss eine Tabelle mit dem Namen "records" und den Folgenden Spalten existieren:

ip

date

site

record

xxx.xxx.xxx.xxx

Wed Aug 09 2006 18:21:31 GMT+0200

http://www.xxx.de/index.html

758,950;771,902;...

......

Fertig

Die Daten können nun mit einem anderen Script so rausgelesen werden, dass die Bewegung angezeigt werden kann. Vorschau

MfG

splinter


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von RadX
  • 01.02.2013 - 16:28

Wow. Einfach Klasse! Danke!

Portrait von toby_2007
  • 29.06.2010 - 21:13

Schön erklärt - Aber ein wenig übertrieben ... Es reicht mir, wenn ich weiß, wann wer welche Seite aufgerufen hat... Die genauen Mausbewegungen find ich was übertrieben

Portrait von froechrissi
  • 18.06.2010 - 18:45

ganz nettes Tutorial, wobei ich den Sinn nicht 100% nachvollziehen kann (was bringen die Mausbewegungen?)

Portrait von BoernOlgardson
  • 09.08.2010 - 17:32

Die Aufzeichnung von Mausbewegungen bringt z.B. etwas, wenn man die Usability einer Seite analysieren möchte und als Bewertungskriterien die Mauswege in Betracht zieht.

Portrait von paufk
  • 07.04.2010 - 01:35

Geiles Tutorial :)
Mach weiter so ^^

Portrait von Flash18ca
  • 14.02.2010 - 17:24

Wow Super Script das hat mir sehr geholfen danke!!!
Wisst Ihr ob diese aufzeichnungen rechtlich verwertbar sind oder vor gericht keinerlei anerkennung finden?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.02.2010 - 23:23

jop ist wirklich sehr gut erklärt und ein witziger spaß finde ich ;)

Portrait von ninoco
  • 11.01.2010 - 12:04

sehr gut. wusste gar nicht, was es alles gibt ;) ich denke mit gezielten datenbankabfragen und/oder anderen funktionen lassen sich interessante statistiken erstellen-

Portrait von bassist
  • 11.12.2009 - 17:57

An dem ganzen ist nichts auszusetzen, es funktioniert und die vorschau ist schon ein hingucker.

Dennoch entschliest sich mir die tatsächliche Anwendung davon. klar, man könnte das ganze soweit erweitern, dass man komplett rekonstruieren kann, was ein Benutzer auf der Seite getan hat. Naja, wäre zieml. Anstrengend alle zu überprüfen^^. Ich setze da nach wie vor auf ActionLogs. Einfach wichtige Handlungen dokumentieren, benimmt sich ein Benutzer mal ganz aus der Reihe => IP-Bann [welche man leiter umgehen kann, aber es macht meinen Standpunkt deutlich^^]

Wollte ich nur mal erwähnt haben, klar kann man das nicht in als Wertung in die Kritik einfließen lassen, ergo 5 * Daumen hoch

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.07.2009 - 10:07

Sehr sehr interessant … und beängstigend.
Gut erklärter Workshop und mit Hilfe des Auslese-Skripts sicherlich brauchbar.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.12.2008 - 17:44

??

Portrait von splinter90
  • 09.12.2008 - 18:34

Ja doch... seit heute angemeldet und zuerst mal was Hochstehendes von sich geben... nett!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.12.2008 - 18:55

stimmt, sowas nenn ich mal konstruktive kritik :D

wenn du was nicht verstehst solltest du auch sagen wo s haperrt ...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.11.2008 - 20:51

nur müsste ich mich mit arrays in javascript befassen um die daten auswerten zu können ... wie es funktionirt verstehe ich ja vom prinzip, aber bin einfach zu faul mir mal javascript bei zu bringen ..... ^^ :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.11.2008 - 11:09

genial ...

wäre noch nett wenn du den code für die anzeige posten könntest, büüdddeee (:

Portrait von splinter90
  • 24.11.2008 - 19:16

Geh mal auf die Vorschau Seite... sobald das RecordFile abgespielt ist kannst du den Quelltext ansehen... dort steht das ganze Script! ;-)

Portrait von th3gam3king
  • 16.11.2008 - 02:54

super cooles tut.....werds gleich mal probieren

Portrait von Tobbsn
  • 31.05.2008 - 08:46

WOW, es genial. das ist zur Werbeflächeinblendung sehr hilfreich da viele ihre augenwege mit der maus nachfahren.

auslesen, würde ich machen in dem ich die werte in array lade und dann mittels forschleife immer die x/y werte den Mauszeiger setze

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.09.2007 - 14:40

Super Tut!
Wäre aber trotzdem nohc interessant, wie das Auslesen funktioniert.

Portrait von Ribeiro
  • 16.04.2007 - 04:25

Wahnsinn was alles geht mit php...

x
×
×