[Tutorial] 5 Techniken um sich vor Trafficklau und Bilderdieben zu schützen

[Rizzo]

Vorwort

In diesem Tutorial wollen wir uns verschiedene Techniken anschauen, wie man sich vor Traffic- und Bilderdieben schützen kann. Bevor wir anfangen sollte allerdings eins klar sein: einen ultimativen Schutz gibt es nicht, aber es gibt Wege den Dieben ihre Arbeit zu erschweren!

Meistens werden Bilder nicht in böser Absicht geklaut, sondern schlicht und einfach, weil die Bilder gefallen oder nützlich für einen bestimmten Zweck sind. Der "Durchschnittsdieb" ist auch kein ausgekochtes Schlitzohr, sondern der Hobby-Webmaster von nebenan, dessen HTML-Kenntnisse sich meist auf MS Frontpage beschränken. Dinge wie Copyright-Verletzungen oder das durch den Trafficklau Kosten für den Geschädigten entstehen werden dabei ignoriert. Genau gegen diese Art Datendiebe richten sich die hier gezeigten Techniken.



Welche Möglichkeiten gibt es?

Wir werden uns insgesamt 5 Möglichkeiten anschauen, die man auf 3 verschiedene Arten realisieren kann. Im einzelnen sind das:

1. htaccess: Statt dem Bild ein "rotes X" ausgeben, wenn jemand auf ein Bild hotlinked
2. htaccess: Statt dem Bild wird eine alternative Grafik ausgegeben, wenn jemand auf ein Bild hotlinked
3. CSS und HTML: Auf ein Bild verlinken oder "rechtklick->Speichern unter" liefert nur eine Ersatzgrafik statt des eigentlichen Bildes.
4. PHP: Wir binden die Grafik über ein Script ein, wobei der eigentliche Pfad unerkannt bleibt
5. PHP: Der Klassiker, das Wasserzeichen

Jede Technik hat Vor- und Nachteile, deswegen muß jeder für sich entscheiden welche für ihn die beste ist. Natürlich ist es auch möglich verschiedene Techniken zu kombinieren.

Wie Al Bundy jetzt sagen würde: "Gehen wir's an...!"



Die Techniken im Einsatz

Zunächst einmal müssen wir wissen wie die Diebe vorgehen um unsere Bilder zu klauen. Dafür gibt es quasi nur eine sinnvolle Möglichkeit und das ist ein Rechtsklick auf's Bild und unter Eigenschaften nachschauen wie die Adresse und der Name des Bildes ist. Diese Adresse wird dann frech in die fremde Webseite eingebunden und der Trafficklau ist perfekt.
Glücklicherweise stehen wir diesem diebischen Treiben nicht ganz mittellos gegenüber. Schauen wir uns nun an wie wir uns schützen können.


1. htaccess - Kein Bild gefunden (Das rotes X im IE)

Zunächst sollten wir klären was eine .htaccess Datei überhaupt ist. Laut dem Artikel auf Wikipedia handelt es sich bei der .htaccess Datei um eine Konfigurationsdatei mit der wir Einfluß auf das Verhalten des Webservers nehmen können. Je nach Provider und Webpaket hat man mehr oder weniger, bzw gar keinen Zugriff auf diese Datei. Deswegen unbedingt beim Provider abklären ob man .htaccess benutzen darf, bevor versucht wird diese Tipps hier einzusetzen.
Übrigens, es handelt sich nicht um einen Schreibfehler beim Dateiname, sondern es kommt tatsächlich ein Punkt vor dem Name und eine Dateiendung in dem Sinn gibt es auch nicht.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://www.domain.tld$ [NC]
RewriteRule \.(jpg|JPG)$ [F]

Dieses Listing ist kurz aber effektiv. In der ersten Zeile wird die sogenannte RewriteEngine (RE) eingeschaltet. Die RE nimmt Anfragen entgegen (wenn wir eine Adresse im Browser aufrufen) und behandelt die Anfrage gemäß der RewriteCond.
Die RewriteCond (Cond steht kurz für Condition = Bedingung) legt fest, welche Bedingungen erfüllt sein müssen damit definierte Regeln (RewriteRule) auf die Anfrage angewendet werden. In unserem Listing bedeutet das, wenn kein leerer Referrer übergeben wurde (z.B. weil die Seite direkt nach dem Browser-Start über einen Bookmark aufgerufen wurde)

RewriteCond %{HTTP_REFERER} !^$

