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:

[...]

3. Deixe corsAttributeState ser o estado atual do crossoriginatributo de conteúdo do elemento .
4. Permita que as credenciais sejam um valor booleano definido como true.
5. Se corsAttributeState for Anonymouse a origem não for igual à origem do documento atual, defina credenciais como false.
6. 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"?

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.

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".

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 ").

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:

• no Firefox, a pré-conexão não funciona, mesmo que deva
• três maneiras de verificar se a pré-conexão está funcionando
• navegadores têm alguns limites em quantas solicitações DNS paralelas podem ocorrer
• experimentando pré-conexão com injeção de script personalizada no WebPageTest