Quando devo usar o atributo "crossorigin" em um <link> "pré-conexão"?

14

Eu gostaria de incluir algumas dicas de recursos pré-conectados no meu site para que os navegadores possam (por exemplo) conectar-se ao CDN do jQuery antes que eles realmente vejam a tag de script que chama o CDN. Não tenho certeza se devo incluir o atributo "crossorigin" ou qual deve ser seu valor. A especificação diz, em parte,

Para iniciar uma pré-conexão, o agente do usuário deve executar estas etapas:

[...]

  1. Deixe corsAttributeState ser o estado atual do crossoriginatributo de conteúdo do elemento .
  2. Permita que as credenciais sejam um valor booleano definido como true.
  3. Se corsAttributeState for Anonymouse a origem não for igual à origem do documento atual, defina credenciais como false.
  4. Tente obter conexão com origem e credenciais .

Não sei como interpretar esse algoritmo. Se eu estiver pré-conectado a uma CDN, que permitirá que qualquer pessoa baixe seu conteúdo sem nenhum tipo de credencial, que valor devo usar para o atributo "crossorigin"?

Bdesham
fonte

Respostas:

4

Eu estava procurando a mesma coisa e achei isso

Ele afirma aqui que, se você não usar o atributo de origem cruzada, o agente do usuário fará a pesquisa de DNS, mas não estabelecerá a conexão com o domínio específico. Portanto, o atributo crossorigin é necessário se você precisar se conectar previamente ao domínio, assim:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Além disso, se você quiser enviar algumas credenciais para esse domínio cruzado específico, poderá definir o valor como crossorigin, crossorigin = use-credentialscaso contrário, acho que o valor padrão é anônimo.

orangespark
fonte
Isso é meio verdade. Se o CORS for usado (como ocorre com fontes), somente a pesquisa de DNS será usada com a solicitação de fonte. (A conexão ainda acontece, mas não é mostrada no gráfico em cascata porque uma conexão separada deve ser aberta para a solicitação do CORS .) Se você estiver buscando um script, crossoriginusará igualmente uma conexão perdida, porque uma nova conexão deve ser aberta que não usa CORS.
Michael Crenshaw
2

Até agora eu entendo o uso de crossorigin, especialmente em termos de seus valores anonymouse use-credentials, você deve usar crossorigin="use-credentials"no caso de:

  • você usa recursos, como imagens ou vídeos, que têm um atributo de origem cruzada
  • você planeja transportar cookies, autenticação HTTP e certificados SSL do cliente entre as origens, com base nas interações anteriores do agente do usuário com a origem.

Além da documentação citada por você, eu tenho isso e aquilo . Mas, de fato, a documentação é enganosa e contém erros de ortografia: o primeiro chama use-credentials, o segundo - user-credentials.

Enfim, no meu entendimento:

  • não crossoriginé igual acrossorigin="anonymous"
  • crossorigin é igual a crossorigin="use-credentials"

Talvez alguém me corrija.

PS : A versão atual da página Mozilla para o assunto significa:

Uma palavra-chave inválida e uma sequência vazia serão tratadas como a palavra-chave anônima.

Significa: não crossorigin, crossoriginou crossorigin="use_credentials"são todos tratados como crossorigin="anonymous".

Evgeniy
fonte
5
Acredito que, como mencionado no MDN , por padrão (ou seja, quando o atributo não for especificado), o CORS não será usado. Além disso, a configuração apenas crossoriginé igual a crossorigin="anonymous".
Shakespear
1

Depende de duas coisas:

  1. O tipo de ativos a serem baixados (que determina se o CORS será usado)
  2. Se o servidor de destino usa credenciais para conexões CORS

Para jQuery, você não usariacrossorigin . Os scripts não estão entre os tipos de recursos que os navegadores usam o CORS para fazer o download .

As fontes, por outro lado, usam o CORS.

  • Se a página buscar apenas recursos que usam CORS, inclua o crossoriginatributo
  • Se a página buscar apenas recursos que não usam CORS, omita crossorigin. E se
  • Se a página buscar os dois tipos de recursos, você poderá precisar de duas dicas de recursos . (Divulgação completa, o link está no meu site pessoal. :-)) Alguém apontou que você pode não precisar de duas dicas para HTTP / 2. Não tive tempo de testar.

Aqui está a postagem Stack Overflow, onde encontrei o mesmo problema.

Não mergulhei em quando as credenciais do CORS são necessárias. Eu não vi um exemplo onde eles são necessários, então é provável que você esteja seguro crossorigin(por exemplo, `crossorigin =" anonymous ").

Michael Crenshaw
fonte
1

Todas as respostas até agora parecem simplificadas, incompletas ou parcialmente erradas (o tópico é complexo, as coisas são nomeadas de forma confusa e não estão bem documentadas!), Então aqui está o meu entendimento:

Para poder reutilizar a conexão criada <link rel=preconnect>, as coisas dependem do tipo de conteúdo que você deseja buscar, de onde, se a solicitação enviará credenciais do navegador (que podem ser estabelecidas pelo navegador de forma explícita ou implícita):

A solicitação é da mesma origem ( example.comsolicita sub -fonte de example.com)

Não há necessidade preconnect, em primeiro lugar; o navegador mantém a conexão aberta após carregar a página por um bom tempo. Se houver várias conexões a serem abertas, o navegador decide por si próprio se e quantas abrir (dependendo se o servidor anunciar suporte HTTP / 2 no handshake TLS, configurações do navegador etc.)

a ser verificado : e se a solicitação de mesma origem tiver crossoriginatributo: é usada ou ignorada?

A solicitação é de origem cruzada ( example.comsolicita o sub-recurso de another.com)

  • se a solicitação real tiver um crossoriginatributo definido explicitamente em HTML ( crossOriginem JS - o caso é importante), a pré-conexão também deve ter, com o mesmo valor (talvez exceto nos casos em que não faz sentido e crossoriginé ignorado - não está totalmente claro para eu ainda)
  • caso contrário, se solicitar, se <script type=module>: a ser verificado
  • mais, se o pedido é e "old school" pedido de <img>, <style type=stylesheet>, <iframe>, clássico <script>etc (iniciada via HTML ou JS) , sem crossoriginexplicitamente especificado , então o preconnect não deve ter crossoriginconjunto de atributos.
  • caso contrário, se request for uma fonte de origem , a pré-conexão deverá tercrossorigin=anonymous
  • caso contrário, se a solicitação for de origem cruzada fetch ou XHR:
    • se for feito no modo credenciado (ou seja, os cookies estiverem anexados ou a autenticação básica HTTP for usada; no caso de busca, isso significa credentials !== omit; no caso de XHR withCredentials === true:): a pré-conexão deve tercrossorigin=use-credentials
    • se não estiver no modo credenciado: a pré-conexão deve ter crossorigin=anonymous

Para o último caso (buscar / XHR), acesse o painel de rede no Chrome / Firefox devtools, clique com o botão direito do mouse em uma solicitação e escolha copy as fetchuma lista suspensa. Isso criará um trecho de JS, que informará se essa solicitação é habilitada para CORS ( "mode"=="cors") e credenciada ( "credentials"=="include"|"same-origin").

Nota no entanto o truque acima não funcionar corretamente para não-XHR / solicitações de busca, porque, por exemplo, fetche <img>usar diferentes algoritmos para estabelecer a conexão, como explicado anteriormente.

Finalmente, em HTML, <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Notas e links adicionais:

jakub.g
fonte