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_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.

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.

 

Crawling Bots als Ausnahme hinzuf├╝gen

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.

  Crawler-Bot htaccess-Condition
Ahrefs Mozilla/5.0 (compatible; AhrefsBot/5.2; +http://ahrefs.com/robot/) RewriteCond %{HTTP_USER_AGENT} !^AhrefsBot(.*)$ [NC]
Bing Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) RewriteCond %{HTTP_USER_AGENT} !^(.*)bingbot(.*)$ [NC]
Facebook facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) RewriteCond %{HTTP_USER_AGENT} !^facebookexternalhit(.*)$ [NC]
Google Googlebot/2.1 (+http://www.google.com/bot.html) RewriteCond %{HTTP_USER_AGENT} !^(.*)Googlebot(.*)$ [NC]
Google Ads AdsBot-Google (+http://www.google.com/adsbot.html) RewriteCond %{HTTP_USER_AGENT} !^AdsBot\-Google(.*)$ [NC]
Google Image Googlebot-Image/1.0 RewriteCond %{HTTP_USER_AGENT} !^Googlebot\-Image(.*)$ [NC]
LinkedIn LinkedInBot/1.0 (compatible; Mozilla/5.0; Jakarta Commons-HttpClient/3.1 +http://www.linkedin.com) RewriteCond %{HTTP_USER_AGENT} !^LinkedInBot(.*)$ [NC]
Pinterest Pinterest/0.2 (+http://www.pinterest.com/) RewriteCond %{HTTP_USER_AGENT} !^Pinterest(.*)$ [NC]
SEMrush SemrushBot RewriteCond %{HTTP_USER_AGENT} !^(.*)SemrushBot(.*)$ [NC]
Twitter Twitterbot/1.0 RewriteCond %{HTTP_USER_AGENT} !^Twitterbot(.*)$ [NC]
Xing XING-contenttabreceiver/2.0 RewriteCond %{HTTP_USER_AGENT} !^XING\-contenttabreceiver(.*)$ [NC]
XING FeedReader XING FeedReader RewriteCond %{HTTP_USER_AGENT} !^XING\WFeedReader(.*)$ [NC]
 

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.

 

Codepalm
Apache Hotlinking Protection