Daten-URI-Schema und Internet Explorer 9-Fehler

Ich habe ein Problem mit dem RFC 2397 Daten URL-Schema mit IE-Versionen 6-9. Mein Beispielcode funktioniert problemlos, wenn Sie aktuelle Versionen von Safari, FF, Opera und Chrome verwenden.

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g 

oder

 data:text/html,%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%220%3Burl%3Dhttp%3A//google.com/%22%3E%20 

Wenn der obige Code in fast allen Browsern mit Ausnahme von IE eingefügt wird, wird er zu google.com geleitet. Beim Versuch mit IE wird der folgende Code mit folgendem Fehler ausgegeben:

Die Webseite kann nicht angezeigt werden

Wahrscheinlichste Ursache:

  • Einige Inhalte oder Dateien auf dieser Webseite erfordern ein Programm, das Sie nicht installiert haben.

Was du versuchen kannst:

Suchen Sie online nach einem Programm, mit dem Sie diesen Webinhalt anzeigen können.

Geben sie die Adresse neu ein.

Bei der Überprüfung der Seitenquelle der erzeugten IE-Fehlerseite gibt es einen Link, der auf Dateizuordnungen und Protokolle verweist.

Protokolltyp:

Beschreibung: Unbekannt

Windows erkennt dieses Protokoll nicht.

Ich weiß, dass die Verwendung des Protokolls “data:” wahrscheinlich nicht die einfachste oder in den meisten Fällen die beste Option ist, aber ich muss sie für dieses spezielle Projekt verwenden.

Ich habe überall nach einer Lösung gesucht und viele Beispiele mit IE versucht, die hofften, dass es meine Syntax war, aber noch eine Lösung gefunden habe.

Solutions Collecting From Web of "Daten-URI-Schema und Internet Explorer 9-Fehler"

Daten-URIs können nicht zur Navigation, zum Skripten oder zum Auffüllen von Rahmen- oder Iframe-Elementen in IE verwendet werden.

Laut http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx :

Daten-URIs werden nur für die folgenden Elemente und / oder Attribute unterstützt.

 object (images only) img input type=image link CSS declarations that accept a URL, such as background, backgroundImage, and so on. 

Daten-URIs können verschachtelt sein.

Aus Sicherheitsgründen sind Daten-URIs auf heruntergeladene Ressourcen beschränkt. Daten-URIs können nicht zur Navigation , zum Skripten oder zum Auffüllen von Rahmen- oder Iframe-Elementen verwendet werden.

Daten-URIs dürfen nicht größer als 32.768 Zeichen sein.

Die Ressourcendaten müssen ordnungsgemäß codiert sein; Andernfalls tritt ein Fehler auf und die Ressource wird nicht geladen. Die Zeichen “#” und “%” müssen codiert sein, ebenso wie Steuerzeichen, Nicht-US-ASCII-Zeichen und Multibyte-Zeichen.

Weitere Informationen finden Sie unter RFC2397: Das URL-Schema “Daten”.

Verfügbar ab Windows Internet Explorer 8 oder höher. **

Für mich war das Finden von document.execCommand ein Lebensretter. Es verwendet den iFrame wie einige der anderen Beispiele, aber der execCommand macht die function Save As konsistent.

Hier ist ein Beispiel

 var getCsvFileForIE = function(target) { var csvData = target.attributes["data-csv"].value; if (navigator.appName === "Microsoft Internet Explorer") { csvData = decodeURIComponent(csvData); var iframe = document.getElementById('csvDownloadFrame'); iframe = iframe.contentWindow || iframe.contentDocument; csvData = 'sep=,\r\n' + csvData; iframe.document.open("text/html", "replace"); iframe.document.write(csvData); iframe.document.close(); iframe.focus(); iframe.document.execCommand('SaveAs', true, 'data.csv'); } else { if (console && console.log) { console.log('Trying to call getCsvFileForIE with non IE browser.'); } } }; 

Wir tun dies für IE und für alle anderen Browser verwenden wir die Standard-Daten-URI-Link. Sie können den vollständigen Sinn für weitere Details sehen. Ein Huttipp zu Andrew Blondeau für die Richtung .


AKTUALISIEREN

Eine bessere Möglichkeit festzustellen, ob der Browser einen Daten-URI unterstützt

supportsDataUri = 'download' in document.createElement('a');

Es sieht auch so aus, als würde der IE immer noch auf Probleme stoßen. Für IE10 + müssen Sie möglicherweise msSaveOrOpenBlob und für IE8 / 9 müssen Sie noch den execCommand in einem iFrame .

UPDATE 2

Es gibt ein Modernizr-Problem zum Erkennen von Daten-Uri-Schema. Es verweist auf eine andere SO-Antwort . Achten Sie darauf, diese auch zu überprüfen.

