Objetivo do atributo crossorigin…?

Em tags de imagem e script.

Meu entendimento é que você pode acessar scripts e imagens em outros domínios. Então, quando usar esse atributo?

É quando você deseja restringir a capacidade de outras pessoas de acessar seus scripts e imagem?

Imagens:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

Scripts:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

As imagens habilitadas para CORS podem ser reutilizadas no elemento sem serem contaminadas. Os valores permitidos são:

A página já responde à sua pergunta.

Se você tiver uma imagem de origem cruzada pode copiá-la para uma tela, mas isso "mancha" a tela, o que impede você de lê-la (então você não pode "roubar" imagens, por exemplo, de uma intranet onde o próprio site não tem acesso ) No entanto, usando o CORS, o servidor onde a imagem está armazenada pode informar ao navegador que o acesso de origem cruzada é permitido e, portanto, você pode acessar os dados da imagem por meio de uma tela.

O MDN também tem uma página exatamente sobre isso: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

É quando você deseja restringir a capacidade de outras pessoas de acessar seus scripts e imagem?

Não.

A resposta pode ser encontrada na especificação .

Para img:

O crossoriginatributo é um atributo de configurações do CORS . Seu objetivo é permitir que imagens de sites de terceiros que permitem o acesso de origem cruzada sejam usadas com canvas.

e para script:

O crossoriginatributo é um atributo de configurações do CORS . Ele controla, para scripts que são obtidos de outras origens , se as informações de erro serão expostas.

É assim que usamos com sucesso o crossoriginatributo em uma scripttag:

Problema que tivemos: estávamos tentando registrar erros de js no servidor usando window.onerror

Quase todos os erros que estávamos registrando tinham esta mensagem: Script error.e estávamos obtendo muito poucas informações sobre como resolver esses erros js.

Acontece que a implementação nativa no Chrome para relatar erros

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

será enviado messagecomo Script error.se o ativo estático solicitado violasse a política de mesma origem do navegador .

Em nosso caso, estávamos servindo o ativo estático de um cdn.

A maneira como resolvemos isso foi adicionando o crossoriginatributo à scripttag.

PS Obteve todas as informações desta resposta

Se você estiver desenvolvendo um código rápido localmente e estiver usando o Chrome, há um problema. se sua página carregar usando um URL do formulário "arquivo: // xxxx", então tentar usar getImageData () na tela irá falhar e lançar o erro de segurança de origem cruzada, mesmo se sua imagem estiver sendo obtida do mesmo em sua máquina local como a página HTML que renderiza a tela. Portanto, se sua página HTML for obtida, diga:

arquivo: // D: /wwwroot/mydir/mytestpage.html

e seu arquivo Javascript e imagens estão sendo buscados, digamos:

arquivo: // D: /wwwroot/mydir/mycode.js

arquivo: // D: /wwwroot/mydir/myImage.png

então, apesar do fato de que essas entidades secundárias estão sendo buscadas da mesma origem, o erro de segurança ainda é lançado.

Por algum motivo, em vez de definir a origem corretamente, o Chrome define o atributo origin das entidades necessárias como "null", tornando impossível testar o código envolvendo getImageData () simplesmente abrindo a página HTML em seu navegador e depurando localmente.

Além disso, definir a propriedade crossOrigin da imagem como "anônimo" não funciona, pelo mesmo motivo.

Ainda estou tentando encontrar uma solução alternativa para isso, mas, mais uma vez, parece que a depuração local está sendo processada da forma mais dolorosa possível pelos implementadores de navegador.

Acabei de tentar executar meu código no Firefox, e o Firefox acertou, reconhecendo que minha imagem é da mesma origem dos scripts HTML e JS. Portanto, gostaria de receber algumas dicas sobre como contornar o problema no Chrome, já que, no momento, enquanto o Firefox funciona, seu depurador é dolorosamente lento, a ponto de estar a um passo de um ataque de negação de serviço.

Eu descobri como persuadir o Google Chrome a permitir referências a file: // sem gerar um erro de origem cruzada.

Passo 1: Crie um atalho (Windows) ou equivalente em outros sistemas operacionais;

Etapa 2: defina a meta para algo como o seguinte:

"C: \ Arquivos de programas (x86) \ Google \ Chrome \ Application \ chrome.exe" --allow-file-access-from-files

Esse argumento de linha de comando especial, --allow-file-access-from-files, diz ao Chrome para permitir que você use file: // referências a páginas da web, imagens etc., sem lançar erros de origem cruzada toda vez que você tentar transferi-los imagens para uma tela HTML, por exemplo. Funciona na minha configuração do Windows 7, mas vale a pena verificar se funciona no Windows 8/10 e em várias distros Linux também. Em caso afirmativo, o problema foi resolvido - o desenvolvimento off-line é retomado normalmente.

Agora posso fazer referência a imagens e dados JSON de file: // URIs, sem o Chrome lançar erros de origem cruzada se eu tentar transferir dados de imagem para uma tela ou transferir dados JSON para um elemento de formulário.