Pourquoi n'toile.toDataURL() lancer une exception de sécurité?

N'ai-je pas obtenir suffisamment de sommeil ou quoi? Ce code suivant

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

est de lancer cette erreur: 

SECURITY_ERR: DOM Exception 18

Il n'y a aucune façon cela ne devrait pas fonctionner! Quelqu'un peut-il expliquer cela, s'il vous plaît?

InformationsquelleAutor pop850 | 2010-03-05
  1. 67

    Dans le spécifications il dit:

    Chaque fois que le toDataURL() la méthode de l'
    toile élément dont l'origine-propre drapeau
    est définie sur false est appelée, la méthode
    doit soulever un SECURITY_ERR exception.

    Si l'image provient d'un autre serveur, je ne pense pas que vous pouvez utiliser toDataURL()

    • merci beaucoup! comme Mike R. je ne peux pas imaginer comment cela pourrait être lié à la sécurité! 🙂
    • Si un attaquant est capable de deviner le nom d'une image que vous avez dans un site privé, il serait en mesure d'obtenir une copie de celui-ci par de la peinture sur une toile et de l'envoi de la nouvelle image de son site. La principale restriction de mon point de vue est pour éviter d'attirer le contenu d'un autre site, mais la sécurité est trop complexe, l'attaquant peut trouver un trou dans tout site inattendu.
    • Notez que le sous-domaine du domaine. Dans mon expérience, au Chrome, au moins, un SECURITY_ERR: DOM Exception 18 est déclenché lors d'un appel qui est perçu à travers les sous-domaines: 1. dans example.com/some/path/index.html pour une vidéo ou une image dans foo.example.com 2. lorsqu'il va à la même page que dans le 1 mais en entrant l'URL example.com/some/path/index.html et puis essayez d'appeler toDataUrl() pour une vidéo ou une image dans http://www.example.com
    • peut-être que je me trompe, mais "Si un attaquant est capable de deviner le nom d'une image que vous avez dans un site privé" probablement qu'il va saisir l'image avec une boucle non avec un navigateur. De mon point de vue: l'URL Publique de Publique de Contenu.
    • Je suis confronté à ce problème même si j'ai l'utilisation de données d'URL. Est-il possible que je peux contourner ce pour les données d'Url?
    • disons que j'ai une toile de tenir mon image du presse-papiers. Dites-vous que je ne peux utiliser toDataURL()? S'il vous plaît conseils.
    • Cette restriction existe pour empêcher un attaquant de provoquer un votre navigateur (cookies d'authentification) pour aller chercher une image et l'envoyer à son contenu à un attaquant; l'attaquant n'a pas vos cookies, donc il ne peut pas utiliser curl pour obtenir les mêmes ressources que vous êtes autorisé à obtenir. "URL publique de, Publique de Contenu" est plutôt une façon erronée de penser: mon Facebook page a face au public, les composants, mais il ya beaucoup de qui est seulement accessible avec le bouton droit de jeton d'authentification.
    • C'est la raison pour bur où est le soloution?

    InformationsquelleAutor Bob
  2. 17

    Réglage de l'origine de la croix de l'attribut sur les objets de l'image a fonctionné pour moi (j'ai été en utilisant fabricjs)

        var c = document.createElement("img");
    c.onload=function(){
        //add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

    Pour ceux qui utilisent fabricjs, voici la façon de corriger l'Image.fromUrl

    //patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};
    • Merci, ça fonctionne pour moi sur Chrome. Je ne suis pas à l'aide de fabric.js si
    • Je ne l'utilisation de fabricjs, mais ne pouvait pas résoudre. Comment voulez-vous faire avec ce code? fonction wtd_load_bg_image( img_url ) { if( img_url ) { var bg_img = new Image(); bg_img.onload = function() { canvasObj.setBackgroundImage(bg_img.src, canvasObj.renderAll.bind(canvasObj), { originX: "gauche", originY: 'top', à gauche: 0, top: 0 }); }; bg_img.src = img_url; } }
    • Fonctionne dans Firefox et.
    InformationsquelleAutor Philip Nuzhnyy
  3. 16

    Si l'image est hébergée sur un ordinateur hôte qui définit soit de Access-Control-Allow-Origin ou Access-Control-Allow-les informations d'Identification, vous pouvez utiliser de la Croix-Origin Resource sharing (SCRO). Voir ici (la crossorigin attribut) pour plus de détails.

    Votre autre option est de votre serveur pour avoir un point de terminaison qui récupère et sert une image. (eg. http://your_host/endpoint?url=URL)
    L'inconvénient de cette approche étant de latence et théoriquement inutile de la chercher.

    S'il y a plus d'autres solutions, je serais intéressé à entendre parler d'eux.

    • Salut, je n'ai que ça, j'ai Access-Control-Allow-Origin: * sur les images, j'ai crossorigin= "anonymes", puis j'ai peint l'image sur toile, puis-je appeler toDataUrl et je suis encore en train de la SECURITY_ERR: DOM Exception 18
    • Tout à droite, utilisez setAttribute au lieu de img.crossorigin
    InformationsquelleAutor James Foster
  4. 13

    Semble qu'il y est un moyen de prévenir que si d'hébergement d'images en mesure de fournir les en-têtes HTTP suivant pour l'image des ressources et le navigateur prend en charge la SCRO:

    access-control-allow-origin: * 
access-control-allow-pouvoirs: vrai

    Il est dit ici: http://www.w3.org/TR/cors/#use-cases

    InformationsquelleAutor DitherSky
  5. 4

    J'ai enfin trouvé la solution. Juste besoin d'ajouter le crossOrigin comme troisième paramètre dans fromURL func

    fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });
    InformationsquelleAutor jose920405
  6. 2

    J'ai eu le même problème et toutes les images sont hébergées dans le même domaine... Donc, si quelqu'un a le même problème, voici comment j'ai résolu:

    J'ai eu deux boutons: l'un pour générer de la toile et un autre pour générer l'image de la toile. Il n'a travaillé que pour moi, et désolé que je ne sais pas pourquoi, quand j'ai écrit tout le code sur le premier bouton. Alors, quand je clique il génère de la toile et l'image en même temps...

    J'ai toujours ce problème de sécurité lorsque les codes ont été sur différentes fonctions... =/

    InformationsquelleAutor CarinaPilar
  7. 2

    J'ai été capable de le faire fonctionner à l'aide de ceci:

    Écrire sur la première ligne de votre .htaccess sur votre serveur source

    Header add Access-Control-Allow-Origin "*"

    Puis lors de la création d'un <img> élément, procédez comme suit:

    //jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