oder wenn die Anfrage nicht (das Ausrufungszeichen negiert den Ausdruck) von unserer Domain kam

RewriteCond %{HTTP_REFERER} !^http://www.domain.tld$ [NC]

soll die nachfolgende Regel angewendet werden.

RewriteRule \.(jpg|JPG)$ [F]

Diese kurze Zeile erledigt die ganze Arbeit für uns. Jede Anfrage nach einer Datei mit der Endung jpg oder JPG die durch die Conditions getriggert wird, bekommt durch das [F] einen Fehler gesendet, was zur Folge hat das im Browser das "Bild nicht gefunden"-Symbol angezeigt wird.

Einfach, nicht wahr?!
Allerdings mag ich diese Variante nicht sonderlich. Der Grund ist einfach der, daß der Dieb uns durch den Trafficklau schaden wollte und alles was wir tun ist ihm nur das Diebesgut zu verweigern. Ich vertrete aber die Meinung das die Besucher der Dieb-Seite ruhig von den miesen Machenschaften des Betreibers wissen sollten. Aus diesem Grund bevorzuge ich es dem Dieb-Seiten-Besucher mitzuteilen das versucht wurde sich mit fremden Lorbeeren zu schmücken und zwar mit...


2. htaccess - Eine Alternativ-Grafik senden

Nachdem unter 1. bereits geklärt wurde was eine .htaccess Datei und auch was eine RewriteCond und RewriteRule ist, fällt dieser Abschnitt kürzer aus, da beide Listings weitgehend identisch sind.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://www.domain.tld$ [NC]
RewriteRule \.(jpg|JPG)$ /bilder/dieb.gif [R,L]

Neu ist hier nur die letzte Zeile. Statt eines Fehlers senden wir hier eine alternative Grafik statt des angeforderten Bildes. Was hier "/bilder/dieb.gif" ist muß natürlich vom Pfad und Dateiname zur Alternativ-Datei angepasst werden. Ebenso ist hier wie auch im 1. Beispiel das "domain.tld" durch die entsprechende eigene Domain auszutauschen.

Wieso nun eine Alternativ-Grafik senden?
Zum einen kann man ein schlankes 2-Farben GIF senden und spart somit sehr viel Traffic, zum anderen kann man hier eine nette Text-Botschaft mitschicken die dann auf der Dieb-Seite statt des erhofften Bildes angezeigt wird. Es versteht sich von selbst das eine Botschaft wie etwa "Sie besuchen die Seite eines Traffic-Diebes! Um das original Bild zu sehen besuchen Sie bitte: domain.tld" durchaus seine Wirkung hat.

Der Clou an der Sache ist -und das habe ich selbst erst durch Zufall herausgefunden- das der eigentliche Dieb meist gar nichts davon mitbekommt, bzw erst viel später von der Alternativ-Datei etwas sieht! Das liegt nämlich daran, daß der Dieb, dadurch das er die Bilder einmal vollständig auf unserer Seite geladen hat, später auf seiner eigenen Seite die Bilder aus dem Browser Cache geliefert bekommt. Das verschafft uns wertvolle Zeit seine Site-Besucher über die miese Tour aufzuklären.


3. CSS und HTML - Der Trick mit dem GIF

Hier setzen wir auf Täuschung, um dem Dieb seine Unfähigkeit vor Augen zu führen. Die meisten die etwas "auf dem Kasten haben" werden diesen Trick schnell durchschauen, aber zum Glück gehört der gewöhnliche Bilderdieb nicht zu dieser Gattung. Wie weiter oben erwähnt greift sich der Dieb nur den Pfad zum Bild oder klaut das Bild mit "rechtsklick->speichern unter" ohne weiter auf den Dateiname zu achten. Genau das machen wir uns hier zunutze!

<div style="width: 640px; height: 480px; background: transparent url(ferienhaus.jpg) no-repeat;">
<img src="ferienhaus.gif" alt="Unser Ferienhaus" width="640" height="480" />
</div>

