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

Al trabajar con lienzos HTML, puede encontrar una excepción de seguridad desconcertante al intentando recuperar la URL de datos base64 del lienzo utilizando el método toDataURL(). Exploremos el motivo detrás de este error y encontremos una solución.

El método toDataURL() le permite convertir el contenido del lienzo en una cadena codificada en base64, que puede ser útil para guardar o compartir una imagen. Sin embargo, es esencial comprender que este método genera una excepción de seguridad si el elemento del lienzo se considera "de origen impuro".

De acuerdo con las especificaciones HTML, un elemento de lienzo se considera de origen impuro si contiene imágenes cargadas desde un servidor diferente al de la propia página web. En su fragmento de código, la imagen se carga desde "www.ansearch.com", que es un origen diferente al de la página web.

Esta restricción de seguridad existe para evitar la contaminación de contenido de origen cruzado, donde un Un sitio web malicioso podría acceder y modificar imágenes de otro sitio web, lo que supone un riesgo para la seguridad. Por lo tanto, al intentar convertir un lienzo con origen sucio en una cadena base64 usando toDataURL(), se generará una excepción SECURITY_ERR.

Para solucionar este problema, puede asegurarse de que la imagen utilizada en el lienzo se carga desde el mismo origen que la página web. Esto significa alojar la imagen en su propio servidor o utilizar una CDN que proporcione la imagen desde el mismo origen. Una vez que la imagen se carga desde un origen coincidente, el método toDataURL() debería funcionar sin errores.