//or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');
    InformationsquelleAutor Qwerty
  8. 1

    Vous ne pouvez pas mettre des espaces dans votre ID

    Mise à jour

    Ma conjecture est que l'image est sur un serveur différent de celui où vous êtes à l'exécution du script. J'ai été en mesure de reproduire votre erreur lors de l'exécution sur ma propre page, mais il a bien fonctionné le moment j'ai utilisé une image hébergée sur le même domaine. Il est donc lié à la sécurité - mettre l'image sur votre site. Quelqu'un sait pourquoi c'est le cas?

    InformationsquelleAutor Mike Robinson
  9. 0

    Si vous êtes tout simplement de dessiner des images sur une toile, assurez-vous de charger les images à partir du même domaine.

    http://www.example.com est différent de example.com

    Donc, assurez-vous que vos images et l'url que vous avez dans votre barre d'adresse sont les mêmes, www ou pas.

    InformationsquelleAutor JonathanC
  10. 0

    Je suis en utilisant fabric.js et pourrait résoudre ce problème en utilisant toDatalessJSON au lieu de toDataURL:

    canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

    Edit: Nevermind. Dans ce cas, seule l'image d'arrière-plan d'être exportées au format JPG, sans le dessin sur le dessus de sorte qu'il n'était pas forcément utile, après tout.

    InformationsquelleAutor horstwilhelm