Hotlinking von Bildern und Gegenmaßnahmen

Vorbemerkungen und Beispiele für geeignete Gegenmaßnahmen

Übersicht / Seite:

1. Hotlinking von Bildern (mit Beispielen für Gegenmaßnahmen)
2. Text in Bilder einfügen (mit PHP, ImageTTFText und geeigneten Fonts)
3. Rewrite Regeln (und Bedingungen für die Auslieferung von Images)
4. Clientseitige Möglichkeiten (zum Austausch von Grafiken)
5. Ein weiteres PHP-Script (zur Einfügung von sichtbaren Wasserzeichen)

Vorbemerkungen zu Hotlinking

Als Hotlinking wird allgemein das Einbinden von Bildern und sonstigen Medien in eine Webseite bezeichnet, wenn die einzubindenden Medien nicht innerhalb des eigenen Webspaces, sondern auf einem entfernten Server gespeichert werden. Die Einbindung kann dabei auf unterschiedlicher Weise gelöst werden, setzt jedoch immer ein Referenzieren voraus, bei dem die Webadresse (allgemein als URI oder URL bezeichnet) der einzubindenden Datenquelle verwendet wird, um diese in den HTML-Quelltext einzubinden.
Handelt es sich bei der einzubindenden Quelldatei um ein Foto oder um eine sonstige Grafik, wird die URL der Datenquelle im src-Attribut (src steht für Source/Quelle) eines Image-Tags notiert. Das src-Attribut wird nicht nur innerhalb von IMG-Tags verwendet, sondern zum Beispiel ebenfalls zum Referenzieren von Frame-Inhalten.

Im Beispiel wird ein Bild von einem entfernten Server per Hotlinking als Inline-Element eingebunden und soll innerhalb des restlichen Contents einer eigenen Webseite ausgegeben werden.

Beispiel HTML-Quelltext:

<img src="http://www.example.com/verzeichnis/bild.jpg" alt="Ein Bild" width="480" height="320">

Hotlinking bietet eine Fülle von Möglichkeiten, die eigenen Webseiten durch das Einbinden von Fotos, Grafiken, Videos und weiteren Medien zu bereichern. Dem steht gegenüber, dass Hotlinking nicht gern gesehen wird, wenn diese Einbindung ohne die Einwilligung des Urhebers oder des nutzungsberechtigten Webmasters erfolgt. Vor allem dann nicht, wenn dieser die Einbindung der jeweiligen Medien nicht oder nur unter bestimmten Voraussetzungen gestattet und diese Voraussetzungen bei der Einbindung nicht erfüllt werden.
Zu diesen Voraussetzungen gehört in der Regel die Nennung des Urhebers, einschließlich einer Quellenangabe in Form eines verweisenden Links. Diese Voraussetzungen werden jedoch oftmals von unerfahrenen oder unverbesserlichen Webmastern kaum beachtet. Weiterhin kommt eine rechtliche Grauzone hinzu, die bislang von den Betreibern diverser Suchmaschinen bei der Bildersuche ausgenutzt wird. (Stand: Februar 2013) Doch es gibt geeignete Gegenmaßnahmen, um Hotlinking einzuschränken oder gänzlich zu unterbinden. Einige Beispiele für Gegenmaßnahmen möchten wir Ihnen nachfolgend vorstellen.

Beispiele für Gegenmaßnahmen

Geeignete Gegenmaßnahmen beginnen mit der Auswertung der Referrer. Erst nach dem diese ausgewertet wurden, können entsprechender Regeln in der htaccess notiert werden. Für erste Tests sollte als Kondition (Bedingung) genügen, dass bei jedem direkten Aufruf eines Bildes im Browser, anstelle des gewünschten Images im Hintergrund ein entsprechendes Script vom Server ausgelöst wird. Um einem Script mitzuteilen, welches Bild aufgerufen wurde, werden der Pfad und die Endung des aufgerufenen Images mit $1 und $2 einem neu zu bildenden QueryString übergeben.

Beispiel htaccess mit einer einfachen Bedingung:

RewriteEngine On

RewriteCond %{HTTP_REFERER} ^$ [NC]
RewriteRule ^(.+)\.(jpg|png)$ /images.php?image=$1&endung=$2 [NC,QSA,L]

Weitere Beispiele für Konditionen folgen auf der letzten Seite dieses Tutorials.

Im nachfolgenden Code-Listing wird zuerst der Teil des Headers gesetzt, welcher das  Caching-Verhalten beeinflusst. Die Zielsetzung dabei ist, dass bereits vom Script veränderte Images möglichst nicht bei einem "normalen" Aufruf aus dem Zwischenspeicher geholt und in eine HTML-Seite eingeblendet werden. Dazu wird den Browsern und Proxy-Servern mitgeteilt, dass das jeweilige Image möglichst nicht aus dem Cache zu laden ist. Der gesetzte Wert "no-cache" verhindert kein Zwischenspeichern von Daten und Dateien, fordert die Browser jedoch auf, möglichst stets die neuste Version vom Server abzuholen.
Um dieser Aufforderung etwas Nachdruck zu verleihen, wird dem Browser mit "expires" zusätzlich noch mitgeteilt, bis zu welchem Zeitpunkt spätestens eine Anfrage an den Server zu stellen ist, ob eine neuere Version vorliegt. Liegt dieser Zeitpunkt in der Vergangenheit, sollte stets eine neue Anfrage an den Server gestellt werden. Als Zeitpunkt für das Beispiel wurde Stunde 0 der aktuellen Unixzeit gewählt.
Im nächsten Schritt wird kontrolliert, ob ein Parameter-Werte-Paar übergeben wurde. Dass mit GET oder POST übergebene Werte niemals ungefiltert übernommen werden, sollte aus Sicherheitsgründen eine Selbstverständlichkeit sein. Wer sich mit regulären Ausdrücken etwas schwer tut, findet einige Hinweise zur Bildung von Zeichenklassen im RegEx-Tutorial.

