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?
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
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] |
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) | RewriteCond %{HTTP_USER_AGENT} !^facebookexternalhit(.*)$ [NC] | |
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] |
LinkedInBot/1.0 (compatible; Mozilla/5.0; Jakarta Commons-HttpClient/3.1 +http://www.linkedin.com) | RewriteCond %{HTTP_USER_AGENT} !^LinkedInBot(.*)$ [NC] | |
Pinterest/0.2 (+http://www.pinterest.com/) | RewriteCond %{HTTP_USER_AGENT} !^Pinterest(.*)$ [NC] | |
SEMrush | SemrushBot | RewriteCond %{HTTP_USER_AGENT} !^(.*)SemrushBot(.*)$ [NC] |
Twitterbot/1.0 | RewriteCond %{HTTP_USER_AGENT} !^Twitterbot(.*)$ [NC] | |
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.
Das konnte dich auch interessieren
Kommentare
Hallo Martin,
ich habe die Protection noch einmal ganz genau unter die Lupe genommen. Bei mir hat alles wunderbar geklappt.
Wenn du in websniffer.cc ein Bild von Codepalm eingibst und den Googlebot-Agent verwendest, kommt ein normaler 200er Statuscode. Wenn du "your user agent" angibst, erhältst du ein Bild von placehold.it.
Ich kann mir vorstellen, dass eine andere Regel oder allgemeine Server-Einstellungen die Hotlink-Protection stört.
Schreib mir doch bitte eine PM (d.artinger@codepalm.de) mit dem Bild, mit dem du die Protection testest und deine htaccess-Einstellungen. Vielleicht finde ich das Problem und kann es in diesem Beitrag für andere veröffentlichen.
Viele Grüße,
Dennis
die Referrer-Ausnahmen-Variante hat bei mir für Google und Bing nicht geklappt, d.h., die Bilder wurden nicht indexiert und scheinen laut websniffer.cc einen 403 zu erzeugen. Vermutlich, weil die beiden Bots gar keinen Referer mehr mitgeben (neuerdings?) und die Ausnahme mit der Referer-URL dann nicht greift!? Mit der Crawler-Variante hat G jetzt Bilder indexiert, Bing noch nicht.
Hi Martin,
da hast du natürlich vollkommen Recht. Es gibt mehrere Gründe, warum eine Hotlinking-Protection empfehlenswert ist. Man sollte auch immer testen, ob die Maßnahmen keine sozialen Profile blockieren! (Bei FB zum Beispiel den Facebook Debugger verwenden)
Wenn du dir die Plattform "WhatIsMyBrowser.com" ansiehst, wirst du feststellen, warum ich den User-Agent verwende. Hier sind alle möglichen Crawler mit den entsprechenden User-Agents versehen. Natürlich kann man auch den Referrer verwenden, wenn man diesen für den entsprechenden Crawler herausfindet.
Viele Wege führen nach Rom, aber die Liste von WhatIsMyBrowser.com ist die umfangreichste, die ich finden konnte 😉
Happy Coding,
Dennis
danke für den informativen und verständlichen Artikel. Hauptgrund für so ein Verbot ist m.E. der Umstand, dass der Hotlinker evtl. derjenige ist, den Google dann in der Bildersuche bringt.
Warum hast du beim Code für die Ausnahmen (G, Bing usw.) eigentlich nicht wie viele andere Artikel die URLs als Referrer genannt, sondern den user-Agent (Crawler)?
LG, Martin