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.

Was ist Hotlinking?

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.

Wie finde ich heraus, dass meine Bilder auf einer externen Webseite verlinkt wurden?

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.

Wie kann ich Hotlinking in Apache verhindern?

Hotlinking in Apache verhindern

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.

Wie kann ich eine Ausnahme erstellen?

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_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?pinterest.com [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.

Kann ich das Hotlinking zu meinem Vorteil nutzen?

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.

Wie kann ich meine JavaScript- oder CSS-Dateien schĂŒtzen?

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 😉

Hotlinking Protection in WordPress

Hotlinking in Apache verhindern

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.

 

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

 

Codepalm
Apache Hotlinking Protection