Pourquoi `canvas.toDataURL()` génère-t-il une exception de sécurité lors du chargement d'images à partir d'une origine différente ?

Pourquoi canvas.toDataURL() génère-t-il une exception de sécurité ?

Lorsque vous travaillez avec des canevas HTML, vous pouvez rencontrer une exception de sécurité déroutante lors tenter de récupérer l'URL des données base64 du canevas à l'aide de la méthode toDataURL(). Explorons la raison de cette erreur et trouvons une solution.

La méthode toDataURL() vous permet de convertir le contenu du canevas en une chaîne codée en base64, ce qui peut être utile pour enregistrer ou partager une image. Cependant, il est essentiel de comprendre que cette méthode génère une exception de sécurité si l'élément canvas est considéré comme « impur d'origine ».

Selon les spécifications HTML, un élément canevas est considéré comme impur d'origine s'il contient des images chargées. à partir d'un serveur différent de celui de la page Web elle-même. Dans votre extrait de code, l'image est chargée à partir de "www.ansearch.com", qui est une origine différente de celle de la page Web.

Cette restriction de sécurité est en place pour empêcher la contamination du contenu d'origine croisée, où un un site Web malveillant pourrait accéder et modifier les images d’un autre site Web, ce qui présente un risque pour la sécurité. Par conséquent, lorsque vous tentez de convertir un canevas d'origine impur en chaîne base64 à l'aide de toDataURL(), cela entraînera une exception SECURITY_ERR.

Pour contourner ce problème, vous pouvez vous assurer que l'image utilisée sur le canevas est chargé à partir de la même origine que la page Web. Cela signifie héberger l'image sur votre propre serveur ou utiliser un CDN qui sert l'image à partir de la même origine. Une fois l'image chargée à partir d'une origine correspondante, la méthode toDataURL() devrait fonctionner sans aucune erreur.

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!