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:
[...]
- Deixe corsAttributeState ser o estado atual do
crossorigin
atributo de conteúdo do elemento .- Permita que as credenciais sejam um valor booleano definido como
true
.- Se corsAttributeState for
Anonymous
e a origem não for igual à origem do documento atual, defina credenciais comofalse
.- 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"?
html
performance
cross-origin
Bdesham
fonte
fonte
Respostas:
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:
Além disso, se você quiser enviar algumas credenciais para esse domínio cruzado específico, poderá definir o valor como crossorigin,
crossorigin = use-credentials
caso contrário, acho que o valor padrão é anônimo.fonte
crossorigin
usará igualmente uma conexão perdida, porque uma nova conexão deve ser aberta que não usa CORS.Até agora eu entendo o uso de
crossorigin
, especialmente em termos de seus valoresanonymous
euse-credentials
, você deve usarcrossorigin="use-credentials"
no caso de: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:
crossorigin
é igual acrossorigin="anonymous"
crossorigin
é igual acrossorigin="use-credentials"
Talvez alguém me corrija.
PS : A versão atual da página Mozilla para o assunto significa:
Significa: não
crossorigin
,crossorigin
oucrossorigin="use_credentials"
são todos tratados comocrossorigin="anonymous"
.fonte
crossorigin
é igual acrossorigin="anonymous"
.Depende de duas coisas:
Para jQuery, você não usaria
crossorigin
. 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.
crossorigin
atributocrossorigin
. E seAqui 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 ").fonte
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.com
solicita sub -fonte deexample.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
crossorigin
atributo: é usada ou ignorada?A solicitação é de origem cruzada (
example.com
solicita o sub-recurso deanother.com
)crossorigin
atributo definido explicitamente em HTML (crossOrigin
em 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 ecrossorigin
é ignorado - não está totalmente claro para eu ainda)<script type=module>
: a ser verificado<img>
,<style type=stylesheet>
,<iframe>
, clássico<script>
etc (iniciada via HTML ou JS) , semcrossorigin
explicitamente especificado , então o preconnect não deve tercrossorigin
conjunto de atributos.crossorigin=anonymous
fetch
ouXHR
:credentials !== omit
; no caso de XHRwithCredentials === true
:): a pré-conexão deve tercrossorigin=use-credentials
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 fetch
uma 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,
fetch
e<img>
usar diferentes algoritmos para estabelecer a conexão, como explicado anteriormente.Finalmente, em HTML,
<link ...crossorigin>
===<link ...crossorigin=anonymous>
.Notas e links adicionais:
fonte