ฉันต้องการรวมคำแนะนำทรัพยากรที่มีการเชื่อมต่อไว้ล่วงหน้าบนเว็บไซต์ของฉันเพื่อให้เบราว์เซอร์สามารถ (ตัวอย่าง) เชื่อมต่อกับ jQuery CDN ก่อนที่พวกเขาจะเห็นแท็กสคริปต์ที่เรียกใช้ CDN ฉันไม่แน่ใจว่าควรรวมแอตทริบิวต์“ crossorigin” หรือค่าของมันควรเป็นอะไร สเปคกล่าวว่าในส่วนหนึ่ง

ในการเริ่มการเชื่อมต่อล่วงหน้าเอเจนต์ผู้ใช้ต้องรันขั้นตอนเหล่านี้:

[ ... ]

3. ให้corsAttributeStateเป็นสถานะปัจจุบันของcrossoriginแอตทริบิวต์เนื้อหาขององค์ประกอบ
4. ขอข้อมูลประจำตัวtrueเป็นชุดค่าบูลีนเพื่อ
5. หากcorsAttributeStateเป็นAnonymousและต้นกำเนิดfalseไม่เท่ากับกำเนิดปัจจุบันเอกสารของข้อมูลประจำตัวของชุด
6. พยายามที่จะได้รับการเชื่อมต่อกับแหล่งที่มาและข้อมูลประจำตัว

ฉันไม่รู้วิธีตีความอัลกอริทึมนี้ หากฉันเชื่อมต่อกับ CDN ล่วงหน้าซึ่งจะอนุญาตให้ทุกคนดาวน์โหลดเนื้อหาโดยไม่มีข้อมูลรับรองประเภทใดฉันควรใช้ค่าใดสำหรับแอตทริบิวต์“ crossorigin”

ฉันกำลังค้นหาสิ่งเดียวกันและฉันพบสิ่งนี้

มันระบุไว้ที่นี่ว่าถ้าคุณไม่ได้ใช้คุณลักษณะการกำเนิดข้ามตัวแทนผู้ใช้เพียงแค่ทำการค้นหา dns แต่ไม่ได้สร้างการเชื่อมต่อกับโดเมนเฉพาะ ดังนั้นจำเป็นต้องมีแอตทริบิวต์ crossorigin หากคุณต้องเชื่อมต่อข้ามโดเมนล่วงหน้าดังนี้:

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

นอกจากนี้หากคุณต้องการส่งข้อมูลประจำตัวบางอย่างไปยังโดเมนข้ามนั้นคุณสามารถตั้งค่าเป็น crossorigin อย่างcrossorigin = use-credentialsอื่นฉันคิดว่าค่าเริ่มต้นไม่ระบุชื่อ

จนถึงตอนนี้ฉันเข้าใจการใช้งานcrossoriginเป็นพิเศษในแง่ของคุณค่าanonymousและuse-credentialsคุณควรใช้crossorigin="use-credentials"ในกรณี:

• คุณใช้เนื้อหาเช่นรูปภาพหรือวิดีโอซึ่งมีแอตทริบิวต์ crossorigin
• คุณวางแผนที่จะดำเนินการกับคุกกี้การตรวจสอบความถูกต้อง HTTP และใบรับรอง SSL ฝั่งไคลเอ็นต์ระหว่างต้นกำเนิดโดยอิงจากการโต้ตอบก่อนหน้าของตัวแทนผู้ใช้กับแหล่งกำเนิด

นอกจากนี้ในเอกสารที่อ้างถึงโดยคุณฉันได้รับสิ่งนี้และสิ่งนั้น แต่แน่นอนเอกสารเป็นความเข้าใจผิดและมีการสะกดผิด: สายแรกuse-credentialsที่สอง user-credentials-

อย่างไรก็ตามในความเข้าใจของฉัน:

• ไม่crossoriginเลยcrossorigin="anonymous"
• crossorigin เท่ากับ crossorigin="use-credentials"

