Sitemde bazı ön bağlantı kaynak ipuçlarını dahil etmek istiyorum, böylece tarayıcılar (örneğin) jQuery CDN'ye gerçekten CDN'yi başlatan komut dosyası etiketini görmeden önce bağlanabiliyorlar. “Crossorigin” özniteliğini veya değerinin ne olması gerektiğinden emin değilim. Spec , kısmen, diyor

Bir ön bağlantı başlatmak için kullanıcı aracısının şu adımları çalıştırması gerekir:

[...]

3. Bırakın corsAttributeState öğesi, öğenin crossoriginiçerik özelliğinin geçerli durumu olsun .
4. Let kimlik için bir boolean değer kümesi olmak true.
5. Eğer corsAttributeState olduğunu Anonymousve kökeni olan, şimdiki Belgenin orijinine göre ayarlanan kimlik eşit değildir false.
6. İle bağlantıyı elde etmek girişimi kökenli ve kimlik bilgileri .

Bu algoritmayı nasıl yorumlayacağımı bilmiyorum. Önceden herhangi bir kimlik bilgisi olmadan kimsenin içeriğini indirmesine izin verecek bir CDN'ye bağlanıyorsam, “crossorigin” özelliği için hangi değeri kullanmalıyım?

Ben aynı şeyi arayan ve buldum bu

Burada çapraz kökenli özniteliği kullanmazsanız, kullanıcı aracısının sadece dns araması yaptığını ancak belirli bir etki alanı ile bağlantı kurmadığını belirtir. Bu nedenle, etki alanlarına önceden bağlanmak zorundaysanız crossorigin özelliği gereklidir, örneğin:

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

Ayrıca belirli çapraz etki alanına bazı kimlik bilgilerini göndermek istiyorsanız, crossorigin = use-credentialsaksi takdirde varsayılan değer anonim olduğunu düşünüyorum crossorigin için değeri ayarlayabilirsiniz .

Şimdiye kadar ben kullanımını anlama crossorigindeğerlerini açısından özel olarak anonymousve use-credentialskullanmanız gereken, crossorigin="use-credentials"durumda:

• resim veya video gibi crossorigin özelliğine sahip varlıklar kullanıyorsunuz
• kullanıcı aracının kaynakla önceki etkileşimlerine bağlı olarak, çerezler, HTTP kimlik doğrulaması ve istemci tarafı SSL sertifikalarını orijinler arasında taşımayı planlıyorsunuz.

Ayrıca sizin tarafınızdan alıntılanan belgelere bu ve bu var . Ama aslında belgeler yanıltıcı ve yanlış yazım içeriyor: ilk çağrı use-credentials, ikincisi - user-credentials.

Her neyse, benim anlayışımda:

• hayır crossorigineşittircrossorigin="anonymous"
• crossorigin eşittir crossorigin="use-credentials"

Belki biri beni düzeltir.

Not : Mozilla sayfasının konuya yönelik mevcut sürümü şu anlama gelir:

Anonim anahtar kelime olarak geçersiz bir anahtar kelime ve boş bir dize işlenir.

Araçlar: hayır crossorigin, crossoriginya crossorigin="use_credentials"da hepsi olarak ele alınır crossorigin="anonymous".

İki şeye bağlıdır:

1. İndirilecek varlıkların türü (CORS'nin kullanılıp kullanılmayacağını belirler)
2. Hedef sunucunun CORS bağlantıları için kimlik bilgilerini kullanıp kullanmadığı

JQuery için kullanmazsınızcrossorigin . Komut dosyaları, tarayıcıların indirmek için CORS'yi kullandığı kaynak türleri arasında değildir .

Fontlar ise CORS kullanır.

• Sayfa yalnızca CORS kullanan kaynakları getirecekse, crossoriginözelliği ekleyin .
• Sayfa yalnızca kaynakları getirmek olacaksa yok , ihmali CORS'yi kullanın crossorigin. Eğer
• Sayfa kaynakların her iki türlü getirilemedi olacaksa, sen olabilir iki kaynak ipucu gerekiyor . (Tam açıklama, bağlantı benim kişisel sitemdir. :-)) Birisi HTTP / 2 için iki ipucuna ihtiyacınız olmayabileceğini belirtti . Test etmek için zamanım olmadı.