Der Fachmann sieht es bereits oder kann es sich denken. An die Stelle an der unser Bild (ferienhaus.jpg) plaziert werden soll setzen wir einen DIV-Container. Diesen Container versehen wir mit einem Hintergrundbild und zwar wird dafür das Bild genommen auf das unser Gauner scharf sein könnte. In diesen Container plazieren wir anschließend ganz normal einen Image-Tag aber statt unseres JPGs setzen wir hier ein transparentes GIF ein, das 5x5 Pixel groß ist und über die height & width Attribute auf die Größe des original Bildes gebracht wird (hier 640x480). Um die Täuschung etwas echter zu machen benennen wir das Gif mit dem selben Namen wie das original Bild.
Somit liegt also ein transparentes Gif (ferienhaus.gif) über dem eigentlichen Bild (ferienhaus.jpg). Klickt man nun mit rechts auf das Bild und kopiert die Adresse oder speichert das Bild auf der Festplatte ab, bekommt man nur die Daten zu dem nutzlosen, transparenten Gif.
Wenn der Dieb seinen Fehler bemerkt hat, wird er in der Regel nicht noch mal zurück kommen und sich durch die CSS Datei wühlen, nur um dann manuell den echten Pfad herauszusuchen, denn das würde Arbeit bedeuten und die will ja so ein Dieb schließlich vermeiden.
Diese Methode ist also weniger ein echter Schutz, als viel eher ein ausnutzen der Dummheit und/oder Faulheit des Diebes.

[Rizzo]

4. Dynamisches einbinden per PHP Script

Diese Methode stellt nicht nur sicher das ein Besucher die Bilder von unserer Seite aufruft, sondern es wird auch noch der eigentliche Ablageort verborgen, damit kein Massendownload stattfinden kann. Um die Bilder vor Hotlinking zu schützen müssen wir sowohl die eigentliche Webseite um einige Zeilen erweitern, als auch ein entsprechendes Script basteln das die Bilder ausliefert.

Zunächst die eigentliche Seite in gekürzter Fassung (Doctype und Teile des Head wurden hier entfernt)

<?php
session_start();
$_SESSION['bilder_erlaubt'] = 1;
?>
<html>
<head>
<title>Trafficklau- Nein Danke!</title>
</head>

<body>
<img src="img.php?src=huebsches_bild.jpg" />
</body>
</html>

Als erstes wird eine Session gestartet und danach ein Wert gesetzt an dem wir erkennen das ein Besucher berechtigt ist ein Bild anzuschauen. Dies geschieht mit den Zeilen

PHP-Code:

session_start();
$_SESSION['bilder_erlaubt'] = 1; 


Diese Zeilen sind sehr wichtig, denn der ganze Schutz basiert auf PHP Sessions. Deswegen muß auf jeder Seite als erstes ein session_start() plaziert werden, damit wir unterwegs nicht die Information verlieren ob ein Besucher berechtigt ist unsere Bilder zu sehen.

<img src="img.php?src=huebsches_bild.jpg" />

Im IMG-Tag geben wir nun statt des einfachen Bildes den Scriptname an, an das der Name des anzuzeigenden Bildes übergeben wird. Alle weiteren Schritte passieren im PHP-Teil. Nachfolgend der Inhalt von unserer img.php

PHP-Code:

<?php
session_start();

if (isset( $_GET['src'] ))
{
    $datei = explode( ".", $_GET['src'] );
    $datei = array_reverse( $datei );

    if ($datei[0] == "jpg" &&
        file_exists( $_GET['src'] ) &&
        $_SESSION['bilder_erlaubt'] == 1 )
    {
        header( 'Content-type: image/jpeg' );
        echo file_get_contents( $_GET['src'] );
    }
    else
    {
        header( 'Content-type: image/gif' );
        echo file_get_contents( 'logo.gif' );
    }
}
?>

Zunächst wird wieder die Session gestartet, um die darin abgelegten Informationen zu erhalten. Als nächstes wird geprüft ob das Script mit einer Bild-Anforderung aufgerufen wurde: if (isset( $_GET['src'] ))
Ist das der Fall wird zunächst mit

PHP-Code:

$datei = explode( ".", $_GET['src'] );
$datei = array_reverse( $datei ); 


der übergebene Dateiname zerlegt. Getrennt wird am Punkt im Dateiname, womit wir den Name und die Endung separieren und in einem Array ablegen. Anschliessend drehen wir das Array um, so das der letzte Eintrag an erster Stelle steht. Im Optimalfall ist das unsere Dateiendung. Ich habe diesen Weg gewählt, da so Dateinamen mit mehreren Punkten im Namen nicht zu Fehler führen.

PHP-Code:

if ($datei[0] == "jpg" &&
    file_exists( $_GET['src'] ) &&
    $_SESSION['bilder_erlaubt'] == 1 ) 


Mit diesen Zeilen werden verschiedene Sachen geprüft, nämlich ob

