Html Image Source Binary Optionen

Es ist ein wichtiges Thema Sicherheit und Im sicher, dass dies möglich sein sollte. Ein einfaches Beispiel: Sie führen ein Community-Portal. Benutzer sind registriert und laden ihre Bilder hoch. Ihre Anwendung gibt Sicherheitsregeln, wann immer ein Bild angezeigt werden darf. Zum Beispiel Benutzer müssen Freunde auf jeder Seite durch das System, damit Sie sehen können, dass jemand elses hochgeladenen Bilder. Hier kommt das Problem: es ist möglich, dass jemand die Bildverzeichnisse Ihres Servers kriecht. Aber Sie wollen Ihre Benutzer vor solchen Angriffen zu schützen. Wenn es möglich ist, die Binärdaten eines Bildes direkt in das HTML-Markup zu setzen, können Sie den Benutzerzugriff Ihrer Image-Verzeichnisse auf den Benutzer beschränken und Ihre Web-Applikation laufen lassen und die Bilddaten direkt an Ihren Apache-Benutzer und Ihre Gruppe übergeben Das HTML. Die einzige mögliche Schwachstelle ist dann das Passwort des Benutzers, dass Ihre Web-app läuft als. Gibt es schon eine Möglichkeit Wenn ich Sicherheit auf meinem Bilderverzeichnis brauche würde ich das Verzeichnis überhaupt nicht enthüllen. Stattdessen würde meine img src-Attribute auf eine Seite verweisen, die eine UserID und eine Image-ID als Parameter nehmen würde. Die Seite würde bestätigen, dass dieser Benutzer tatsächlich Zugriff darauf hatte, dieses Bild zu sehen. Wenn alles gut, senden Sie die binäre zurück. Sonst nichts senden. Auch ich würde nicht guessable ids verwenden. Stattdessen klebt an etwas wie Base 64 codierten Führungen. Mit HTML5 können Sie die canvas-Tag und JavaScript, dies zu tun. Sie könnten vielleicht etwas mit CSS oder ein Tabellenlayout, um ein Bild (wahrscheinlich wirklich schlechte Leistung, Auflösung, Portabilität) zu zeichnen. So oder so, es gibt keine stoppen Menschen von der Aufnahme Ihrer Bilder. Sie konnten einen Screenshot machen und es ausschneiden. Wie Chris in seiner Antwort erwähnt, mit langen Bild-IDs, so dass die URL für jedes Bild ist nicht leicht zu erraten oder rohe Gewalt ist wichtig. Und keine Verzeichnisliste auf Ihren Webserververzeichnissen ist auch. Sie könnten die Bilder aus dem Dokument-Root in ein privates Verzeichnis verschieben und liefern sie über Ihre Anwendung, die Zugriff auf dieses Verzeichnis hat. Jedes Mal, wenn Ihre App ein Image-Tag generiert, generiert es dann auch ein kurzlebiges Sicherheitstoken, das beim Zugriff auf ein bestimmtes Bild angegeben werden muss: Chancen sind sehr selten, dass jemand den richtigen Token zum richtigen Zeitpunkt mit dem richtigen Bild erzwingen wird. Es gibt mindestens Möglichkeiten, das Token in getImage zu überprüfen: Verfolgen Sie alle Image-Tags in Ihrer App und speichern Sie Datensätze in einer Datenbank, die die zufällig generierten Token und Image-IDs mit den anfragenden Benutzern verknüpfen. Die getImage-Aktion überprüft dann die bereitgestellten Parameter auf dieser Datenbank. Generieren Sie das Token als Prüfsumme (MD5, CRC, was auch immer) über die Benutzer-ID, die Image-ID und vielleicht den aktuellen Tag des Jahres, und achten Sie darauf, in einem unguessable Salz mischen. Die getImage-Aktion wird dann die Prüfsumme neu berechnen und sie auf die angegebene überprüfen, um den Benutzerzugriff zu überprüfen. Diese Methode wird weniger Overhead produzieren als die erste. Ich glaube, es ist einfacher, nur die Zugriffsbeschränkungen der referenzierenden HTML-Seite wieder auf die quotgetImagequot Aktion, wie jemand oben geschrieben hat. Nichtsdestoweniger kann die Prüfsummenmethode die Leistungseinschränkung verringern, da sie auf keine externen Ressourcen zugreift, um die Anforderung zu verifizieren. Ndash the-banana-king Mrz 12 10 um 2:21 Deine Antwort 2016 Stack Exchange, IncInline Bilder mit Daten-URLs Zusammenfassung. Erfahren Sie, wie Sie Bilder in Ihre Webseiten mit Daten-URLs einbetten. Die Daten: URI-Schema enthält Bilder direkt in Ihre XHTML-Seiten mit Code anstelle von externen Dateien, speichern wertvolle HTTP-Anfragen. Inline-Bilder verwenden das URI-Schema, um Bilder direkt in Webseiten einzubetten. Wie von RFC 2397 definiert, sind Daten-URIs so konzipiert, dass sie kleine Datenelemente als Sofortdaten einbetten, als ob sie extern verwiesen würden. Mit Inline-Bildern werden HTTP-Requests über extern referenzierte Objekte gesichert. Browser-Unterstützung für Daten-URLs Während Opera 7.2, Firefox, Safari, Netscape und Mozilla unterstützen Daten-URIs, Internet Explorer 5-7 nicht. Allerdings, Internet Explorer 8 Berichten zufolge, indem sie die Acid2-Test. Wodurch Daten-URLs eine brauchbare Alternative zum Einbetten kleinerer dekorativer Bilder sind. Es gibt Workarounds, die Sie für ältere Versionen von Internet Explorer verwenden können. Das Daten-URL-Schema Sie haben keine Zweifel, andere URL-Schemata in Ihren Reisen rund um das Web, wie http. Ftp. Und mailto: Schemata. Das Daten-URL-Schema ist eine Möglichkeit, Sofortdaten einzubetten, als wäre sie extern enthalten. Daten-URLs verwenden die folgende Syntax: Im Fall eines Bildes verwenden Sie einen Mime-Typ, der das Bild identifiziert (bspw. Image gif), gefolgt von einer base64-Darstellung des binären Bildes. Das folgende Bild ist ein Ordnersymbol (abgeschnittene Screenshots): CSS - und Inline-Bilder Eingebettet in XHTML-Dateien werden Daten-URL-Bilder nicht für eine wiederholte Verwendung zwischengespeichert und auch nicht zwischengespeichert Seite zu Seite. Eine Technik, um das Zwischenspeichern zu ermöglichen, besteht darin, Hintergrundbilder in externe CSS-Dateien einzubetten. CSS wird von Browsern zwischengespeichert und diese Bilder können mit einem Selektor wiederverwendet werden, zum Beispiel: Nun wird das Ordner-Image für jede Instanz des LI wiederholt (oder Sie könnten auch hier eine Klasse oder ID verwenden). Das sieht so aus in Firefox (beschnittene Screenshots): Daten-URL-Probleme Es gibt zwei Probleme mit diesem Ansatz. Sie müssen die base64-Daten neu berechnen und die CSS-Datei jedes Mal bearbeiten, wenn sich das Bild ändert. Auch IE-Versionen 5-7 unterstützen keine Inline-Bilder. Das erste Problem hat eine einfache PHP-Lösung also: Dieser Code liest das Bild und konvertiert es automatisch auf base64 auf dem Server. Sie bezahlen für diese Bearbeitung Bequemlichkeit mit einigen serverseitigen Verarbeitung. Internet Explorer-Workarounds Es gibt zwei Möglichkeiten, um IEs fehlende Daten URL-Unterstützung. Mit Browser Sniffing können Sie einfach das externe Bild für IE und die eingebetteten Bilder für andere Browser. Oder Sie können JavaScript verwenden, um Daten-URL-Unterstützung in IE zu simulieren, aber diese Methode erfordert einen fairen Betrag von JavaScript-Code. Der PHP-Code oben macht die Einfügung der base64-Äquivalent eines Bildes einfach: Nun, wenn Ihr Server die CSS-Datei analysiert, wird es automatisch kodieren die binäre Bilddatei in base64 und senden Sie die codierten Inline-Bilddaten direkt in der CSS-Datei. Als nächstes müssen Sie Browser Sniffing hinzufügen, um das Bild für IE und das Inline-Bild für alle anderen zu liefern. Sie könnten dies in der CSS-Datei mit PHP oder mit bedingten Kommentaren wie folgt tun: wo die ie. css-Datei würde eine normale Bildreferenz so haben: Vorteile von Daten-URLs Daten-URLs speichern HTTP-Anforderungen. In Kombination mit CSS-Sprites. Daten-URLs können zahlreiche HTTP-Anfragen speichern. Es wäre interessant zu sehen, ob Daten-URLs mit USEMAPS kombiniert werden können oder ein Daten-URL CSS-Sprite. Speichern von HTTP-Anforderungen, Vermeidung von Hinzufügen zum Objekt-Overhead Speichern gleichzeitiger Threadbrowser standardmäßig auf zwei gleichzeitige Verbindungen pro Hostname HTTPS-Anforderungen sind vereinfacht und verbesserte Leistung Nachteile von Daten-URLs Inline-Bilder werden in Internet Explorer 5-7 nicht unterstützt . Die base64-Textdarstellung von Bilddaten nimmt auch mehr Bytes auf als das Binärbild. In unseren Tests waren die base64-Daten 39 bis 45 grßer als das binäre Bild, aber mit gzip-Kompression wurde der Unterschied auf nur 8 bis 9 grßer reduziert. Die Optimierung Ihrer Bilder vor dem Konvertieren in base64 reduzierte die Größe der Zeichenfolge proportional. Es gibt Größenbeschränkungen für Inline-Bilder. Browser sind nur erforderlich, um URLs bis zu 1.024 Byte Länge, nach dem oben genannten RFC unterstützen. Browser sind liberaler in dem, was sie akzeptieren, aber. Opera beschränkt Daten URLs auf etwa 4.100 Zeichen. Firefox unterstützt Daten-URLs bis zu 100K, so dass diese Technik am besten für kleine, dekorative Bilder verwendet wird. Zusammenfassend: IE 5-7 unterstützt keine weiteren Schritte zur Aktualisierung von eingebetteten Inhalten (reencode, reembed) Längenbegrenzungen - Technik ist für kleinere, dekorative Bilder nützlich Base64-codierte Bilder sind etwa 33 größer als ihr binäres Äquivalent Beispiel Daten URLs Im Folgenden finden Sie einige Live-Beispiele zu testen, auf Ihrem Browser, Spiegelung der Code oben. Fazit Mit der Veröffentlichung von Internet Explorer 8 werden Daten-URIs eine praktikable Option. Sie können kleine Bilder direkt in Webseiten mit Daten-URLs einbetten, um HTTP-Anfragen zu speichern. Daten-URLs sind eine bequeme Möglichkeit, selbst eingeschlossene Webseiten zu erstellen, die sich nicht auf externe Objekte verlassen, die gerendert werden. Weiterlesen CSS Sprites: Wie Yahoo und AOL Verbesserung der Web-Performance Erfahren Sie, wie AOL und Yahoo CSS-Sprites verwenden, um die Leistung für ihre geschäftigen Homepages zu verbessern. CSS-Sprites sparen HTTP-Anfragen, indem sie CSS-Positionierung verwenden, um zusammengesetzte Hintergrundbilder selektiv anzuzeigen. Um die Barrierefreiheit und Benutzerfreundlichkeit zu maximieren, werden CSS-Sprites am besten für Symbole oder dekorative Effekte verwendet. Daten: URI-Schema Wikipedia-Seite auf Daten URLs Daten URL-Küche Konvertiert Bilder in Daten URLs Daten URL Maker Auch konvertiert Bilder in Daten URLs RFC 2397 Die Daten-URL-Schema-Spezifikation von der IETF.