Anti-Pixelio-Script oder wie vermeide ich AZ 14 O 427/13
Letz Fetz: Worum es gehts?
Stellen wir uns mal vor, wir hätten das rechte Bild von Pixelio.
Wir binden es wie gehabt unter unserem Bildpfad in ein HTML-Dokument ein, und setzen das in den Context unseres Artikels.
Nun gab es da aber einen schlauen Richter, der unter oben genanntem AZ gesagt hat:
„Ne, das geht ja überhaupt nicht.
Das Widerspricht den Lizenzbestimmungen von Pixelio.
Sie können doch nicht einfach das Bild direkt erreichbar machen. Da fehlen ja dann alle Angaben.“
Lieber Herr Richter, Ich als Webdeveloper bin sogar dazu gezwungen, es so so zu machen, weils die Technik garnicht anders zulässt.
wAber Ich wäre nicht ich, wenn ich da keine Lösung hätte.
Das Bild Rechts ist unter dem Pfad http://dark-cms.de/images/bilderschutz/blobschutz/repko.png erreichbar und kann von euch auch aufgerufen werden.
Bei dem Bild handelt es sich um das Logo des neuen Reptilienkosmos,also keine Angst das es meine Seite bald nicht mehr gibt.
Zurück zum Thema, stellen wir uns vor, Wir müssten uns nun an dieses AZ halten, wenn wir Bilder von Pixelio verwerten. Dann müssten wir also Urheber und nen Link zu Pixelio setzen.
Würde man das Bild nun aber direkt aufrufen, wäre das Problem, das diese Informationen nicht dabei stehen.
Urheber: Reptilienkosmos
Reptilienkosmos
Letz Save: Was soll passieren
Wir möchten nun also unsere Bilder schützen, diesmal aber nicht vor Kopieren, sondern vor direktem Zugriff.
Es soll also ersatzweise bei direktem Zugriff auf
http://dark-cms.de/images/bilderschutz/blobschutz/repko.png
das rechte Bild erscheinen. Dieses Bild könnt ihr euch unter
http://dark-cms.de/images/bilderschutz/blobschutz/no.png
anschauen.
Und hier beginnt die technische Einschränkung, denn auch die Einbindung in HTML ist ein direkter Zugriff auf das Bild. und das kann der Server nur schwer, bis garnicht, erkennen.
Hier gibt es nun verschiedene, eher bescheidene (nein eigentlich beschissene), Lösungen. Zum einen, indem man per .htaccess den Referer prüft, also wo der Zugriff herkommt, dabei kann man Seite und Bild aber immernoch zeitgleich aufmachen.
Oder die Sperre des Rechtsklick (die man mit deaktiviertem JS immer umgehen kann).
Alles nur eher Notlösungen.
Wir sperren einfache alles, was wir von Pixelio haben und zwingen den Nutzer zum aktiven Javascript. Ok, nicht gerade Webfreundlich, aber die Anwälte und richter wollen es ja nicht anders.
Das ganze funktioniert via .htaccess-Datei und dem mod_rewrite und kann ungefähr so aussehen:
Wir haben einen Bilderordner, in dem befinden sich alle Pixelio-Bilder und eine Dot-Datei (die werden wegen dem berühmten Punkt so genannt) mit dem Namen .htaccess (Aufbau siehe rechts).
Im Detail steht jetzt da drin:
Aktiviere die Rewriteengine
Die Basis ist der Ordner in dem auch die Bilder und die .htaccess liegt.
Wenn der Datei-Name, der aufgerufen wird, ein Bild ist (NC steht für Gross/Klein egal).
Dann leite auf ein bild in einem freien Order um.
RewriteEngine On
RewriteBase /images/pixeliobilder/
RewriteCond %{REQUEST_FILENAME} .*(png|jpg|jpeg|gif)$ [NC]
RewriteRule (.*) /freiebilder/no.png [L,R=301]Zum Testen sieht meine .htaccess etwas anders aus. Die Bilder in diesem Tutorial liegen in dem Ordner /images/bilderschutz/blobschutz/ und dort liegt eine Kopie von dem Logo, was aber für den Zugrif gesperrt ist.
Das könnt ihr unter http://dark-cms.de/images/bilderschutz/blobschutz/repko2.png erreichen, bzw. werdet ihr es nicht direkt erreichen.
Meine .htaccess ist auch nur auf dieses eine Bild beschränkt (siehe rechts).
RewriteEngine On
RewriteBase /images/bilderschutz/blobschutz/
RewriteCond %{REQUEST_FILENAME} .*repko2\.png$ [NC]
RewriteRule (.*) no.png [L,R=301]Letz Einbinden: Wir wollen das Bild sehen
Rechts ist das Bild eingebunden (wer das hier nicht glaubt prüft den pfad mit dem Debugger). Aber angezeigt wird nichts. Klar, der direkte Zugriff ist auch verboten worden.
Schritt 1: Das Bild erreichbar machen
Nun machen wir das Bild auf dem Server erreichbar, und zwar ausschliesslich auf dem Weg, der nur mit gegebener Technik möglich wäre (oder durch Manipulation des System, was aber nicht die Lizenzbestimmungen von Pixelio verletzen würde, da hier dann von einem Hack die Rede wäre)
Die einzige Möglichkeit wäre also, das Bild nur für einen Post-Request freizumachen, der über Ajax erfolgt.
Das geschieht mit 2 Zeilen in der .htaccess (siehe rechts), als zusätzliche RewriteCondition
Diese bedeuten im Grunde nichts anderes als
Wenn der Aufruf kein POST-Request ist,
Wenn der Aufruf nicht per Ajax gemacht wurde.
RewriteCond %{REQUEST_METHOD} !=POST [NC]
ReWriteCond %{HTTP:X-Requested-With} ^$Zwischenschritt
Mit dieser Anpassung sieht meine .htaccess jetzt so aus.
Aber das Bild wird immer noch nicht angezeigt. Klar, wir sind auch noch nicht fertig.
RewriteEngine On
RewriteBase /images/bilderschutz/blobschutz/
RewriteCond %{REQUEST_FILENAME} .*repko2\.png$ [NC]
RewriteCond %{REQUEST_METHOD} !=POST [NC]
ReWriteCond %{HTTP:X-Requested-With} ^$
RewriteRule (.*) no.png [L,R=301]Schritt 2: Javascript unser…
Nun bauen wir uns ein Javascript, welches ganz fix alles umwandelt.
Diese Javascriptfunktion ist eigentlich recht simpel, sie macht einen XHR-Post-Aufruf auf das Bild und bekommt einen Blob zurück. Also das Bild in seiner Datenform.
Zusätzlich wird eine ObjectUrl daraus erzeugt, die nur in diesem Browser gültig ist, solange wie diese nicht entfernt oder der Browser geschlossen wird.
Wir löschen diese URL, nachdem das Bild neu geladen wurde.
Code im Detail:
Zeile 1: Prüfen ob window.URL existiert oder ob wir auf ein Webkitderivat zurückgreifen können.
Zeile 2: normaler Funktionsaufruf mit dem Bild-DOM-Object aus Javascript (Erklärung folgt).
Zeile 3: Wir erzeugen einen neuen Ajax-Request.
Zeile 4: und öffnen eine Postverbindung zu dem im src-Attribut genanntem Bildpfad.
Zeile 5: als Antwort fordern wir einen Blob ab.
Zeile 6+7: Hier führen wir, wenn das XHR eine Antwort sendet, eine Funktion aus, die den Status 200 erwartet.
Zeile 8: Wenn alles passt, bauen wir mit der Function „createObjectURL“ aus „window.URL“ und der Antwort vom Server eine Object-Url und binden diese als src an das Bild
Zeile 9-11: Und wenn das Bild geladen wurde, wird die Objecturl wieder gelöscht und der Klassenname entfernt (weil, wegen, gleich)
window.URL = window.URL || window.webkitURL;
function loadImagePerXHRPost(image) {
var xhr = new XMLHttpRequest;
xhr.open("POST",image.src);
xhr.responseType = 'blob';
xhr.onload = function(e){
if (this.status == 200) {
image.src = window.URL.createObjectURL(this.response);
image.onload = function(e) {
window.URL.revokeObjectURL(this.src);
$(this).removeClass('pixelioLizenzBild');
}
}
}
xhr.send();
}Schritt 3: Testen
Rechts ist das Bild eingebunden (ja, nochmal)(wer das hier nicht glaubt prüft den pfad mit dem Debugger).
Diesmal hat es die Klasse pixelioLizenzBild(wait, wait, not now…, wait).
Und der Button darunter ist mit diesem Bild verbunden, damit man sehen kann was passiert.
Noch nicht geklickt? Dann jetzt.
Nichts passiert, getestet unter IE10+,Chrome 31+ und Firefox (keine Ahnung ist wieder zu). Das ist halt ein Javascript für die neue Generation Browser.
Für andere hab ich eine andere Lösung (Ja, folgt.).
Ok unten sind auch noch ein paar Bilder, alle werden in 250 Milisekunden abstand geladen.
Schritt 4: How To
Was ist nun grad passiert? Eigentlich nicht viel, ich hab per Jquery alle Bilder eingelesen, die die Klasse .pixelioLizenzBild haben und hab die Bilddaten vom Server gerufen.
Diese Funktion kann man auch direkt an die $(document).ready-Funktion hängen, damit das ganze passiert wenn die Seite fertig geladen ist (Mein Code hinter dem Button, aber ohne Verzögerung, siehe rechts).
$("button").on('click',function() {
$(".pixelioLizenzBild").each(function(){
loadImagePerXHRPost(this);
});
}Zwischenschritt
Das Script ist ein reiner geistiger Durchfall und nicht aktiv verwendbar, da es nicht bei allen Browsern funktioniert (Die zeigen dann nur das Do’h-Bild an), aber es gibt noch andere Möglichkeiten wie man Bilder schützen kann, aber das ist eine andere Geschichte.
Aber man sollte zumindest dran denken darauf hinzuweisen, das wegen eventuellen Lizenzen Bilder nicht direkt, oder garnicht, angezeigt werden.
Schritt 5: Heil dir Justitia
Mal so etwas von meiner Seite.
Justitia trägt Schwert, Waage und Augenbinde. Das alles ist wichtig um Justitia darzustellen. Was dieses Urteil macht ist aber nicht anderes, als wenn ich sage: „Justitia ist gewaltätig, den sie Trägt ein Schwert“.
Klaro Bilder sind im web über eigene Links erreichbar, aber dies ist auch die einzige Möglichkeit, diese in Dokumente der Webseite einzubinden. Sie bilden zusammen mit dem Text ein Gesamtwerk, so wie Justitia nur mit Waage, Augenbinde und Schwert, Justitia darstellen.
An den lieben Anwalt, der den vermeindlichen Rechtsklick erwähnt:
Durch den Rechtsklick und die Funktion „Bild in neuem Tab öffnen“ oder „Bild anzeigen“, erzeugt der Benutzer keine neue Instanze von dem Bild, sondern er sieht nur das Bild was auf der seite vorhanden war (Fiddler2 und co zeigen ihnen dies sogar im Detail, da dort kein erneuter HTTP-Aufruf erfolgt, selbst wenn die Bilder nicht gecached werden), aber ok, danach hab ich den Bildpfad. Aber wie wäre zum Beispiel mal die Idee, das Pixelio einen Bildnamenzwang macht, also dass die Bilder immer (z.B. bei Justitia_R_by_HHS_pixelio.JPG) Bildnamen,Rechte,Autor, und Pixelio enthalten müssen,wenn keine anderen Möglichkeiten gegeben sind, dann wär die Welt viel einfacher.