Cùng một chính sách nguồn gốc và iframe

Mariko Kosaka

Trong lớp học lập trình này, hãy xem cách hoạt động của chính sách cùng nguồn gốc khi truy cập dữ liệu bên trong một iframe.

Thiết lập: Trang có iframe cùng nguồn gốc

Trang này nhúng một iframe, có tên là iframe.html, trong cùng một nguồn gốc. Vì máy chủ lưu trữ và iframe có cùng nguồn gốc, nên trang web lưu trữ có thể truy cập vào dữ liệu bên trong iframe và hiển thị thông báo bí mật như blow.

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

Thay đổi thành iframe trên nhiều nguồn gốc

Hãy thử thay đổi src của iframe thành https://other-iframe.glitch.me/. Trang lưu trữ có thể truy cập vào thông báo bí mật không?

Vì máy chủ lưu trữ và iframe được nhúng không có cùng nguồn gốc, nên quyền truy cập vào dữ liệu bị hạn chế.