Apache Hotlinking Protection

Schütze deine Bilder vor Hotlinking durch externe Webseiten

Viele Webseiten-Betreiber sind sich nicht bewusst, dass Ihre Bilder und andere Ressourcen durch ein sogenanntes Hotlinking von externen Webseiten aufgerufen werden. Das kann die Leistung des Servers und somit die Webseiten-Performance drosseln.

Vor kurzem wurde ich von einem Backlink-Tool darauf aufmerksam, das sich fremde Webseiten an meinen Bildern bedienen. Diese Ressourcen wurden nicht auf dem Fremdserver gesichert, sondern direkt über meinen eigenen Server aufgerufen.

Wäre ich nicht rechtzeitig eingeschritten, hätte ich wahrscheinlich eine deutliche Leistungs-Reduzierung auf Codepalm feststellen können.

Was das "Hotlinking" ist, welche Maßnahmen du dagegen ergreifen kannst und wie du dir einen Vorteil daraus beziehen kannst, erfährst du in diesem Beitrag.

Deine Bilder werden wie jede Ressource auf deiner Webseite durch einen Pfad im <img>-Tag aufgerufen. Dieser Pfad ist öffentlich über den Quellcode deiner Webseite sichtbar.

<img src="https://example.de/path/to/image.jpg" />

Stelle dir nun vor, dass ein Webseiten-Betreiber dein Bild für seine Webseite verwenden möchte, aber dieses nicht auf seinem eigenen Server speichert. Er kann sich aus dem Quellcode deiner Webseite den Pfad zur Ressource entnehmen und auf seiner eigenen Seite einfügen.

Die Besucher, die auf diese externe Webseite gelangen erhalten nun das Bild von deinem Server.

Wenn der Traffic der externen Webseite sehr hoch ist, oder viele Webseiten-Betreiber das Hotlinking deiner Bilder anwenden, kann das die Webseiten-Performance reduzieren. Es kann sein, dass deine eigene Webseite dadurch langsamer lädt.

Übrigens: Mit einem Lazy-Loading für Bilder kannst du deine Webseiten-Performance erheblich verbessern und dadurch ein besseres Benutzer-Erlebnis schaffen.

Google kann uns bei der Suche nach unerwünschten Hotlinks helfen.

Dafür gibt es 2 wichtige Suchoperatoren, mit denen in Google gesucht werden kann: inurl und site.

Der Operator "site" ist vielen Webseiten-Betreibern bereits geläufig. Mit diesem Operator erhält man in Google nur Ergebnisse zu einer bestimmten Domain. Bei unserer Hotlinking-Suche entfernen wir unsere Seite mit einem Minus (-), da wir alle Seiten außer unserer erhalten wollen.

Der Operator "inurl" ist vielen aber nicht bekannt. Durch diesen Befehl erhalten wir Ergebnisse mit einem bestimmten Vorkommen in einer URL. Unabhängig, ob das eine Verlinkung oder eine Ressource ist.

Wenn wir diese zwei Befehle in der Google Bilder-Suche kombinieren, erhalten wir alle externen Webseiten, die sich an unserem Webspace bedienen.

inurl:example.de -site:example.de

Tausche in diesem Befehl das "example.de" durch deine Domain aus und starte die Google Bilder-Suche.

Webseiten, die auf einem Apache-Server laufen, verwenden in der Regel eine ".htaccess"-Datei. Diese Datei erklärt (grob gesagt), was der Server erledigen muss, bevor die Webseite an den Besucher gesendet wird.

In der htaccess-Datei kann eine Regel eingestellt werden, mit der der Server überprüfen kann, woher die Anfrage kommt. Sollte das nicht deine eigene Webseite sein, kannst du diesen Zugriff einschränken.

Die .htaccess-Datei kannst du entweder mit dem normalen Editor deines Betriebssystems bearbeiten, oder du verwendest einen Quellcode-Editor für Webseiten.

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_REFERER} ^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?example\.de [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://subdomain\.example\.de [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,R,L]

Tausche in diesem Code das "example.de" wieder durch deine eigene Domain aus, damit die Regel an deine Webseite angepasst wird.

Du solltest auch deine Subdomains einfügen, falls du welche besitzt. Im Beispiel findest du eine "subdomain\.example\.de".

Solltest du bereits eine htaccess-Datei besitzen, kannst du kontrollieren, ob die ersten beiden Zeilen "RewriteEngine On" und "RewriteBase /" bereits existieren. Du benötigst diese Zeilen nicht doppelt.

Wichtig ist nur, dass der 2. Block ab "RewriteCond ..." direkt darunter steht. Sollten diese Regeln in der Mitte oder als letztes aufgeführt werden, funktionieren die Regeln leider nicht.

Soziale Netzwerke und Suchmaschinen sollten Zugriff auf deine Ressourcen erhalten. Gegebenenfalls besitzt du auch eine zweite Domain, die die gleichen Bilder verwendet, wie deine Hauptseite.

In diesem Fall solltest du weitere "RewriteCond" mit den entsprechenden Domains eintragen.

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_REFERER} ^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?example.de [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://www-example-de.cdn.ampproject.org [NC]
RewriteCond %{HTTP_USER_AGENT} !^(.*)Googlebot(.*)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^facebookexternalhit(.*)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^Facebot(.*)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^Twitterbot(.*)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^(.*)Pinterest(.*)$ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,R,L]

