Select Page

Nginx: Hotlink-Schutz per Rewrite

Oder: wie Sie Bilderdiebe abstrafen können!

Fast jeder, der im Internet eine Website mit redaktionellen Inhalten betreibt kennt das: Bilderklau per Hotlink.
Und dann am Besten noch mitsamt komplett kopiertem Text, den man mühevoll recherchiert und stundenlang aufgeschrieben und korrekturgelesen hat.

Dieser Artikel wurde zuletzt am 14. April 2022 aktualisiert.

info
Geschrieben von Saskia Teichmann
am 31. Januar 2016
Hotlink Schutz ∙ Medien schützen ∙ nginx
Nginx: Anleitung - Hotlink-Schutz konfigurieren

Nicht mal ein Backlink zur eigenen Website ist vorhanden, es sei denn der Content-Dieb hat den kompletten Inhalt einfach per Copy & Paste aus dem Quelltext in seine Website kopiert. Dann kann es schonmal vorkommen, dass man da irgendwo auf einen anderen eigenen Beitrag mit vollständiger URL verlinkt hat. Und dieser Link ist dann noch im Text enthalten. Aber erst einmal durchatmen und first things first:

Was ist ein Hotlink eigentlich?

Ein Hotlink ist zum Beispiel die Einbindung eines Bildes per direkter Verlinkung auf die vorhandene URL. Ohne das Bild zuvor herunterzuladen, es auf einen eigenen Webspace oder Server hochzuladen und es dann von dort zu verlinken.

Hotlinks sind nicht generell schlimm. Zumindest nicht, wenn das Hotlinking miteinander abgesprochen wurde oder wenn man ein Bilder-Uploadservice ist.
In den meisten Fällen ist man jedoch kein Bilder-Uploadservice, sondern einfach nur jemand, der sein Webhosting jeden Monat brav bezahlt und ein bestimmtes Trafficlimit hat. Und hier kommen wir auch schon zum Kern des Pudels.
Lässt nun jemand Fremdes Mediendateien auf seiner Homepage anzeigen, die auf Ihrem Webserver liegen, bedient Ihr Server jede dieser Fremd-Anfragen, weil das das ist was Server eben machen. Sie serven (dienen, leisten, servieren, bedienen).

Nun hat der Content-Dieb gratis ein Bild auf seiner Website, für das auf seinem eigenen Server kein Traffic erzeugt/berechnet wird. Dieser Traffic (Serverlast) wird dem Bestohlenen, also Ihnen weiter berechnet und kostet Serverressouren: und zwar jedes Mal, wenn ein Besucher auf die Content-Dieb-Seite surft und in seinem Webbrowser das Bild angezeigt wird.
Unter Umständen kann so etwas zu unglaublichem Fremdtraffic führen. Je nachdem wieviel Besuchertraffic der Content-Dieb auf seiner Website hat.
Das ist echt nicht witzig.

Ich möchte Ihnen heute zeigen, wie man den eigenen NGINX Webserver so konfigurieren kann, dass er diese Fremdanfragen nicht wie erwartet bedient, sondern stattdessen den Besuchern der Content-Dieb-Website ein anderes Bild serviert.
So können Sie nämlich den vermeintlichen Schaden umkehren und daraus Nutzen ziehen und falls Sie richtig sauer sind, dem Dieb noch eins auswischen: holen Sie die Besucher auf Ihre eigene Website!

Wie Sie NGINX zum unbezwingbaren Hotlink-Endgegner machen!

So sieht der Plan aus:

  • Wir wollen eine übergreifende Lösung, die für alle Domains funktioniert. So, dass man nicht jede einzelne vHost Konfiguration (sites-available) anpassen muss.
  • Es soll der Anfragelink umgeschrieben (rewrite) und so stattdessen ein bestimmtes, anderes Bild an die Diebesseite bedient werden
  • Es muss mit Google Bildersuche und anderen Suchmaschinen mit Bildersuchfunktion funktionieren, anstatt das Hotlinking pauschal zu verbieten. Ansonsten werden in der Google Bildersuche nicht mehr Ihre eigentlichen Bilder angezeigt, sondern immer nur das Austausch-Bild