İşte aynı sorunla karşılaştığım Stack Overflow yazısı .

CORS kimlik bilgilerinin ne zaman gerekli olduğunu araştırmadım. İhtiyaç duydukları yerde bir örnek görmedim, bu yüzden güvende olma şansınız var crossorigin(yani `` crossorigin = "anonim").

Şimdiye kadar tüm cevaplar ya basitleştirilmiş, eksik ya da kısmen yanlış görünüyor (konu karmaşık, işler kafa karıştırıcı bir şekilde adlandırılmış ve iyi belgelenmemiş!), İşte benim anlayışım:

Tarafından oluşturulan bağlantıyı yeniden kullanabilmek için <link rel=preconnect>, ne tür içerik almak istediğinize, isteğin tarayıcı kimlik bilgilerini gönderip gönderemeyeceğine (tarayıcı tarafından açıkça veya örtük olarak kurulabileceğine) bağlıdır.

İstek aynı kökenlidir ( example.comalt kaynağı talep eder example.com)

preconnectİlk etapta hiç gerek yok ; tarayıcı, sayfayı bir süre yükledikten sonra bağlantıyı açık tutar. Açılacak birden fazla bağlantı varsa, tarayıcı açılıp açılmayacağına ve kaç tane açılacağına kendisi karar verir (sunucunun TLS el sıkışmasında HTTP / 2 desteğini duyurup duymadığına bağlı olarak, tarayıcı ayarları vb.)

denetlenecek : aynı kökenli istek crossoriginözniteliğe sahipse : kullanılır veya yoksayılır mı?

İstek çapraz kökenli ( example.comalt kaynak talepleri another.com)

• Gerçek istek varsa crossoriginnitelik açıkça ayarlanmış HTML ( crossOriginJS - vaka önemlidir), önceden bağlanma ayrıca, buna sahip olmalıdır aynı değere sahip (belki de mantıklı değil ve nerede durumlar dışında crossorigingöz ardı edilir - değil tamamen için temizleyin henüz ben)
• aksi takdirde, eğer istenirse <script type=module>: kontrol edilecek
• talebidir ve için "eski okul" istek eğer başka, <img>, <style type=stylesheet>, <iframe>, klasik <script>vb (HTML veya JS ile kontrol) olmadan crossoriginaçıkça belirtilmiş , daha sonra önceden bağlanma ZORUNLU OLMAYAN crossoriginnitelik kümesi.
• aksi halde, istek çapraz kökenli bir yazı tipi isteğiyse, preconnectcrossorigin=anonymous
• aksi halde, istek bir çapraz kökense fetch veya XHR:
  • kimlik bilgileri modunda yapılırsa (yani çerezler eklenir veya HTTP temel kimlik doğrulaması kullanılır; getirme durumunda bu demektir credentials !== omit; XHR durumunda withCredentials === true:): preconnectcrossorigin=use-credentials
  • kimlik bilgisi modunda değilse: preconnect crossorigin=anonymous

Son durumda (getir / XHR), Chrome / Firefox cihazlarındaki ağ paneline gidin, bir isteği sağ tıklayın ve copy as fetchbir açılır menüden seçim yapın . Bu, bu isteğin CORS etkin ( "mode"=="cors") ve kimlik bilgisi ( "credentials"=="include"|"same-origin") olup olmadığını bildiren bir JS snippet'i oluşturur .

Bununla birlikte, yukarıdaki hile XHR olmayan / getirme istekleri için doğru çalışmaz, çünkü örneğin fetchve daha <img>önce açıklandığı gibi bağlantı kurmak için farklı algoritmalar kullanır.

Son olarak, HTML'de <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Ek notlar ve bağlantılar:

• Firefox'ta, preconnect gerekiyorsa bile çalışmaz
• ön bağlantının çalışıp çalışmadığını kontrol etmenin üç yolu
• tarayıcıların kaç tane paralel DNS isteğinin gerçekleşebileceği konusunda bazı sınırları vardır
• WebPageTest'te özel komut dosyası enjeksiyonu ile ön bağlantı kurma denemesi