In diesem Beispiel erhält neben deiner eigenen Domain "example.de" die Suchmaschine Google und die sozialen Netzwerke Facebook, Twitter und Pinterest Zugriff auf deine Dateien.

Kopiere eine dieser Zeilen und passe Sie an, falls du ein weiteres soziales Netzwerk verwendest. So kannst du auch befreundeten Webseiten-Betreibern den Zugriff auf deine Dateien gewähren.

Unberechtigte Webseiten erhalten eine Fehlermeldung, wenn du den htaccess-Code wie oben beschrieben anpasst. Wenn du das zu deinem Vorteil verwenden möchtest, kannst du die Ressource ein wenig anpassen, um zum Beispiel deine eigene Domain oder dein Logo darstellen zu lassen.

Für Codepalm verwende ich gerne nur den Schriftzug "Visit codepalm.de", um den Besucher auf meine Webseite aufmerksam zu machen.

Damit mein Server keinen unerwünschten Traffic erhält, verwende ich ein Bild von "placehold.it", das ich nach belieben steuern kann. Du kannst das Bild aber auch von deinem eigenen Server bereitstellen lassen, um es individueller zu gestalten.

Der Link zu dem Bild von placehold.it kann so aussehen:

https://placehold.it/600x400/000000/ffffff/?text=Visit+example.de

Das Bild ist 600x400 Pixel groß, verwendet einen schwarzen Hintergrund und eine weiße Schrift. Auf dem Bild erscheint dann nur der Text "Visit example.de", den du nach belieben austauschen kannst. Stelle aber sicher, dass Leerzeichen mit einem "+" ersetzt werden.

Ersetze die letzte Zeile "RewriteRule" durch folgenden Code:

RewriteRule \.(jpg|jpeg|png|gif)$ https://placehold.it/600x400/000000/ffffff/?text=Visit+example.de [NC,R,L]

Natürlich kann es sein, dass der externe Webseiten-Betreiber das bemerkt und das Bild dann entfernt. Ich habe aber die Erfahrung gemacht, dass eine schlechte Webseite so gut wie nie bearbeitet wird, wenn sie einmal steht.

Externe Webseiten können nicht nur Bilder, sondern auch JavaScript- oder CSS-Dateien von deiner Webseite aufrufen. Erweitere deine htaccess-Datei einfach mit folgendem Code, unterhalb der RewriteRule für die Bilder:

RewriteRule \.(css)$ - [NC,R,L]
RewriteRule \.(js)$ - [NC,R,L]

Wenn du möchtest, kannst du auch eine gemeine Überraschung für die externen Webseiten bereithalten, indem du zum Beispiel eine CSS-Datei verlinkst mit dem Inhalt "body { display: none !important; }" oder ähnliches. Diese Datei muss öffentlich über einen Domain-Pfad abrufbar sein. Aber wer möchte denn gemein sein 😉

Es ist egal, welches CMS du verwendest. Die Technologie bleibt dieselbe.

WordPress-Webseiten verwendet bereits ein wenig htaccess-Code, um die Linkstruktur so zu erstellen, wie man es gewohnt ist. Es ist nur wichtig, dass das Hotlinking-Snippet über allen anderen Direktiven platziert wird.

Für WordPress empfehle ich folgende htaccess-Struktur:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

/* Hier wird das Hotlink-Script inkludiert */

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

Solltest du eine No-Cookie-Domain zusammen mit der htaccess-Datei verwenden, solltest du darauf achten, dass du die Anpassungen ebenfalls im Stammverzeichnis der No-Cookie-Domain vornimmst.

In WordPress verwendet man meistens den wp-content-Ordner als Stammverzeichnis der No-Cookie-Domain. In diesem Ordner muss dann die htaccess-Datei enthalten sein. Den WordPress-htaccess-Code benötigst du dabei nicht.

Wie du bereits im Code-Beispiel gesehen hast, gibt es einige Bots die deine Webseite nach Inhalten durchleuchten müssen. Wenn du diesen Crawlern den Zugang zu deinen Bildern verwehrst, können sie nicht auf den sozialen Netzwerken ausgegeben werden.

Ich habe dir eine kleine Liste mit wichtigen Crawlern vorbereitet, die du in deiner .htaccess-Datei berücksichtigen solltest.

Bei manchen genauen Bot-Bezeichnungen fehlen mir leider die genauen Daten. Die htaccess-Ausnahmen wurden aber von mir getestet.

Wenn du andere Bots suchst, wirst du auf der Seite von WhatIsMyBrowser.com bestimmt fündig. Die Datenbank ist jedoch nicht komplett. Zu XING oder SEMrush konnte ich keine Einträge finden.

Ich versuche das Thema nachzuverfolgen und die Tabelle zu erweitern, sobald ich Neuigkeiten herausfinden konnte.

Hast du bereits Erfahrungen mit dem Thema "Hotlinking" gemacht? Teile dein Wissen in den Kommentaren.

---

Apache Hotlinking Protection

Zu den Beiträgen

 

Das konnte dich auch interessieren

Atomare Webseiten-Struktur mit HTML und PHP

Spieleprogrammierung für Einsteiger

Lazy Loading - Bilder nachladen lassen