{"id":811,"date":"2016-01-31T05:07:51","date_gmt":"2016-01-31T04:07:51","guid":{"rendered":"https:\/\/www.saskialund.de\/?p=811"},"modified":"2022-04-14T11:46:52","modified_gmt":"2022-04-14T09:46:52","slug":"nginx-hotlink-protection","status":"publish","type":"post","link":"https:\/\/isla-stud.io\/en\/howtos-anleitungen\/nginx-hotlink-schutz\/","title":{"rendered":"Nginx: Hotlink protection via rewrite"},"content":{"rendered":"\n<p>Nicht mal ein Backlink zur eigenen Website ist vorhanden, es sei denn der Content-Dieb hat den kompletten Inhalt einfach per Copy &amp; Paste aus dem Quelltext in seine Website kopiert. Dann kann es schonmal vorkommen, dass man da irgendwo auf einen anderen eigenen Beitrag mit vollst\u00e4ndiger URL verlinkt hat. Und dieser Link ist dann noch im Text enthalten. Aber erst einmal durchatmen und first things first:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist ein Hotlink eigentlich?<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Hotlinks sind nicht generell schlimm. Zumindest nicht, wenn das Hotlinking miteinander abgesprochen wurde oder wenn man ein Bilder-Uploadservice ist.<br>In den meisten F\u00e4llen 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.<br>L\u00e4sst 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).<\/p>\n\n\n\n<p>Nun hat der Content-Dieb gratis ein Bild auf seiner Website, f\u00fcr 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.<br>Unter Umst\u00e4nden kann so etwas zu unglaublichem Fremdtraffic f\u00fchren. Je nachdem wieviel Besuchertraffic der Content-Dieb auf seiner Website hat.<br>Das ist echt nicht witzig.<\/p>\n\n\n\n<p>Ich m\u00f6chte 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.<br>So k\u00f6nnen Sie n\u00e4mlich den vermeintlichen Schaden umkehren und daraus Nutzen ziehen und falls Sie richtig sauer sind, dem Dieb noch eins auswischen: <strong>holen Sie die Besucher auf Ihre eigene Website!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wie Sie NGINX zum unbezwingbaren Hotlink-Endgegner machen!<\/h2>\n\n\n\n<p>So sieht der Plan aus:<\/p>\n\n\n\n<ul class=\"fa-ul wp-block-list\"><li><i class=\"fa-li fas fa-thumbs-up\"><\/i> Wir wollen eine \u00fcbergreifende L\u00f6sung, die f\u00fcr alle Domains funktioniert. So, dass man nicht jede einzelne vHost Konfiguration (sites-available) anpassen muss.<\/li><li><i class=\"fa-li fas fa-thumbs-up\"><\/i> Es soll der Anfragelink umgeschrieben (<a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_rewrite_module.html\" target=\"_blank\" rel=\"noreferrer noopener\">rewrite<\/a>) und so stattdessen ein bestimmtes, anderes Bild an die Diebesseite bedient werden<\/li><li><i class=\"fa-li fas fa-thumbs-up\"><\/i> 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<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00f6sung des Bilderdiebstahls<\/h2>\n\n\n\n<p>Diese wenigen Codezeilen sind letztendlich die L\u00f6sung des Problems mit dem Bilderdiebstahl. Wie und wo Sie den Code platzieren m\u00fcssen erfahren Sie im n\u00e4chsten Abschnitt.<\/p>\n\n\n\n<pre class=\"wp-block-code lund_style\"><code>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)$ {\n  add_header \"Access-Control-Allow-Origin\" \"*\";\n  access_log off;\n  log_not_found off;\n  expires max;\n  valid_referers none blocked ~.google. ~.bing. ~.yahoo. ~.yandex. server_names ~($host);\n    if ($invalid_referer) {\n      rewrite (.*) \/hotlink\/achtung-inhalts-und-bilderklau.png redirect;\n      }\n}\n#hotlink weiterleitungsloop beenden\nlocation = \/hotlink\/achtung-inhalts-und-bilderklau.png { }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Was macht der Code?<\/h3>\n\n\n\n<p><code>~<\/code> wird verwendet, um Gro\u00df-\/Kleinschreibung zu ber\u00fccksichtigen, w\u00e4hrend <code>~*<\/code> Gro\u00df-\/Kleinschreibung ignoriert.<\/p>\n\n\n\n<p>NGINX \u00fcberpr\u00fcft die locations-Regel in der Reihenfolge, in der die regul\u00e4ren Ausdr\u00fccke eingef\u00fcgt sind. Das bedeutet, dass sich die Caching Header-Anweisungen f\u00fcr Mediendateien und die Anweisungen unseres Hotlink-Schutzes im selben Block befinden m\u00fcssen!<\/p>\n\n\n\n<p><code>location = \/hotlink\/achtung-inhalts-und-bilderklau.png { }<\/code> wird ben\u00f6tigt, damit bei der neuen Anfrage auf das Austauschbild, kein unendlicher Weiterleitungsloop entsteht:<br>\nBilderdiebseite sendet Anfrage f\u00fcr BildA \u2192 unser NGINX leitet die Anfrage nach Austauschbild um \u2192 Bilderbiebseite sendet Anfrage f\u00fcr Austauschbild \u2192 unser NGINX leitet die Anfrage nach Austauschbild um, servt aber nicht \u2192 und so weiter&#8230;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.saskialund.de\/wp-content\/uploads\/2018\/02\/achtung-inhalts-und-bilderklau.png\" alt=\"Platzhalterbild bei Bilderdiebstahl\" class=\"wp-image-998\" width=\"512\" height=\"256\"\/><\/figure><\/div>\n\n\n\n<p><code>$host<\/code> ist eine Variable, die diese Anweisung global nutzbar macht und unter allen vHost-Domains auf dem Webserver funktioniert. Folgende URL wird f\u00fcr jede Domain g\u00fcltig ausgegeben: <code>http:\/\/$host\/hotlink\/achtung-inhalts-und-bilderklau.png<\/code><\/p>\n\n\n\n<p>Es sollte lediglich unter jeder Domain das Verzeichnis <code>\/hotlink<\/code> angelegt werden und eine Bilddatei mit dem Namen: <code>achtung-inhalts-und-bilderklau.png<\/code> in diesem Verzeichnis abgelegt werden. Sie k\u00f6nnen die Datei und das Verzeichnis auch anders nennen, wenn Sie m\u00f6chten. Passen Sie nur den Code entsprechend an.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">So binden Sie die Location-Regel ein<\/h3>\n\n\n<div id=\"rank-math-howto\" class=\"rank-math-block\" >\n<div class=\"rank-math-howto-description\">\n\n<p>So gehen Sie vor, um Ihren NGINX Webserver mit diesem besonderen Hotlink-Schutz gegen Bilderdiebstahl auszustatten.<\/p>\n\n<\/div>\n<p class=\"rank-math-howto-duration\"><strong>Total Time:<\/strong> <span>30 minutes<\/span><\/p>\n<div class=\"rank-math-steps \">\n<div id=\"howto-step-6257ed8c82378\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Vorbereitungen: Austauschgrafik erstellen und hochladen<\/h3>\n<div class=\"rank-math-step-content \"><p>Erstellen Sie zun\u00e4chst eine Grafik, die die Besucher der Diebes-Website sehen sollen und laden Sie diese in das gew\u00fcnschte Verzeichnis auf Ihrem Webserver. Notieren Sie sich die URL der Grafik.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-6257ed8c8237d\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">NGINX Webserser locations Konfiguration anpassen<\/h3>\n<div class=\"rank-math-step-content \"><p>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\u00fcr die im obigen Code definierte location Regeln vorhanden sind. In der Regel wird es bereits einen vorhandenen Regelblock f\u00fcr die genannte location geben. Falls nicht, f\u00fcgen Sie den obigen Code einfach als neuen Regelblock in die richtige Datei ein.<br \/>Ist der Block bereits vorhanden, f\u00fcgen Sie nur die obigen Regeln ein ohne den locations wrap.<\/p>\n<\/div>\n<\/div>\n<div id=\"howto-step-6257ed8c8237e\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">NGINX Webserver Konfiguration speichern und neuladen<\/h3>\n<div class=\"rank-math-step-content \"><p>Anschlie\u00dfend speichern Sie die Konfigurationsdatei mit dem erweiterten locations-Block auf dem Server ab und testen Sie die neue Konfiguration zun\u00e4chst \u00fcber das SSH Terminal mit nginx -t<br \/>Ist der Test ohne Beanstandungen durchgegangen, starten Sie Ihren NGINX mit dem Befehl service nginx restart neu.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Testen Sie Ihren Hotlink-Schutz!<\/h2>\n\n\n\n<p>Hier habe ich Ihnen ein Tool geschrieben, mit dem Sie Ihre Hotlink-Schutz-Konfiguration testen k\u00f6nnen. Geben Sie in das Eingabefeld die direkte URL f\u00fcr 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\u00fcssen Sie Ihren Hotlink-Schutz nochmal kontrollieren.<\/p>\n\n\n\n<p>Wenn Sie den Test mehrmals hintereinander f\u00fcr dieselbe Bild-URL machen m\u00f6chten, m\u00fcssen Sie Ihren Browsercache nach jedem Test l\u00f6schen und diese Seite neu laden.<\/p>\n\n\n\n<div class=\"lund_style hotlinkschutz\"><input id=\"BildUrl\" placeholder=\"Bild-URL hier eingeben\" type=\"text\"> <span id=\"btnhotlink\" class=\"et_pb_button\">Bild-URL pr\u00fcfen<\/span>\n\n<div style=\"background-color: #f0edea; width: 100%; padding: 0; -webkit-border-radius: 2px; border-radius: 2px;\">\n<div class=\"hotlinkimagecontainer\" style=\"background-image: url('\/wp-content\/uploads\/2020\/07\/hotlink-schutz-nginx-apache.png');\" id=\"Hotlinktestbild\"><\/div><\/div>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\njQuery(document).ready(function($) {\n$(\"#btnhotlink\").click(function(){\n    $(\"#Hotlinktestbild\").css(\"backgroundImage\", \"url('\"+$(\"#BildUrl\").val()+\"')\");\n});\n});\n\/\/ ]]><\/script><\/div>\n\n\n\n<p>Haben Sie noch Fragen? Dann z\u00f6gern Sie nicht und nutzen Sie die Kommentarfunktion unterhalb dieses Beitrags!<\/p>\n\n\n\n<p>Bitte teilen Sie diesen Artikel auf Ihrer Facebook-Seite, \u00fcber 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\u00fcrde mich sehr freuen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Almost everyone who runs a website with editorial content on the Internet is familiar with this: image theft via hotlink.<br \/>\nAnd preferably with a completely copied text that you have painstakingly researched and spent hours writing down and proofreading.<\/p>","protected":false},"author":1,"featured_media":829,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[19],"tags":[34,35,36],"dipi_cpt_category":[],"class_list":["post-811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos-anleitungen","tag-hotlink-schutz","tag-medien-schuetzen","tag-nginx"],"acf":[],"_links":{"self":[{"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/posts\/811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/comments?post=811"}],"version-history":[{"count":0,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/posts\/811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/media\/829"}],"wp:attachment":[{"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/media?parent=811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/categories?post=811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/tags?post=811"},{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/isla-stud.io\/en\/wp-json\/wp\/v2\/dipi_cpt_category?post=811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}