1. Der übergebene Dateiname auf jpg endet und somit ein Bild ist.
2. Die Datei auf unserem Server existiert
3. Der Benutzer berechtigt ist das angeforderte Bild zu sehen

Treffen alle Kriterien zu, dann

PHP-Code:

header( 'Content-type: image/jpeg' );
echo file_get_contents( $_GET['src'] ); 


senden wir einen Header in dem mitgeteilt wird das die Scriptantwort ein JPG ist. Anschliessend lesen wir die Datei ein und senden sie mit echo an den Browser.
Traf ein Kriterium nicht zu, so ist der Benutzer nicht berechtigt das Bild zu sehen und deswegen geben wir mit

PHP-Code:

header( 'Content-type: image/gif' );
echo file_get_contents( 'kein_zugriff.gif' ); 


eine Alternativ-Grafik aus. Dadurch wird verhindert das jemand einfach von extern oder direkt das Script mit einem Bild-Parameter aufruft.
Anzumerken ist noch, daß in den Anweisungen

PHP-Code:

echo file_get_contents( '...' ); 


an Stelle des "..." zusätzlich zum Dateinamen noch ein Pfad auf dem Server zum Bild angegeben werden kann der nur dem Site-Betreiber bekannt ist. Dieser Pfad wird nicht öffentlich angezeigt und somit kann man den tatsächlichen Ablageort verschleiern und niemand kann die Bild-Datei direkt aus dem Ordner kopieren.

Achtung: Wenn ein Pfad zu einem Ordner angegeben wird, muß dieser auch in der Zeile

PHP-Code:

file_exists( $_GET['src'] ) 


angegeben werden, da es hier sonst zu einem Fehler kommt und die Alternativ-Grafik ausgegeben wird!



5. Mit PHP dem Bild ein Wasserzeichen hinzufügen

Als 5. und letzte Möglichkeit wollen wir uns ansehen, wie wir dynamisch mit wenigen Zeilen Code ein Wasserzeichen auf unsere Bilder bekommen. Wie im 4. Beispiel wird auch in diesem Beispiel mit 2 Dateien gearbeitet. Der HTML-Teil ist fast identisch mit dem vorherigen Script, nur das wir hier keine Session benötigen.

<html>
<head>
<title>Trafficklau- Nein Danke!</title>
</head>

<body>
<img src="img.php?src=huebsches_bild.jpg" />
</body>
</html>

Erklärungen spare ich mir hier, weil nichts neues dazu kam. Das PHP-Script unterscheidet sich aber erheblich vom vorherigen und sieht wie folgt aus:

PHP-Code:

<?php
header( 'Content-type: image/jpeg' );
$wasserzeichentext = "Copyright by www.domain.tld";

if (isset( $_GET['src'] ))
{
    $datei = explode( ".", $_GET['src'] );
    $datei = array_reverse( $datei );

    if ($datei[0] == "jpg")
    {        
        $image = imagecreatefromjpeg( $_GET['src'] );
        $TextFarbe = imagecolorallocate ( $image, 255, 128, 0 );
        imagettftext ( $image, 28, 45, 320, 475, $TextFarbe, "verdana.ttf", $wasserzeichentext );
        imagejpeg( $image, "", 97 );
        imagedestroy( $image );
    }
}
?>

Die erste Zeile kennen wir bereits. Hier wird ein Header gesendet damit korrekterweise ein JPG ausgegeben wird. In der zweiten Zeile wird der Text festgelegt der über das Bild gelegt werden soll. Nachdem geprüft wurde ob und das ein JPG angefordert wurde (Erklärung siehe 4.), beginnt das eigentlich Script.

PHP-Code:

$image = imagecreatefromjpeg( $_GET['src'] ); 


Erzeugt vom angeforderten Bild eine neue Grafik. Anschliessend legen wir mit

PHP-Code:

$TextFarbe = imagecolorallocate ( $image, 255, 128, 0 ); 


die Textfarbe für das Wasserzeichen fest. In diesem Beispiel hätte die Textfarbe einen Orange-Ton.

PHP-Code:

imagettftext ( $image, 28, 45, 320, 475, $TextFarbe, "gilligan.ttf", $wasserzeichentext );
imagejpeg( $image, "", 97 );
imagedestroy( $image ); 