บางทีใครบางคนอาจจะแก้ไขฉัน

PS : หน้า Mozilla ปัจจุบันของหัวเรื่องหมายถึง:

คำหลักที่ไม่ถูกต้องและสตริงว่างจะถูกจัดการเป็นคำหลักที่ไม่ระบุชื่อ

หมายถึงไม่มีcrossoriginเลยcrossoriginหรือได้รับการจัดการทั้งหมดเป็นcrossorigin="use_credentials"crossorigin="anonymous"

มันขึ้นอยู่กับสองสิ่ง:

1. ประเภทของสินทรัพย์ที่จะดาวน์โหลด (ซึ่งกำหนดว่าจะใช้ CORS)
2. ระบุว่าเซิร์ฟเวอร์เป้าหมายใช้ข้อมูลรับรองสำหรับการเชื่อมต่อ CORS หรือไม่

สำหรับ jQuery คุณจะไม่ใช้ crossoriginสคริปจะไม่อยู่ในกลุ่มประเภทของเบราว์เซอร์ทรัพยากรที่ใช้ ธ ดาวน์โหลด

ในทางกลับกันฟอนต์ใช้ CORS

• หากหน้านั้นจะดึงข้อมูลทรัพยากรที่ใช้ CORS เท่านั้นให้รวมแอcrossoriginททริบิว
• หากหน้านั้นจะดึงข้อมูลทรัพยากรที่ไม่ได้ใช้ CORS ให้ข้ามcrossoriginไป ถ้า
• หากหน้านั้นจะดึงทรัพยากรทั้งสองชนิดคุณอาจต้องการคำแนะนำทรัพยากรสองรายการ (การเปิดเผยแบบเต็มลิงค์คือเว็บไซต์ส่วนตัวของฉัน :-)) มีคนชี้ให้เห็นว่าคุณอาจไม่ต้องการคำใบ้สองอย่างสำหรับ HTTP / 2 ฉันไม่มีเวลาทดสอบ

นี่คือโพสต์ Stack Overflowที่ฉันพบปัญหาเดียวกัน

