Autorisations de ressources d'image interdomaines (image compatible CORS)

Le document de spécification HTML introduit l'attribut crossorigin pour les images. En définissant les informations d'en-tête CORS appropriées, les images img peuvent être chargées à partir d'autres sites et utilisées dans le canevas, tout comme téléchargées directement à partir du site actuel (origine actuelle).

Pour plus de détails sur l'utilisation des attributs crossorigin, veuillez vous référer aux attributs des paramètres CORS.

Bien qu'il soit possible d'utiliser des images dans le canevas sans autorisation CORS, cela entacherait le canevas. Tant que le canevas est contaminé, les données ne peuvent plus être extraites du canevas, ce qui signifie que des méthodes telles que toBlob(), toDataURL() et getImageData() ne peuvent pas être appelées, sinon une erreur de sécurité sera générée.

Il s'agit en fait de protéger les informations personnelles des utilisateurs et d'éviter de charger les informations d'image des utilisateurs à partir de sites Web distants sans autorisation, provoquant ainsi des fuites de confidentialité.

(Note du traducteur : si l'utilisateur s'est connecté à des sites de réseaux sociaux tels que QQ, si aucune protection n'est fournie, le site Web peut utiliser Canvas pour obtenir et télécharger les informations sur l'image de l'utilisateur après l'ouverture d'un site Web, provoquant ainsi une fuite.)

Tout d’abord, le serveur d’images doit définir l’en-tête de réponse Access-Control-Allow-Origin correspondant. Ajoutez l'attribut crossOrigin de l'élément img à l'en-tête de la requête. Par exemple, le serveur Apache peut copier les informations de configuration dans les configurations du serveur HTML5 Boilerplate Apache pour répondre :

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin : IS_CORS Ensemble d'en-tête Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

Une fois ces paramètres pris en compte, vous pouvez enregistrer des images d'autres sites sur le stockage DOM (ou à d'autres endroits), tout comme les ressources de ce site.

 var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Adresse d'image spécifique img.crossOrigin = Anonymous;img. = fonction() { toile.largeur = img.largeur; toile.hauteur = img.hauteur; ctx.drawImage( img, 0, 0 ); localStorage.setItem( savingImageData, canvas.toDataURL(image/png) );}img.src = src;// Assurez-vous que l'image mise en cache déclenche également l'événement de chargement si ( img.complete || img.complete == = non défini ) { img.src = data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==; img.src = src;}

Compatibilité du navigateur

Bureau

Mobile

Voir aussi

Chrome : utilisation d'images d'origine croisée dans WebGL

Attribut de spécification HTML-crossorigin

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.