¿Por qué canvas.toDataURL() lanza una excepción de seguridad?

Canvas.toDataURL(): El método canvas.toDataURL() devuelve el URI (Uniform Resource Identifier) ​​del recurso web. Consiste en una imagen representada en el formato especificado por el parámetro de tipo cuyo valor predeterminado es PNG. 

Sintaxis: 

Canvas.toDataURL(type, encoderOptions);

• type:  Es un atributo opcional que contiene DOMString comentando sobre el formato de la imagen. Su valor predeterminado es PNG. 
• encoderOptions :   Consiste en un valor numérico entre 0 y 1 utilizado para indicar la calidad de la imagen a utilizar para los distintos formatos de imagen. Su valor por defecto es 0,92. 

Excepciones de seguridad:  las excepciones de seguridad se lanzan si el elemento del lienzo no está limpio desde el origen, es decir, si su bandera de limpieza desde el origen no está configurada. (Falso). En otras palabras, si el elemento canvas consta de contenido externo, entonces la seguridad está en juego y se produce la excepción SECURITY_ERR. En el momento en que el lienzo se usa para dibujar datos que no siguen las reglas relacionadas con el origen y sin usar el mecanismo CORS (intercambio de recursos de origen cruzado), se contamina. El lienzo contaminado no se considera seguro. Los intentos de recuperar datos de imagen del lienzo provocarán un error indicado por las excepciones de seguridad. Junto con toDataURL(), llamar a métodos como toBlob() y getImageData() también generará tipos de errores similares. 
Estas excepciones se utilizan para proteger a los usuarios de la exposición de sus datos privados sin su permiso previo. Dado que las imágenes se pueden usar para capturar información de sitios web, el uso de excepciones es imprescindible. 

Ejemplo: elemento Canvas que produce la excepción.

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function () {
  
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
  
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);
  
        var dataURL = canvas.toDataURL("image/png");
  
         
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
  
    };
}

Salida:  este tipo de errores de seguridad se producen cuando se intenta manipular una imagen en el lienzo que no está autorizada para ser manipulada en el código. Estos errores son causados ​​por el encabezado Access-Control-Allow-Origin de una solicitud, que el servidor ha aprobado. Dado que la imagen pertenece a otro dominio, la mayoría de los navegadores muestran anomalías al acceder a ellos, lo que genera una brecha de seguridad importante. 

Uncaught Security Error: Failed to execute ‘toDataURL’ on 
‘HTMLCanvasElement’: tainted canvases may not be exported.

Solución para el problema anterior:   una imagen tiene un atributo conocido como origen cruzado que se especifica en HTML y, al combinarlo con un encabezado CORS adecuado, se puede cargar desde orígenes extranjeros para usarse en el lienzo comportándose como perteneciente al origen actual. Si no se toma la aprobación de CORS, el lienzo se contamina y no queda ninguna disposición para extraer datos del lienzo. Por lo tanto, métodos como toBlob() , toDataURL() o getImageData() no se pueden usar sin generar errores de seguridad. Estos errores se pueden prevenir configurando el atributo crossorigin de la imagen usando Javascript o HTML 

Ejemplo: 

• HTML:

<img src="otherdomain.com"/>

• JavaScript: 

  var image = new Image();
  image.crossOrigin = "Anonymous";
  ...

Nota: este enfoque solo puede funcionar cuando la respuesta del servidor tiene el siguiente encabezado Access-Control-Allow-Origin. De lo contrario, la política de intercambio de recursos entre orígenes bloqueará la carga de la imagen del origen ‘otherdomain.com’. 

Dado que el problema es que la imagen no pertenece al dominio actual, se puede crear un proxy con el idioma del servidor similar a mostrar contenido HTTP en contenido HTTPS, lo que le brinda un entorno seguro.