ฉันไม่ได้ดำน้ำในเมื่อจำเป็นต้องใช้ข้อมูลรับรอง CORS ฉันไม่ได้เห็นตัวอย่างที่พวกเขาต้องการดังนั้นโอกาสที่คุณจะปลอดภัยcrossorigin(เช่น `crossorigin =" anonymous ")

คำตอบทั้งหมดดูเหมือนจะง่ายไม่สมบูรณ์หรือไม่ถูกต้องบางส่วน (หัวข้อมีความซับซ้อนสิ่งต่าง ๆ ถูกตั้งชื่อสับสนและไม่ได้รับการบันทึกไว้!) ดังนั้นนี่คือความเข้าใจของฉัน:

เพื่อให้สามารถใช้การเชื่อมต่อที่สร้างขึ้น<link rel=preconnect>ใหม่ได้สิ่งต่างๆขึ้นอยู่กับประเภทของเนื้อหาที่คุณต้องการดึงข้อมูลจากที่ใดว่าคำขอจะส่งข้อมูลรับรองเบราว์เซอร์หรือไม่

การร้องขอมาจากแหล่งกำเนิดเดียวกัน ( example.comร้องขอ subresource จากexample.com)

ไม่จำเป็นต้องมีpreconnectตั้งแต่แรก; เบราว์เซอร์จะคงการเชื่อมต่อไว้หลังจากที่โหลดหน้าเว็บมาระยะหนึ่งแล้ว หากมีหลายการเชื่อมต่อที่จะเปิดเบราว์เซอร์จะตัดสินใจด้วยตัวเองว่าจะเปิดกี่ครั้ง (ขึ้นอยู่กับว่าเซิร์ฟเวอร์ประกาศการสนับสนุน HTTP / 2 ในการจับมือ TLS การตั้งค่าเบราว์เซอร์ ฯลฯ )

ที่จะตรวจสอบ : จะเกิดอะไรขึ้นถ้าคำขอที่มาเดียวกันมีcrossoriginแอตทริบิวต์: มันถูกใช้หรือเพิกเฉย?

คำขอเป็นcross-origin ( example.comร้องขอ subresource จากanother.com)

• หากคำขอจริงมีการตั้งค่าcrossoriginแอตทริบิวต์อย่างชัดเจนใน HTML ( crossOriginใน JS - กรณีเป็นสิ่งสำคัญ) การเชื่อมต่อล่วงหน้าจะต้องมีค่าเดียวกัน(อาจยกเว้นในกรณีที่ไม่เหมาะสมและcrossoriginไม่สนใจ - ไม่ชัดเจนสำหรับ ฉันยัง)
• มิฉะนั้นถ้ามีการร้องขอถ้าสำหรับ<script type=module>: ที่จะตรวจสอบ
• อื่นถ้าขอและโรงเรียนเก่า "" ขอให้<img>, <style type=stylesheet>, <iframe>คลาสสิก<script>ฯลฯ (ริเริ่มผ่าน HTML หรือ JS) โดยไม่ต้องcrossoriginระบุไว้อย่างชัดเจนแล้วต้อง preconnect ได้มีcrossoriginชุดแอตทริบิวต์
• มิฉะนั้นหากคำขอเป็นคำขอแบบอักษรข้ามแหล่งข้อมูลจะต้องมีการเชื่อมต่อล่วงหน้าcrossorigin=anonymous
• มิฉะนั้นถ้าคำขอเป็นcross-origin fetchหรือXHR:
  • หากทำในโหมดหนังสือรับรอง (เช่นมีการแนบคุกกี้หรือใช้การรับรองความถูกต้องพื้นฐาน HTTP ในกรณีของการดึงข้อมูลหมายถึงนี้credentials !== omitในกรณีของ XHR:) withCredentials === true: การเชื่อมต่อล่วงหน้าจะต้องมีcrossorigin=use-credentials
  • หากไม่ได้อยู่ในโหมดหนังสือรับรอง: ต้องมีการเชื่อมต่อล่วงหน้า crossorigin=anonymous

สำหรับกรณีสุดท้าย (fetch / XHR) ไปที่แผงเครือข่ายใน Chrome / Firefox devtools คลิกขวาที่คำขอและเลือกcopy as fetchจากรายการแบบเลื่อนลง สิ่งนี้จะสร้างตัวอย่างของ JS ซึ่งจะบอกคุณว่าคำขอนั้นเปิดใช้งาน CORS ( "mode"=="cors") และรับรอง ( "credentials"=="include"|"same-origin") หรือไม่

โปรดทราบว่าเทคนิคดังกล่าวไม่สามารถทำงานได้อย่างถูกต้องสำหรับคำขอที่ไม่ใช่ XHR / การดึงข้อมูลเนื่องจากตัวอย่างfetchและ<img>ใช้อัลกอริทึมที่แตกต่างเพื่อสร้างการเชื่อมต่อดังที่อธิบายไว้ก่อนหน้านี้

สุดท้ายใน HTML, ===<link ...crossorigin><link ...crossorigin=anonymous>

บันทึกและลิงก์เพิ่มเติม:

• ใน Firefox การเชื่อมต่อล่วงหน้าจะใช้งานไม่ได้แม้ว่าจะเป็นเช่นนั้นก็ตาม
• สามวิธีในการตรวจสอบว่าการเชื่อมต่อล่วงหน้าทำงานหรือไม่
• เบราว์เซอร์มีข้อ จำกัด เกี่ยวกับจำนวนคำขอ DNS ขนานที่สามารถเกิดขึ้นได้
• ทดลองเชื่อมต่อล่วงหน้าด้วยการฉีดสคริปต์ที่กำหนดเองบน WebPageTest