Por que canvas.toDataURL() lança uma exceção de segurança?

Ao trabalhar com telas HTML, você pode encontrar uma exceção de segurança desconcertante enquanto tentando recuperar o URL de dados base64 da tela usando o método toDataURL(). Vamos explorar o motivo desse erro e encontrar uma solução.

O método toDataURL() permite converter o conteúdo da tela em uma string codificada em base64, o que pode ser útil para salvar ou compartilhar uma imagem. No entanto, é essencial entender que este método gera uma exceção de segurança se o elemento canvas for considerado "origin-unclean".

De acordo com as especificações HTML, um elemento canvas é considerado origin-unclean se contiver imagens carregadas de um servidor diferente da própria página da web. No seu snippet de código, a imagem é carregada de "www.ansearch.com", que é uma origem diferente da página da web.

Essa restrição de segurança existe para evitar a contaminação de conteúdo de origem cruzada, onde um um site malicioso pode acessar e modificar imagens de outro site, representando um risco à segurança. Portanto, ao tentar converter uma tela suja de origem em uma string base64 usando toDataURL(), isso resultará em uma exceção SECURITY_ERR.

Para contornar esse problema, você pode garantir que a imagem usada na tela é carregado da mesma origem da página da web. Isso significa hospedar a imagem em seu próprio servidor ou usar um CDN que sirva a imagem da mesma origem. Depois que a imagem for carregada de uma origem correspondente, o método toDataURL() deverá funcionar sem erros.