web-dev-qa-db-fra.com

Problèmes de partage de ressources IE10 et Cross-Origin (CORS) avec Image / Canvas

J'avais l'impression qu'Internet Explorer 10 supportait pleinement CORS, mais maintenant je ne suis pas sûr.

Nous avons une application JS/HTML5 qui utilise plusieurs domaines et lit les données d'image. Nous chargeons des images dans le JS à partir d'un autre domaine, imageDraw () ing l'image sur notre canevas, puis utilisons getImageData sur le canevas. (Nous n'utilisons pas XMLHttpRequests inter-domaines). Pour que cela fonctionne, nous avons dû définir des en-têtes de réponse sur le serveur qui sert les images:

access-control-allow-Origin: *
access-control-allow-credentials: true

Et définissez ceci sur l'objet image dans le JS avant le chargement:

image.crossOrigin = 'Anonymous'; //Also tried lowercase

Cela fonctionne très bien pour tous les nouveaux navigateurs, à part IE10 qui génère des erreurs de sécurité lorsque nous essayons de lire les données. 

SCRIPT5022: SecurityError

Y a-t-il quelque chose de plus à faire pour qu'IE10 traite ces images interdomaines comme ne ternissant pas?

METTRE À JOUR:

J'ai remarqué cette réponse à une question précédente. Fait intéressant ce JSFiddle ne fonctionne pas non plus pour IE10 - quelqu'un peut-il confirmer que cela ne fonctionne pas dans son IE10?

javascripthtmlinternet-explorercors
25
UpTheCreek

Malheureusement, IE10 reste le seul navigateur populaire qui ne prend pas en charge CORS pour les images dessinées sur Canvas même lorsque les en-têtes CORS sont correctement définis. Mais il existe une solution pour cela via XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();
25
RReverser

Confirmé: IE10 ne prend pas en charge les images CORS dans un canevas HTML 5. Voir réponse de RReverser pour une solution de contournement.

Éditer

Désolé, je n'ai jamais traité d'images CORS auparavant et j'ai pensé que cette question concernait une demande AJAX.

Selon Mozilla Developer Network vous devez définir image.crossOrigin à anonymous ou use-credentials. De plus, selon cette page aujourd'hui, ces attributs ne sont pas pris en charge dans IE, Safari ou Opera. Ce test a été fait pour démontrer qu'IE9 ne le supportait pas et il semble que le même test échoue toujours dans IE10, donc même si Safari et Opera ont ajouté le support depuis le L'article de MDN a été écrit, il est fort possible qu'IE10 manque toujours de support.

Le seul conseil que je puisse vous donner est qu'en général, allow-credentials est incompatible avec un caractère générique allow-Origin. Supprimez les informations d'identification autorisées ou faites écho à l'origine de la demande dans l'autorisation d'origine.

Ci-dessous est pour les appels AJAX, pas les ressources d'image ou de canevas vidéo

Les premières versions d'IE10 étaient connues pour avoir AJAX bugs,

cela pourrait donc être un autre bug du navigateur. Là encore, CORS est trompeusement délicat pour aller droit. Je recommande les étapes suivantes pour déboguer les problèmes CORS.

  1. Pointez le navigateur sur http://test-cors.appspot.com/#technical pour obtenir un rapport de compatibilité. Si quelque chose échoue, vous avez un bogue ou un manque de prise en charge de CORS dans le navigateur.
  2. Si tout réussit, utilisez les en-têtes CORS que le test envoie comme point de départ pour faire fonctionner votre demande CORS. Ensuite, modifiez un en-tête à la fois et retestez jusqu'à ce que vous obteniez les en-têtes comme vous le souhaitez pour votre application ou que vous rencontriez un échec que vous ne pouvez pas expliquer ou contourner.
  3. Si nécessaire, postez une question sur ce petit changement qui rompt la demande CORS, en affichant à la fois le travail "avant" et l'échec "après". Il est toujours utile d'inclure un exemple exécutable.

Le code complet du client et du serveur de test CORS (script Python pour Google App Engine) est disponible à https://github.com/rapportive-oss/cors-test pour vous aider à démarrer.

7
Old Pro