Hallo

Zunächst möchte ich Sie herzlich Willkommen heißen und mich vorstellen: mein Name ist Saskia Lund, bin Front-End Web Entwicklerin und habe mich auf das CMS WordPress spezialisiert.
Auf diesen Seiten finden Sie nützliche Informationen zu den Themen "Webdesign", Ecommerce in Deutschland und WordPress. Außerdem trage ich Tipps und Tricks rund um HTML5, CSS3 und JavaScript / jQuery für Sie zusammen.

Ich freue mich, dass Sie da sind und meine Beiträge lesen. Vielen Dank!

Saskia Lund

wir sehen uns!

Neues im Blog

Leserstimmen

Kontakt

lund | wordpress studio
Saskia Lund

Postanschrift:
Heerstr. 35
30890 Barsinghausen

Coworking Office im Hafven:
Kopernikusstr. 14
30167 Hannover

   +49 5105 591 4002
  hello@saskialund.de

Telefonische Bürozeiten
mo - do 9:30 - 17:30
 

lund | wordpress studio - Wir sind jetzt auch im Hafven Nordstadt!

  • Coworking office
  • Homeoffice
Nginx: Anleitung - Hotlink-Schutz konfigurieren
31.Januar 2016

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.

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.

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 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
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…

$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
Beispiel für ein Austauschbild bei unerlaubtem Hotlinking - Hotlink Schutz per nginx rewriteEs 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.

Speichern Sie die Konfigurationsdatei mit dem erweiterten locations-Block auf dem Server ab und starten Sie Ihren nginx neu.

Jetzt testen

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.

Herzliche Grüße

Saskia Lund


1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (1 Stimmen, im Schnitt: 5,00 von 5 Sternen)
Loading...
  • 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* 🙂

    • 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!

  • 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!

    • 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!

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

    • 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

  • Schreiben Sie einen Kommentar

    You have to agree to the comment policy.