Internet Explorer unterstützt Daten-URIs (Ressource ist etwas veraltet). Es gibt jedoch einige Sicherheitsaspekte, die verhindern, dass böswillige Versuche unternommen werden, Benutzer umzuleiten, oder Hackern auf andere Weise erlauben, Phishing zu betreiben, ohne Skripts oder gehostete Ressourcen von Drittanbietern zu benötigen.

Dies bedeutet, dass Sie es mit JavaScript verwenden können:

  

Cascading Style Sheets (mit oder ohne base64-Codierung):

   

Oder sogar Bilder:

  

Sie können diese jedoch nicht mit window.open oder iframe , da dies einige sehr gefährliche Dinge ermöglichen würde, einschließlich Phishing mit Daten-URIs :

  

Dieses letzte Beispiel könnte eine vollständige Kopie des PayPal-Anmeldebildschirms sein. Stattdessen ist es nur eine HTML-Schaltfläche mit einem Ereignishandler, der gebunden ist und auf Klicks wartet. Ähnliche Hacker könnten über window.open :

 window.open("data:text/html;base64,PHN0cm9uZz5XQVQhPzwvc3Ryb25nPg==", "OHAI"); 

Der Internet Explorer 10 unterstützt diese function, schützt jedoch den Endbenutzer vor den böswilligen Benutzern. Ich bin sicher, dass Microsoft diese Einschränkung gern aufhebt, wenn und wenn sie eine bessere Möglichkeit zum Schutz ihrer Benutzerbasis finden.

Bis sich die Dinge ändern, müssen Sie eine andere Möglichkeit finden, Ihre FLV-Dateien einzuschließen. Auf der anderen Seite möchten Sie möglicherweise nicht solche tatsächlichen Daten aus Ihrer Anwendung in Stack Overflow freigeben.

Laut Francos Antwort hier: CSV-Dateiexport Für IE

Erstellen Sie einfach ein Blob-Objekt damit

 //Save file if (isMicrosoftIE()) { csvData = decodeURIComponent(csv); if(window.navigator.msSaveBlob){ var blob = new Blob([csvData],{ type: "application/csv;charset=utf-8;"}); navigator.msSaveBlob(blob, filename); } } else { csvData = "data:application/csv;charset=utf-8," + encodeURIComponent(csv); $(this).attr({ "href": csvData, "target": "_blank", "download": filename }); } 

Und es funktioniert für mich!

Zwei alternative Lösungen werden hier erklärt: http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

Der Hauptunterschied, den ich feststellen kann, ist, dass der Iframe denselben Ursprung hat wie die Originalseite, was nicht wünschenswert ist (ich bin unsicher bezüglich der Sicherheitsimplikationen, zB was der Referer oder die Cookies für geladene Ressourcen sein mögen).

Ein Beispiel für die Verwendung der javascript: scheme-Methode finden Sie hier: http://jsbin.com/uhenuz/4 (Wenn Sie mit https verwendet werden, benötigen Sie zusätzliches googeln und gute Tests, um zu überprüfen, ob eine gemischte https / http-Warnung nicht angezeigt wird.)

Ich bin hier, während ich nach einer Möglichkeit gesucht habe, die Daten uri-Unterstützung von Dateien zu erkennen (PDFs in meinem Fall). Der Modernizr-Ansatz, nach Bildunterstützung zu suchen, war nicht gut genug, da Internet Explorer 11 und Edge 25 dies unterstützen, aber Dateitypen wie application / pdf nicht unterstützen. Snekses Ansatz, nach dem Download-Attribut zu suchen, funktionierte auf IE, aber nicht auf Edge. Schließlich schrieb ich mein eigenes Feature-Erkennungsskript mit einem AJAX-Aufruf, um zu versuchen, einen Daten-URI zu öffnen und auf Fehler zu prüfen. Dies ist das Skript, das ich verwendet habe (getestet in IE 11, Edge 25, Firefox 46 und Chrome 49):

 checkDataURISupport(function (checkResult) { if (checkResult) { alert('Files in data URIs are supported.'); } else { alert('Files in data URIs are NOT supported.'); } }) function checkDataURISupport(callback) { try { var request = new XMLHttpRequest(); request.onload = function reqListener() { callback(true); }; request.onerror = function reqListener() { callback(false); }; request.open('GET', 'data:application/pdf;base64,cw=='); request.send(); } catch (ex) { callback(false); } } 

Aktualisieren

Ich erkannte, dass jeder Code, der auf Daten-URI testet, iFrame-Unterstützung auch testet, um das Öffnen eines Daten-URI in einem neuen Fenster zu unterstützen. Daher ist die in dieser SO-Antwort erwähnte und in Snekses Antwort-Update verlinkte Lösung technisch überlegen und ich würde empfehlen, sie anstelle des obigen Codes zu verwenden.