de contrôle d'accès permettent aux origine question de la charge de l'image

Question

Pourquoi ne pas obtenir problème de contrôle d'accès permettent aux origine lorsque nous avons img tag élément src=urlOfdifferentDomain fait référence à un domaine différent

comme cas: 1

<img src="urlOfdifferentDomain" /> 

mais nous aurons la même erreur quand nous faisons le cas 2

//creating image element 
a=new Image(); 
// image on load function 
a.onload=function(){ 
} 
// assigning src function 
a.src=urlOfdifferentDomain 

Je veux juste savoir quelle est la différence entre ces deux approches. J'affecte également csp img-src dans webserver à self puis également charger l'image depuis un domaine différent dans le cas 1

Answer 1

Le cas 1 est OK car l'utilisation de l'image en HTML n'expose pas la ressource (d'un autre domaine) à JavaScript , donc aucun problème de sécurité n'est causé.

Le cas 2 signale une erreur car l'utilisation de l'objet Image DO présente des risques de sécurité pour certaines opérations telles que l'édition Canvas, car il expose la ressource d'un autre domaine vers JavaScript.

MISE À JOUR: Cette erreur est due au contrôle de sécurité du navigateur. Le serveur Web ne sait pas si la requête provient de la balise html ou de l'appel javascript, et renvoie la ressource quand même - vous pouvez vérifier le panneau de débogage réseau dans le navigateur, et voir que la ressource est téléchargée avec le statut 200. Après le la ressource est téléchargée et exposée à l'opération JavaScript. Le navigateur vérifiera si l'opération JavaScript sur la ressource est vulnérable. Si oui, l'erreur Access-Control-Allow-Origin sera signalée si CORS n'est pas activé dans le serveur.