data - Esquema de URI de datos e errores de Internet Explorer 9

image url to base64

Question

Tengo un problema al usar el esquema de URL de datos RFC 2397 con las versiones IE 6-9. Mi código de ejemplo a continuación funciona sin problemas cuando se usan las versiones actuales de Safari, FF, Opera y Chrome.

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g

o

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

Si el código anterior se pega en casi cualquier navegador, excluyendo IE, navegará a google.com, cuando intente con IE falla con el siguiente error.

La página web no se puede mostrar

La causa más probable es:

• Algunos contenidos o archivos en esta página web requieren un programa que no tiene instalado.

Lo que puede intentar:

Busque en línea un programa que puede usar para ver este contenido web.

Vuelve a escribir la dirección.

Al inspeccionar el origen de la página de la página de error de IE generada, hay un enlace que hace referencia a Asociaciones de archivos y protocolos.

Tipo de protocolo:

Descripción: Desconocido

Windows no reconoce este protocolo.

Me doy cuenta de que el uso del protocolo data: probablemente no sea la opción más directa o, en la mayoría de los casos, la mejor, pero debo usarla para este proyecto en particular.

He buscado una solución e intenté muchos ejemplos con IE esperando que fuera mi sintaxis, pero aún he encontrado una solución.

Answer 1

Aquí se explican dos soluciones alternativas: http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

La principal diferencia que puedo decir es que el iframe tiene el mismo origen que la página original, lo que podría no ser deseable (no estoy seguro de las implicaciones de seguridad, por ejemplo, qué podría ser el referer o las cookies para los recursos cargados).

Un ejemplo del uso de la técnica javascript: scheme está aquí: http://jsbin.com/uhenuz/4 (Si se usa con https necesitaría Google adicional y buenas pruebas para verificar que la advertencia https / http mixta nunca aparezca).

Answer 2

Internet Explorer es compatible con los http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx (el recurso está un poco desactualizado). Sin embargo, tiene algunas consideraciones de seguridad que le impiden permitir intentos maliciosos para redirigir a los usuarios, o permiten a los piratas informáticos participar en el phishing sin requerir scripts de terceros o recursos alojados.

Esto significa que puedes usarlo con JavaScript:

<script src="data:text/javascript;base64;YWxlcnQoIldvcmtzIik7"></script>

Hojas de estilo en cascada (con o sin codificación base64):

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtjb2xvcjpncmVlbn0=">
<link rel="stylesheet" href="data:text/css,body%7Bcolor:green%7D">

O incluso imágenes:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAg
AAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAE
AAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwo
LCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBUUFBQUFBQUDxQ
QFBUUExUVFBQUEBUUFQ4UFBQUEhISDxURFQ8SFRQSEBAQDQ8P/8AAEQgAGwAbAwERAAIRAQMRAf/EABg
AAAMBAQAAAAAAAAAAAAAAAAUHCAIG/8QAKxAAAQMDAwMDAwUAAAAAAAAAAQIDBAUGEQASIQciMQgTFEF
RgRVhcaHD/8QAGQEAAwEBAQAAAAAAAAAAAAAABAUGBwMC/8QALxEAAQMCAgcHBQEAAAAAAAAAAQACAwQ
RBSESMUFRYZHBEyJxobHR4RVDgfDxFP/aAAwDAQACEQMRAD8AGdeKdd3Um670bjz0waNQpzVKpVOWtSE
uqSgKefIztKipQwSOU4wRjuBq6tj52h2YTbA8Nkp6UmMaLzzS1sz0ru1qqNyrkrqWIiMrfjsjctw4HGT
wM/ngaEmxJjBaNqdRYPJpaczr8FTXRY1h7p9dVg1GpSZzNBkobYcec3qfgup9xjefqUqQ4n+ED651RYf
Utla2UjMKBx6hdTvdEw2ac7JR13psz+rytkUqTv8AITq1bVZDNZo6ncCQFYFH9O1vS+lVrOW1bD0REtl
uW8hi45Ty0hSAUkOrKlLyNvA27eBnCdZbUxNv3GjkFudDWvved55k9QpI9S0y7ujfqUk2jZ4bcaetuFP
MSSFyENrW84h1zevcvOEgZzj9hnQ76aAQh0+Wezw1JjR1dVPO5kJuNxJ360Stj1LU/ooqREuuA9Krs4s
LqM2A0lbDSACG0kDlRTlZKUjHJx5xplhjWui7mq+Xkk2PhxqgDrDRfxuUmL89awuO8KrUU202lDz3Z7K
vbSpIASlW3ZwSACR9ydUsc/ZtDBs4qLkw4TPMjjmeCGSurEun2rRqJBvStJq5U6iSiLUZHx0BKRtQ2pT
hJwPBASnggDxqUjDzdxBtx+PlaTpQEhha38DqegCM2PdL6apMrkyHKn1FuIiOuoyCpbiEA57nFLVkcnC
OAST4OgqqMygMLsr6lQUZigvIxlstdv3pdbqsGy7nn1ym3pcEy3am06hwvsKZMYtrYQUZK1pVu2r5SkK
APPGjIJXQQt7Jml/VJ4lCKmre50lj8JYVDopYQmu/GviZJYz2OtQS6lQ+4UlZB/B16+oz7YDzCB/wsH3
fJIx+W8qRKWXFbxIUQrPPCiB/QGmLNQQriS4lODo1Mk1/qBQaJUJcmVSXJrYXEW+v21dw8gHnQNaBHA6
Ros62tOaKV8kjY3OJbuWrXkya/wBV6z8ubMCn1y1OLjSnI61YXwNzaknaMDtzjgccDXKoPZUzdEDZsB9
UFGTJO7SO/wBV0kq3mRIcHzaue4+axLP+uk/bO3DkPZMxE3jzPuv/2Q==">

