ใน Codelab นี้ คุณจะได้ดูวิธีการทำงานของแหล่งที่มาเดียวกันเมื่อดึงข้อมูลทรัพยากร
ตั้งค่า: ดึงข้อมูลหน้าเว็บจากต้นทางเดียวกัน
เดโมโฮสต์อยู่ที่ https://same-origin-policy-fetch.glitch.me
หน้าเว็บที่เรียบง่ายนี้ใช้ fetch เพื่อโหลดทรัพยากรจาก https://same-origin-policy-fetch.glitch.me/fetch.html เนื่องจาก index.html และ fetch.html มีต้นทางเดียวกัน คุณจึงควรเห็น 200 แสดงในตัวอย่างแบบเรียลไทม์
1. ดึงข้อมูลหน้าเว็บจากต้นทางอื่น
ลองเปลี่ยน URL การดึงข้อมูลเป็น https://www.google.com
คุณเห็นอะไรในตัวอย่างแบบเรียลไทม์
เบราว์เซอร์ควรบล็อกคำขอดึงข้อมูลเนื่องจากคุณขอทรัพยากรจากต้นทางอื่น ซึ่งหมายความว่าผู้โจมตีจะอ่านทรัพยากรแบบข้ามต้นทางไม่ได้แม้ว่าจะควบคุมเบราว์เซอร์ของผู้ใช้ได้ก็ตาม
2. ดึงข้อมูลทรัพยากรแบบข้ามต้นทาง
ลองเปลี่ยน URL การดึงข้อมูลเป็น https://api.thecatapi.com/v1/images/search
คุณเห็นอะไรในตัวอย่างแบบเรียลไทม์
URL การดึงข้อมูลเป็นต้นทางอื่น แต่คุณควรเห็นรหัสสถานะ 200 ทำไมจึงเป็นเช่นนั้น เว็บแอปพลิเคชันสมัยใหม่มักจะขอทรัพยากรแบบข้ามต้นทางเพื่อโหลดสคริปต์ของบุคคลที่สามหรือค้นหาปลายทาง API เพื่อรองรับ Use Case เหล่านี้ จึงมีกลไกที่เรียกว่า CORS (Cross Origin Resource Sharing) เพื่อบอกเบราว์เซอร์ว่าอนุญาตให้โหลดทรัพยากรแบบข้ามต้นทางได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ CORS ได้ที่แชร์ทรัพยากรแบบข้ามต้นทางอย่างปลอดภัย