Lösung des Bilderdiebstahls

Diese wenigen Codezeilen sind letztendlich die Lösung des Problems mit dem Bilderdiebstahl. Wie und wo Sie den Code platzieren müssen erfahren Sie im nächsten Abschnitt.

location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf)$ {
  add_header "Access-Control-Allow-Origin" "*";
  access_log off;
  log_not_found off;
  expires max;
  valid_referers none blocked ~.google. ~.bing. ~.yahoo. ~.yandex. server_names ~($host);
    if ($invalid_referer) {
      rewrite (.*) /hotlink/achtung-inhalts-und-bilderklau.png redirect;
      }
}
#hotlink weiterleitungsloop beenden
location = /hotlink/achtung-inhalts-und-bilderklau.png { }

Was macht der Code?

~ wird verwendet, um Groß-/Kleinschreibung zu berücksichtigen, während ~* Groß-/Kleinschreibung ignoriert.

NGINX überprüft die locations-Regel in der Reihenfolge, in der die regulären Ausdrücke eingefügt sind. Das bedeutet, dass sich die Caching Header-Anweisungen für Mediendateien und die Anweisungen unseres Hotlink-Schutzes im selben Block befinden müssen!

location = /hotlink/achtung-inhalts-und-bilderklau.png { } wird benötigt, damit bei der neuen Anfrage auf das Austauschbild, kein unendlicher Weiterleitungsloop entsteht:
Bilderdiebseite sendet Anfrage für BildA → unser NGINX leitet die Anfrage nach Austauschbild um → Bilderbiebseite sendet Anfrage für Austauschbild → unser NGINX leitet die Anfrage nach Austauschbild um, servt aber nicht → und so weiter…

Platzhalterbild bei Bilderdiebstahl

$host ist eine Variable, die diese Anweisung global nutzbar macht und unter allen vHost-Domains auf dem Webserver funktioniert. Folgende URL wird für jede Domain gültig ausgegeben: http://$host/hotlink/achtung-inhalts-und-bilderklau.png

Es sollte lediglich unter jeder Domain das Verzeichnis /hotlink angelegt werden und eine Bilddatei mit dem Namen: achtung-inhalts-und-bilderklau.png in diesem Verzeichnis abgelegt werden. Sie können die Datei und das Verzeichnis auch anders nennen, wenn Sie möchten. Passen Sie nur den Code entsprechend an.

So binden Sie die Location-Regel ein

So gehen Sie vor, um Ihren NGINX Webserver mit diesem besonderen Hotlink-Schutz gegen Bilderdiebstahl auszustatten.

Gesamtzeit: 30 Minuten

Vorbereitungen: Austauschgrafik erstellen und hochladen

Erstellen Sie zunächst eine Grafik, die die Besucher der Diebes-Website sehen sollen und laden Sie diese in das gewünschte Verzeichnis auf Ihrem Webserver. Notieren Sie sich die URL der Grafik.

NGINX Webserser locations Konfiguration anpassen

Auf Ihrem Server navigieren Sie nun in das Verzeichnis /etc/nginx/common/ und finden Sie die in den Serverblock Ihres vhost eingebundene locations Konfiguration, in der für die im obigen Code definierte location Regeln vorhanden sind. In der Regel wird es bereits einen vorhandenen Regelblock für die genannte location geben. Falls nicht, fügen Sie den obigen Code einfach als neuen Regelblock in die richtige Datei ein.
Ist der Block bereits vorhanden, fügen Sie nur die obigen Regeln ein ohne den locations wrap.

NGINX Webserver Konfiguration speichern und neuladen

