Pourquoi `canvas.toDataURL()` lance-t-il un `SECURITY_ERR` lors du dessin d'images d'une origine différente ?

Comprendre l'exception de sécurité dans 'canvas.toDataURL()'

Considérez le code suivant :

<pre class="brush:php;toolbar:false">
var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

Ce code tente de convertir un élément de canevas en une URL de données à l'aide de la méthode 'toDataURL()'. Cependant, cela entraîne une erreur 'SECURITY_ERR: DOM Exception 18'.

La raison de cette erreur provient des restrictions de sécurité imposées par les navigateurs Web. Selon les spécifications HTML Canvas, si l'image dessinée sur le canevas provient d'une origine différente (dans ce cas, de « http://www.ansearch.com »), le navigateur empêchera la conversion du canevas en une URL de données. Ceci est fait pour empêcher l'accès aux données d'origine croisée et les vulnérabilités de sécurité potentielles.

Par conséquent, si vous essayez de générer une URL de données à partir d'un élément de canevas contenant une image d'une origine différente, vous rencontrerez ce problème de sécurité. exception. Pour résoudre ce problème, vous devez vous assurer que l'image provient de la même origine que votre application Web ou explorer des méthodes alternatives de conversion d'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!