นโยบายต้นทางเดียวกัน & iframe

ในโค้ดแล็บนี้ ให้ดูว่านโยบายแหล่งที่มาเดียวกันทํางานอย่างไรเมื่อเข้าถึงข้อมูลภายใน iframe

การตั้งค่า: หน้าเว็บที่มี iframe จากต้นทางเดียวกัน

หน้านี้ฝัง iframe ชื่อ iframe.html ในต้นทางเดียวกัน เนื่องจากโฮสต์และ iframe นั้นใช้แหล่งที่มาเดียวกัน เว็บไซต์โฮสต์จึงเข้าถึงข้อมูลภายใน iframe และแสดงข้อความลับได้ดังตัวอย่างด้านล่าง

const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;

การเปลี่ยนแปลง iframe แบบข้ามต้นทาง

ลองเปลี่ยน src ของ iframe เป็น https://other-iframe.glitch.me/ หน้าโฮสต์จะยังเข้าถึงข้อความลับได้ไหม

เนื่องจากโฮสต์และ iframe ที่ฝังไม่มีแหล่งที่มาเดียวกัน จึงมีการจํากัดการเข้าถึงข้อมูล