Anschließend speichern Sie die Konfigurationsdatei mit dem erweiterten locations-Block auf dem Server ab und testen Sie die neue Konfiguration zunächst über das SSH Terminal mit nginx -t
Ist der Test ohne Beanstandungen durchgegangen, starten Sie Ihren NGINX mit dem Befehl service nginx restart neu.

Testen Sie Ihren Hotlink-Schutz!

Hier habe ich Ihnen ein Tool geschrieben, mit dem Sie Ihre Hotlink-Schutz-Konfiguration testen können. Geben Sie in das Eingabefeld die direkte URL für eine Grafik auf Ihrem nginx Server ein. Im Ausgabefeld darunter sollte dann im Optimalfall Ihr Austauschbild angezeigt werden. Wenn das Bild von der eingegebenen URL erscheint, müssen Sie Ihren Hotlink-Schutz nochmal kontrollieren.

Wenn Sie den Test mehrmals hintereinander für dieselbe Bild-URL machen möchten, müssen Sie Ihren Browsercache nach jedem Test löschen und diese Seite neu laden.

Bild-URL prüfen

Haben Sie noch Fragen? Dann zögern Sie nicht und nutzen Sie die Kommentarfunktion unterhalb dieses Beitrags!

Bitte teilen Sie diesen Artikel auf Ihrer Facebook-Seite, über Twitter, Google+ oder eine andere soziale Plattform Ihrer Wahl. Weiter unten finden Sie die Teilen-Buttons. Das Teilen ist einfach und schnell und es würde mich sehr freuen.

<span  Teichmann</span>

Saskia Teichmann

Eine WordPress Full Stack Webentwicklerin aus Deutschland, die es mag schöne Websites und anspruchsvolle Webprojekte umzusetzen.

Privat geht Saskia gern mit ihrer Familie im Tramuntana Gebirge auf Mallorca wandern, in den Herrenhäuser Gärten in Hannover spazieren oder schwimmen im Meer.

Projektanfrage stellenKaffee ausgeben

