Permissões de recursos de imagem entre domínios (imagem habilitada para CORS)

O documento de especificação HTML introduz o atributo crossorigin para imagens. Ao definir o CORS de informações de cabeçalho apropriado, as imagens img podem ser carregadas de outros sites e usadas no canvas, assim como baixadas diretamente do site atual (origem atual).

Para obter detalhes sobre o uso de atributos de origem cruzada, consulte atributos de configurações do CORS.

Embora seja possível usar imagens no canvas sem autorização do CORS, isso danificará o canvas. Enquanto a tela estiver contaminada, os dados não poderão mais ser extraídos da tela, o que significa que métodos como toBlob(), toDataURL() e getImageData() não poderão ser chamados, caso contrário, um erro de segurança será gerado.

Na verdade, isso serve para proteger as informações pessoais dos usuários e evitar carregar informações de imagens dos usuários de sites remotos sem permissão, causando vazamentos de privacidade.

(Nota do tradutor: Se o usuário tiver feito login em sites de redes sociais como o QQ, se nenhuma proteção for fornecida, o site poderá usar o canvas para obter e fazer upload das informações da imagem do usuário após abrir um site, causando vazamento.)

Primeiro, o servidor de imagem deve definir o cabeçalho de resposta Access-Control-Allow-Origin correspondente. Adicione o atributo crossOrigin do elemento img ao cabeçalho da solicitação. Por exemplo, o servidor Apache pode copiar as informações de configuração nas configurações do servidor HTML5 Boilerplate Apache para responder:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origem: IS_CORS Conjunto de cabeçalho Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

Depois que essas configurações entrarem em vigor, você poderá salvar imagens de outros sites no armazenamento DOM (ou em outros locais), assim como os recursos deste site.

 var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Endereço específico da imagem img.crossOrigin = Anonymous;img. = function() { canvas.width = img.width; canvas.height = img.height; 0 ); localStorage.setItem( saveImageData, canvas.toDataURL(image/png) );}img.src = src;// Certifique-se de que a imagem em cache também acione o evento de carregamento if ( img.complete || img.complete == = indefinido) { img.src = dados:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==;

Compatibilidade do navegador

Área de trabalho

Móvel

Veja também

Chrome: usando imagens de origem cruzada no WebGL

Atributo de especificação HTML de origem cruzada

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.