Nach der Eingangskontrolle wird in Abhängigkeit vom Grafikformat der Image-Header gesetzt sowie mit Hilfe der PHP-Funktion imagecreatefromjpeg bzw. imagecreatefrompng ein neues Bild aus den Daten erzeugt, auf welche die übergebene URL verweist. Anschließend werden die Daten des Bildes mit getimagesize ermittelt und mit imagecolorallocatealpha wird eine transparente Farbgebung als "Deckschicht" eingestellt. Diese Deckschicht überlagert das eigentliche Bild nur in den Bereichen, die mit imagefilledrectangle ausgewählt werden.
Für die Einstellung der Farbwerte sind Rot-Grün-Blau-Werte zuverwenden. Selbiges gilt ebenso für die Farbwerte des einzugenden Textes. In diesem Code-Listing wird der gewünschte Text mit der Funktion imagestring eingeblendet, welche für einfache Aufgaben ausreichend ist. Die Schriftgröße lässt sich von 1 bis 5 einstellen (im Beispiel mit $fontg), wobei 1 die kleinste und 5 die größte von PHP zur Verfügung gestellte Schriftgröße darstellt.
Im letzten Schritt wird mit imagejpeg bzw. mit imagepng das Bild an den Browser ausgegeben und mit imagedestroy der für die Bildbearbeitung genutzte System-Speicher wieder freigegeben.

Erstes Beispiel für ein PHP-Script (images.php):

<?php

header("Cache-Control: no-cache, must-revalidate");   // neue Anfrage an den Server auslösen 
header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");     // Datum in die Vergangenheit verlegen
header("Pragma: no-cache");                           // zusätzlicher Hinweis für Proxy-Server

if (isset($_GET["image"]) and !empty($_GET["image"])) {

    $eingang = $_GET["image"];
    $endung  = $_GET["endung"];
    $eingang = preg_replace("/[^a-z0-9_\/-]/i", "", $eingang);
    $endung  = preg_replace("/[^a-z]/i", "", $endung);
    $endung  = strtolower($endung);

    if ($endung == "jpg") {
        header("Content-Type: image/jpeg");
        $image  = imagecreatefromjpeg($eingang.".".$endung);
    }
    if ($endung == "png") {
        header("Content-type: image/png");
        $image  = imagecreatefrompng($eingang.".".$endung);
    }

    $format = getimagesize($eingang.".".$endung);
    $width  = $format[0];
    $height = $format[1];
    $aboben = $height - 60;                       // height minus 60 ergibt den Abstand von oben
    $abobet = $aboben + 20;                       // plus 20 fuer Ausrichtung des Vermerks
    $infos1 = "Weitere Infos zum Bild erwünscht?";
    $infos2 = "Dann folgen Sie dem Link.";
    $quelle = "Quelle: www.example.com";

    $transall = imagecolorallocatealpha($image, 30, 30, 30, 40);  // R,G,B, Transparenz max. 127
    imagefilledrectangle($image, 0, 0, $width, $height, $transall);
    imagefilledrectangle($image, 0, $aboben, $width, $height, $transall);

    $tfarbe = imagecolorallocate($image, 255, 150, 0);            // Color RGB für Schrift
    $qfarbe = imagecolorallocate($image, 255, 240, 190);          // RGB fuer Quelle

    if ($width > 220 and $height > 150) {

        if ($width > 340 and $height > 150) {
            $fontg = 5;
            $ablin = 20;
        }
        else {$fontg = 2; $ablin = 10;}

        imagestring($image, $fontg, $ablin, 30, $infos1, $tfarbe);       // Font, Abstand von links, Abstand von oben
        imagestring($image, $fontg, $ablin, 54, $infos2, $tfarbe);       // 30 plus Zeilenhoehe 24 gleich 54
        imagestring($image, $fontg, $ablin, $abobet, $quelle, $qfarbe);
    }

    if ($endung == "jpg") imagejpeg($image);
    if ($endung == "png") imagepng($image);

    imagedestroy($image);
}
?>

Ein von PHP unbearbeitetes Image.

© H. Müller | Altmärkische Landschaft

Das vorausgehende Bild bei einem Testaufruf zur Überprüfung des Scripts.

Altmärkische Landschaft mit einem nachträglich eingefügten Quellenverweis

Für die Tests wurden Fotos in unterschiedlichen Größen verwendet, wobei das auf dieser Seite vorgestellte Code-Listing sich für Fotos, die wesentlich größer als das für dieses Tutorial verwendete Bild sind, sich als wenig geeignet erwies. Als wesentlich besser geeignet erwies sich hingegen das auf der nächsten Seite vorgestellte Script.

weiterlesen » Text in Bilder einfügen | Rewrite Regeln