Warum löst canvas.toDataURL() eine Sicherheitsausnahme aus?

Bei der Arbeit mit HTML-Canvases kann es zu einer verwirrenden Sicherheitsausnahme kommen Es wird versucht, die Base64-Daten-URL des Canvas mithilfe der toDataURL()-Methode abzurufen. Lassen Sie uns den Grund für diesen Fehler untersuchen und eine Lösung finden.

Mit der toDataURL()-Methode können Sie den Canvas-Inhalt in eine Base64-codierte Zeichenfolge konvertieren, die zum Speichern oder Teilen eines Bildes nützlich sein kann. Es ist jedoch wichtig zu verstehen, dass diese Methode eine Sicherheitsausnahme auslöst, wenn das Canvas-Element als „origin-unclean“ gilt.

Gemäß den HTML-Spezifikationen gilt ein Canvas-Element als origin-unclean, wenn es geladene Bilder enthält von einem anderen Server als die Webseite selbst. In Ihrem Code-Snippet wird das Bild von „www.ansearch.com“ geladen, was einen anderen Ursprung als die Webseite hat.

Diese Sicherheitsbeschränkung dient dazu, eine herkunftsübergreifende Kontamination von Inhalten zu verhindern, wenn a Eine böswillige Website könnte auf Bilder einer anderen Website zugreifen und diese ändern, was ein Sicherheitsrisiko darstellt. Daher führt der Versuch, eine ursprünglich nicht bereinigte Zeichenfläche mithilfe von toDataURL() in eine Base64-Zeichenfolge zu konvertieren, zu einer SECURITY_ERR-Ausnahme.

Um dieses Problem zu umgehen, können Sie sicherstellen, dass das Bild auf der Zeichenfläche verwendet wird wird vom selben Ursprung wie die Webseite geladen. Dies bedeutet, dass Sie das Image auf Ihrem eigenen Server hosten oder ein CDN verwenden, das das Image vom selben Ursprung bereitstellt. Sobald das Bild von einem passenden Ursprung geladen ist, sollte die toDataURL()-Methode ohne Fehler funktionieren.