Решение ошибки SECURITY_ERR: DOM Exception 18 в canvas.toDataURL()

Быстрый ответ

Исключение безопасности при использовании canvas.toDataURL() чаще всего связано с "загрязнившимя" холстом из-за политики единого источника. Чтобы решить эту проблему, убедитесь, что изображения загружаются с того же домена. Если же используются внешние ресурсы, примените CORS и заранее установите атрибут crossOrigin в "anonymous". Это поможет избежать "загрязнившегося" холста и гарантирует безопасную передачу данных.

var img = new Image();
img.crossOrigin = "anonymous";  // Важно: используйте CORS, чтобы избежать ошибок!
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL();  // Успеха вам 🎉
};
img.src = 'https://cors-domain.com/image.png';  // Сервер должен поддерживать CORS!

Следите за тем, чтобы флаг чистоты источника был установлен в true, это позволит избежать возможных проблем с безопасностью при вызове toDataURL().

Разъяснение политики единого источника и "загрязнённости" холста

Политика единого источника (Same-origin policy) – это важная составляющая безопасности веба, ограничивающая взаимодействие между ресурсами различных доменов. Когда холст использует данные из других источников без настройки CORS, это приводит к нарушению данной политики и вызову исключения безопасности с целью предотвращения утечки потенциально конфиденциальной информации.

Используйте fabric.js для взаимодействия с изображениями из различных источников

Библиотека fabric.js поможет управлять кросс-доменными изображениями:

fabric.Image.fromURL('http://cross-origin.com/image.png', function(oImg) {
    // Здесь всё просто: oImg.crossOrigin уже установлен в 'anonymous' за вас!
    canvas.add(oImg);
}, { crossOrigin: 'anonymous' });

Использование таких инструментов избавит вас от проблем с безопасностью при вызове toDataURL() на холсте с изображениями, загруженными через fabric.js.

Настройка сервера для работы с CORS

Если вы контролируете сервер источника, настройте его для поддержки CORS:

Access-Control-Allow-Origin: *

И при необходимости использования учетных данных добавьте:

Access-Control-Allow-Credentials: true

Если использвание CORS невозможно, можно использовать прокси-сервер, который способен проксировать запросы к изображениям, добавляя необходимые заголовки.

Проверка совместимости с браузерами

Следите за совместимостью различных браузеров с CORS, особенно если ваши изображения предназначены для широкой аудитории. Обратите внимание, что отношение к атрибуту crossOrigin и заголовкам CORS может варьироваться в разных браузерах.

Визуализация

Контейнеровоз (🚢), перевозящий упакованные контейнеры (элементы <canvas>):

🚢 Перевозит контейнеры:
- [📦] = Безопасный холст 
- [📦🔒] = "Загрязнённый" холст с содержимым, вызывающим подозрения

Желаете осмотреть закрытый контейнер (canvas.toDataURL())?

🔒👀 Внимание таможни:
- [📦 -> 🖼️] = Можно получить данные холста
- [📦🔒 -> ❌] = Доступ закрыт: нарушение политики безопасности

Почему столько ограничений? Политика кросс-доменности помогает предотвратить утечку данных.

Иностранный порт (🌐): Источники с других доменов – потенциальная угроза.
Местный порт (🏠): Ваш домен, который считается безопасным.

Морской маршрут для обхода ограничений:

1. [📦] из Местного порта (🏠): Данные доступны 📸
2. [📦🔒] из Иностранного порта (🌐): Доступ запрещён 🚫

Эти правила гарантируют безопасность вашего "порта".🛡️

Когда CORS кажется сложной задачей

Если настройка сервера или использование прокси невозможны, рассмотрите следующие варианты:

• Разместите необходимые ресурсы непосредственно на вашем домене, если это возможно.
• Используйте сети доставки контента (CDN) с поддержкой CORS.
• Храните копии изображений на своем сервере, чтобы вы могли корректно настраивать заголовки.

Полезные материалы

1. Метод toDataURL() объекта HTMLCanvasElement — Веб-API | MDN – Подробное описание метода toDataURL().
2. Нельзя экспортировать загрязнённые холсты – Stack Overflow – Обсуждение ошибок безопасности, связанных с холстами.
3. HTML стандарт – Детальное рассмотрение вопросов безопасности, связанных с элементами холста.
4. Кросс-доменное использование изображений и холстов – HTML: HyperText Markup Language | MDN – Руководство по обходу проблем кросс-доменности в HTML.
5. Политика безопасности контента (CSP) – HTTP | MDN – Введение в Политику безопасности контента для усиления безопасности холстов.
6. Включение CORS – Помощь в настройке CORS на сервере.