Hier geschieht die Zusammenführung von Wasserzeichen und Bild, bevor das Bild an den Browser gesendet wird und abschließend werden die belegten Resourcen wieder freigegeben. Eine detaillierte Erklärung möchte ich mir an dieser Stelle sparen und verweise auf das CAPTCHA Tutorial, das diese Technik ebenfalls anwendet. Alle eingesetzten Befehle werden dort sehr ausführlich erklärt.
Wer statt eines Textes lieber ein Bild als Wasserzeichen benutzen möchte, dem lege ich die Wasserzeichen-Funktion im Traum-Scripts Forum nahe.



Fazit

Wie wir gesehen haben gibt es diverse Wege sich vor Trafficklau und Bilderdieben zu schützen. Auch wenn es die ultimative Lösung nicht gibt, so haben wir doch diverse Mittel uns dagegen zur Wehr zu setzen. Die aufgezeigten PHP-Lösungen sind nur oberflächlicher Natur und bieten noch sehr viel Raum für Verbesserungen und Erweiterungen. Dieser Part bleibt aber jedem selbst überlassen, da es nicht direkt Gegenstand dieses Tutorials ist. Der Fantasie und Experimentierfreude sind hier keine Grenzen gesetzt.
Damit sind wir am Ende angekommen und ich hoffe dieses Tutorial ist dem ein oder anderen von Nutzen.

Tschüß und bis zum nächsten Tutorial

[Adromir]

Mmh.. Mir schwebt noch ein Schutz mittels PHP und Sessions im Kopf rum. Damit wäre es REFFERER- Unabhängig (der ja auch von der Firewall geblockt werden kann und so Leute das Ersatzbild zu sehen bekommen, die auf der richtigen Seite sind).
Leider noch nicht so konkret ausgearbeitet.
Aber schon mal top Arbeit!!

[steffenk]

oder die einfachste Methode - ein Wasserzeichen

Schön das mal so aufzuzeigen, ich glaub das ist ein Unikat.

[Cybergreek]

Zitat von steffenk

oder die einfachste Methode - ein Wasserzeichen ...

Die ja unter 5. kommen wird

Danke für das Tutorial!

[steffenk]

hast ja Recht
ändern wir das: "Die einfachste Methode ist, keine Bilder zu benutzen"

[Rizzo]

Zitat von Cybergreek

Die ja unter 5. kommen wird

Danke für das Tutorial!

Genau, die dynamische Wasserzeichen-Variante kommt unter 5. und unter 4. war die Session-Variante geplant, die Adromir vorschlug (keine Session=kein Bild, bzw Ersatz-Bild)
War nur zu müde heute morgen um das Tut auf einmal fertig zu schreiben, da es doch länger wurde als gedacht

@ Adromir
Blanke durch FW geblockte Referrer bekommen auch Bilder - siehe Erklärung unter 1. bezüglich RewriteCond %{HTTP_REFERER} !^$


Ist doch an alles gedacht, ihr müßt nur Geduld haben und dann alles lesen Ebenso muß man sich den ersten Absatz zu Herzen nehmen, Zitat: "Bevor wir anfangen sollte allerdings eins klar sein: einen ultimativen Schutz gibt es nicht, aber es gibt Wege den Dieben ihre Arbeit zu erschweren!"

[edit]
Variante 6 hab ich ganz weg gelassen; Das wäre dann das zerschnippeln eines Bildes in viele kleine Teile. Diese Variante ist schlicht zu aufwändig.

[steffenk]

man könnte auch das Bild scannen und jeden Bildpixel durch ein entsprechend farbigen span ersetzen - diese superaufwändige technik hab ich noch nirgends gesehen

[Cybergreek]

Zitat von steffenk

man könnte auch das Bild scannen und jeden Bildpixel durch ein entsprechend farbigen span ersetzen - diese superaufwändige technik hab ich noch nirgends gesehen

Dann guck mal hier

[steffenk]

tatsächlich
das erinnert mich doch glatt an diesen HTML-Künstler:
http://www.youtube.com/watch?v=NqFOB77jLaE
[sry für ot]

[Rizzo]

So, ich hab noch die Punkte 4. und 5. eingefügt. Damit sollte das Tutorial soweit komplett sein. Heute bin ich zu kaputt, deswegen lese ich morgen nochmal drüber ob auch alles korrekt ist.


@ Grieche & Steffen
Eure Varianten kommen dann demnächst in's Fortgeschrittenen-Tutorial

[Cybergreek]

Vielen Dank! Sehr schön! Vor allem die Variante 4 finde ich interessant, weil es das war, was mir richtig neu war...

Zitat von Rizzo