Objetivo do atributo crossorigin…?

Respostas:

31

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.

ThiefMaster
fonte
2
Eu li isso ao postar o link da minha pergunta. Não significa nada para mim. A pergunta era geral, incluindo scripts também.
Smurfette de
Não acho que esta seja realmente uma resposta à perguntaPurpose of the crossorigin attribute …?
Pmpr
52

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.

TJ Crowder
fonte
6
Eles parecem ter pouco em comum, apesar de terem o mesmo nome. Um diz respeito ao controle de erros, o outro é para uso com o canvas.
Smurfette de
@Smurfette: O que eles têm em comum é que modificam a forma como o elemento funciona quando usado de uma origem cruzada. Mas sim, eles são de fato muito diferentes de outra forma.
TJ Crowder de
1
@Smurfette: Isso não está relacionado ao fato de eles bloquearem você de usar as imagens, apenas impedindo (ou permitindo) seu uso em canvaselementos.
TJ Crowder
Apenas para informação de que este atributo também é útil em elementos de link - ao vincular a uma folha de estilo externa no Firefox (por exemplo, usando fontes do Google), isso corrige problemas que podem surgir se você tiver algum script que acessa document.styleSheets
kinakuta
@Smurfette: Existe algum atributo desse tipo para iframe para que eu possa controlar o src do lado do servidor, se a solicitação vem de uma origem conhecida ou não?
akashPatra de
33

É 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

Omar Rayward
fonte
4

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.

David Edwards
fonte
1
Obrigado, essa resposta me fez perceber que o problema que eu tinha só afetava o ambiente de teste local, e foi.
user1032613
1

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.

David Edwards
fonte