Sin embargo, no puede usarlos con window.open o iframe , ya que esto permitiría algunas cosas muy peligrosas, incluyendo Phishing con URI de datos :

<iframe src="data:text/html;base64,PGJ1dHRvbiBpZD0iX3BheXBhbCI+TG9nIGludG8gUGF5cG
FsPC9idXR0b24+DQo8c2NyaXB0Pg0KICAgIF9wYXlwYWwuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB
mdW5jdGlvbiAoKSB7DQogICAgICAgIGFsZXJ0KCJUaGlzIGNvdWxkIGhhdmUgYmVlbiB1Z2x5IGZvciB5
b3UuLi4iKTsNCiAgICB9LCBmYWxzZSk7DQo8L3NjcmlwdD4="></iframe>

Este último ejemplo bien podría haber sido una réplica completa de la pantalla de inicio de sesión de PayPal. En cambio, es solo un botón HTML con un manejador de eventos vinculado y escuchando por los clics. Piratería similar podría venir por window.open :

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

De modo que Internet Explorer 10 es compatible con esta característica, pero protege al usuario final de aquellos que lo usarían maliciosamente. Estoy seguro de que Microsoft levantará con mucho gusto esta restricción cuando determinen una forma mejor de proteger su base de usuarios.

Hasta que las cosas cambien, debe encontrar otra forma de incluir sus archivos FLV. En una nota lateral, es posible que no desee compartir datos reales como este desde su aplicación en .

Answer 3

Llegué aquí mientras buscaba una manera de mostrar la detección de soporte de archivos de datos uri (archivos PDF en mi caso). El enfoque de Modernizr de buscar compatibilidad con imágenes no fue lo suficientemente bueno, ya que Internet Explorer 11 y Edge 25 sí lo admiten, pero no admiten tipos de archivos como application / pdf. El enfoque de Snekse para verificar el atributo de descarga funcionó en IE pero no en Edge. Eventualmente, escribí mi propia secuencia de comandos de detección de características usando una llamada AJAX para intentar abrir un URI de datos y buscar errores. Este es el script que utilicé (probado en IE 11, Edge 25, Firefox 46 y 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);
    }
}

Actualizar

Me di cuenta de que cualquier código que esté probando el URI de datos es el soporte de iframe que también está probando para admitir la apertura de un URI de datos en una nueva ventana. Por lo tanto, la solución mencionada en esta respuesta SO y vinculada a la actualización de respuesta de Snekse es técnicamente superior y recomendaría usarla en lugar del código anterior.

Answer 4

Los URI de datos no se pueden usar para navegar, para crear scripts o para llenar elementos de marcos o iframes en IE.

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

Los URI de datos solo son compatibles con los siguientes elementos y / o atributos.

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

Los URI de datos se pueden anidar.

Por razones de seguridad, los URI de datos están restringidos a los recursos descargados. Los URI de datos no se pueden usar para navegación , scripts ni para llenar elementos frame o iframe.

Los URI de datos no pueden tener más de 32.768 caracteres.

Los datos de recursos deben estar codificados adecuadamente; de lo contrario, se produce un error y el recurso no se carga. Los caracteres "#" y "%" deben estar codificados, así como los caracteres de control, caracteres ASCII no estadounidenses y caracteres multibyte.

Para obtener más información, vea RFC2397: El esquema de URL de "datos".

Disponible a partir de Windows Internet Explorer 8 o posterior. **

Answer 5

Para mí, encontrar document.execCommand fue un salvavidas. Utiliza iFrame como algunos de los otros ejemplos, pero execCommand hace que la funcionalidad Save As consistente.

Aquí hay un ejemplo

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.'');
    }
  }
};

Hacemos esto para IE y para todos los demás navegadores usamos el enlace de URI de datos estándar. Puedes ver la esencia completa para más detalles. Un consejo de sombrero para Andrew Blondeau para la dirección .

ACTUALIZAR

Una forma mejor de determinar si el navegador admite un URI de datos

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

También parece que IE todavía tiene problemas. Para IE10 + es posible que necesite usar msSaveOrOpenBlob y para IE8 / 9 aún necesita execCommand en un iFrame .

ACTUALIZACIÓN 2

Existe un problema de Modernizr para detectar el esquema de uri de datos. Hace referencia a otra respuesta SO . Asegúrate también de verificarlos.

Answer 6

Según la respuesta de Franco aquí: Exportación de archivos CSV para IE

Simplemente crea un objeto Blob con él

//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
    });
}

¡Y funciona para mi!