9 Kommentare

  1. Kuwe

    Super genialer Post! Die Idee ist echt simpel 🙂 find ich super. Soweit habe ich leider noch nie gedacht, da so etwas bei mir noch nie zu einem Problem wurde (könnte am Content liegen ;)).
    Ich bin auch sehr erstaunt in auf einer Frontend / Design Seite etwas über Nginx Konfiguration zu lesen. Auch ist WordPress je ehr auf Apache abgestimmt, obwohl manche Plugins ja mittlerweile auch Nginx mehr unterstützen und dafür Configs generieren statt nur eine Apache htaccess zu erstellen 😉

    Btw. deine Designs finde ich auch Super! *Beide daumen hoch* 🙂

    Antworten
    • Saskia Lund

      Dankeschön für dieses tolle Feedback!

      Ich halte nginx für den „besseren“ und schnelleren Webserver im Zusammenspiel mit WordPress, um ehrlich zu sein. Einfach mal zum Thema ein wenig googeln. 🙂

      Zum Frontend-Kommentar:
      Ich bin zwar Frontend Entwicklerin, aber da ich mich eben auf WordPress spezialisiert habe, führt in meinen Augen kein Weg an php und irgendwann dann auch nicht mehr an Server-relevanten Fragestellungen vorbei.

      Vielen Dank nochmals!

      Antworten
  2. Frank

    Super Artikel! Wohin genau sollte der Code eingestellt werden? In die htaccess im Root der Webseite? Oder in eine separate htaccess im Bilderverzeichnis? Vielen Dank!

    Antworten
    • Saskia Lund

      Hallo Frank!

      Wenn du einen nginx Webserver im Einsatz hast, wird die .htaccess nicht verwertet; sprich ein nginx Webserver kann mit .htaccess-Dateien nichts anfangen.

      .htaccess-Dateien werden im Zusammenspiel mit Apache Webservern verwendet.

      Der oben genannte Code wird bei einem nginx Webserver im Serververzeichnis /etc/nginx/common/ in der Regel in der Datei locations.conf global eingesetzt.
      Wichtig ist dabei, die eigene Serverkonfiguration in der locations.conf genau anzuschauen. Wenn es bereits eine locations-Regel für die obig genannte location gibt, musst du diese dann mittels des obigen Codes anpassen; ansonsten wie erwähnt, einfach einfügen, speichern und im Anschluss die neue Konfiguration des nginx per terminal-Kommando nginx -t kurz gegenprüfen. Wenn der nginx im terminal zurückmeldet, dass alles tutti ist, kannst du per service nginx restart den Webserver neustarten und so die neue Konfiguration laden.

      Viel Erfolg!

      Antworten
  3. Frank

    Danke und sorry…Nginx in der Überschrift hatte ich überlesen. Ich suche für meinen Magento-Shop auf einem Apache einen funktionierenden Hotlink-Schutz, möglichst ohne Google-Abstrafung.

    Antworten
    • Saskia Lund

      Hallo Frank!

      Für ein Apache-Pendant versuch mal Folgendes in Deine .htaccess-Datei im root-Verzeichnis deiner Website einzusetzen:

      1. Variante (wenn du generell das Hotlinking von Bilddateien verbieten möchtest, aber bestimmten Domains das hotlinking erlauben möchtest (z.B. google.*, bing.*, yahoo.*, yandex.*, duckduckgo.*, etc.):

      <IfModule mod_rewrite.c>
      RewriteEngine on
      # Entferne die nachfolgende Zeile, wenn du leere Referer URLs ebenfalls blockieren möchtest:
      RewriteCond %{HTTP_REFERER} !^$
      
      RewriteCond %{HTTP_REFERER} !^https?://(.+\.)?deinedomain.de [NC]
      RewriteRule \.(jpe?g|png|gif|bmp)$ - [NC,F,L]
      
      # Wenn du jetzt gern ein Ersatzbild statt des eigentlich gehotlinkten Bildes anzeigen lassen willst, ersetzt du die obige Regel wie folgt:
      # RewriteRule \.(jpe?g|png|gif|bmp) http://deinedomain.de/blocked.png [R,L]
      
      # Erlaube das Hotlinken von den folgenden Sites (Domains)
       RewriteCond %{HTTP_REFERER} !^https?://(www\.)?google\.com/.*$ [NC]
      
      </ifModule>

      2. Wenn du nur für bestimmte Referer (Bösewicht-Domains) das Hotlinking blockieren willst:

      <IfModule mod_rewrite.c>
      RewriteEngine on
      RewriteCond %{HTTP_REFERER} ^https?://(.+\.)?schlingel1\.com [NC,OR]
      RewriteCond %{HTTP_REFERER} ^https?://(.+\.)?schlingel2\.com [NC,OR]
      RewriteRule \.(jpe?g|png|gif|bmp)$ - [NC,F,L]
      
      # Wenn du jetzt gern ein Ersatzbild statt des eigentlich gehotlinkten Bildes anzeigen lassen willst, ersetzt du die obige Regel wie folgt:
      # RewriteRule \.(jpe?g|png|gif|bmp) http://deinedomain.de/blocked.png [R,L]
      
      </ifModule>

      Ich hoffe, dass dir das weiterhilft

      Viele Grüße
      Saskia

      Antworten
  4. Müller

    Wer kennt ein Hotlink Schutz für bmbfotos.com <?
    für diese Seite funktioniert Garnichts

    Antworten
    • Saskia Lund

      Hallo „Müller“!
      Welche Bilder auf der genannten Website sind denn z. B. ge-hotlinkt?
      Vielleicht kann man Ihnen weiter helfen.

      Viele Grüße
      Saskia Lund

      Antworten
  5. Ralph

    Kann man auch nur eine Domain blockieren ? Per Rewrite ?

    Antworten

Kommentar schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert