Почему метод Canvas.toDataURL() выдает исключение безопасности?

При работе с HTML-холстами вы можете столкнуться со сложным исключением безопасности, попытка получить URL-адрес данных холста в формате Base64 с помощью метода toDataURL(). Давайте выясним причину этой ошибки и найдем решение.

Метод toDataURL() позволяет конвертировать содержимое холста в строку в кодировке Base64, что может быть полезно для сохранения или публикации изображения. Однако важно понимать, что этот метод вызывает исключение безопасности, если элемент холста считается «нечистым по происхождению».

Согласно спецификациям HTML, элемент холста считается нечистым по происхождению, если он содержит загруженные изображения. с другого сервера, чем сама веб-страница. В вашем фрагменте кода изображение загружается с сайта «www.ansearch.com», который отличается от веб-страницы.

Это ограничение безопасности введено для предотвращения загрязнения контента из разных источников, когда вредоносный веб-сайт может получить доступ к изображениям с другого веб-сайта и изменить их, что представляет угрозу безопасности. Таким образом, при попытке преобразовать холст с нечистым происхождением в строку base64 с помощью toDataURL() это приведет к исключению SECURITY_ERR.

Чтобы обойти эту проблему, вы можете убедиться, что изображение, используемое на холсте, загружается из того же источника, что и веб-страница. Это означает размещение изображения на вашем собственном сервере или использование CDN, который обслуживает изображение из того же источника. Как только изображение будет загружено из соответствующего источника, метод toDataURL() должен работать без ошибок.