นโยบายต้นทางเดียวกันและคำขอดึงข้อมูล

ใน 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 เพื่อรองรับกรณีการใช้งานเหล่านี้ มีกลไกที่เรียกว่า CORS (การแชร์ทรัพยากรข้ามโดเมน) ในการบอก ที่อนุญาตให้โหลดทรัพยากรแบบข้ามต้นทางได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ CORS ที่หัวข้อแชร์ทรัพยากรแบบข้ามต้นทางอย่างปลอดภัย