Schéma de données URI et erreurs Internet Explorer 9

Question

Je rencontre un problème en utilisant le schéma d'URL de données RFC 2397 avec les versions d'IE 6 à 9. Mon code d'exemple ci-dessous fonctionne sans problème lorsque j'utilise les versions actuelles de Safari, FF, Opera et Chrome.

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g

ou

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

Si le code ci-dessus est collé dans presque tous les navigateurs à l'exception d'IE, il naviguera vers google.com. Lorsque vous essayez avec IE, cela échoue avec l'erreur suivante.

La page web ne peut pas être affichée

Cause la plus probable:

• Certains contenus ou fichiers sur cette page web nécessitent un programme que vous n'avez pas installé.

Que pouvez-vous essayer:

Recherchez en ligne un programme que vous pouvez utiliser pour afficher ce contenu web.

Retapez l'adresse.

Lors de l'inspection de la source de la page d'erreur IE générée, il existe un lien qui fait référence aux associations de fichiers et aux protocoles.

Type de protocole:

Description: Inconnu

Windows ne reconnaît pas ce protocole.

Je réalise que l'utilisation du protocole de données n'est probablement pas la façon la plus directe ou dans la plupart des cas la meilleure option, mais je dois l'utiliser pour ce projet particulier.

J'ai cherché partout une solution et j'ai essayé de nombreux exemples avec IE en espérant que c'était ma syntaxe, mais je n'ai pas encore trouvé de solution.

Answer 1

Les URI de données ne peuvent pas être utilisées pour la navigation, pour le script ou pour remplir des éléments de cadre ou d'iframe dans IE.

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

Les URI de données sont prises en charge uniquement pour les éléments et/ou attributs suivants.

object (images only)
img
input type=image
link
Déclarations CSS qui acceptent une URL, telles que background, backgroundImage, et ainsi de suite.

Les URI de données peuvent être imbriquées.

Pour des raisons de sécurité, les URI de données sont limitées aux ressources téléchargées. Les URI de données ne peuvent pas être utilisées pour la navigation, pour le script, ou pour remplir des éléments de cadre ou d'iframe.

Les URI de données ne peuvent pas dépasser 32 768 caractères.

Les données de la ressource doivent être correctement encodées; sinon, une erreur se produit et la ressource n'est pas chargée. Les caractères "#" et "%" doivent être encodés, ainsi que les caractères de contrôle, les caractères non-ASCII et multi-octets.

Pour plus d'informations, voir RFC2397: Le schéma d'URL "data".

Disponible à partir de Windows Internet Explorer 8 ou ultérieur.**

Answer 2

Pour moi, trouver document.execCommand a été un sauveur de vie. Il utilise l'iFrame comme certains des autres exemples, mais execCommand rend la fonctionnalité Enregistrer sous plus cohérente.

Voici un exemple

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

Nous le faisons pour IE et pour tous les autres navigateurs, nous utilisons le lien standard de l'URI de données. Vous pouvez consulter le gist complet pour plus de détails. Un grand merci à Andrew Blondeau pour la direction.

---

MISE À JOUR

Une meilleure façon de déterminer si le navigateur prend en charge une URI de données

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

Il semble également que IE rencontre toujours des problèmes. Pour IE10+, vous devrez peut-être utiliser msSaveOrOpenBlob et pour IE8/9, vous devez toujours utiliser execCommand dans un iFrame.

MISE À JOUR 2

Il y a un problème Modernizr pour détecter le schéma d'URI de données. Il fait référence à une autre réponse SO. Assurez-vous également de les consulter.

Answer 3

Internet Explorer prend en charge les URI de données (la ressource est un peu obsolète). Cependant, il présente certaines considérations de sécurité qui l'empêchent de permettre toute tentative malveillante de rediriger les utilisateurs, ou de permettre aux pirates de se livrer à du phishing sans nécessiter de scripts tiers ou de ressources hébergées.

Cela signifie que vous pouvez l'utiliser avec JavaScript:

Feuilles de style en cascade (avec ou sans codage base64):

Ou même des images:

Cependant, vous ne pouvez pas les utiliser avec window.open ou iframe, car cela permettrait des choses très dangereuses, y compris le phishing avec les URI de données:

Cet dernier exemple aurait très bien pu être une réplique complète de l'écran de connexion PayPal. Au lieu de cela, c'est juste un bouton HTML avec un gestionnaire d'événements lié et en attente de clics. Des manipulations similaires pourraient se produire avec window.open:

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

Ainsi, Internet Explorer 10 prend en charge cette fonctionnalité, mais protège l'utilisateur final de ceux qui pourraient l'utiliser de manière malveillante. Je suis sûr que Microsoft lèvera volontiers cette restriction quand et si elle trouvera un meilleur moyen de protéger sa base d'utilisateurs.

En attendant que les choses changent, vous devez trouver un autre moyen d'inclure vos fichiers FLV. En passant, vous ne voudrez peut-être pas partager des données réelles comme celles-ci de votre application sur Stack Overflow.

Answer 4

Selon la réponse de Franco ici: Exportation de fichiers CSV pour IE

Il suffit de créer un objet Blob avec lui

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

Et cela fonctionne pour moi!

Answer 5

Deux solutions alternatives sont expliquées ici : http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

La principale différence que je peux voir est que l'iframe a la même origine que la page d'origine, ce qui peut ne pas être souhaité (je ne suis pas sûr des implications en termes de sécurité, par exemple quel pourrait être le referer ou les cookies pour les ressources chargées).

Un exemple de l'utilisation de la technique du schéma javascript est ici : http://jsbin.com/uhenuz/4 (Si utilisé avec https, il faudrait faire des recherches supplémentaires et effectuer de bons tests pour vérifier que l'avertissement mixte https/http ne peut jamais apparaître.)