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 vào dữ liệu bên trong 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 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 dữ liệu bên trong iframe và hiển thị thông báo bí mật như thổi.

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ữ vẫn có thể truy cập vào thông báo bí mật đó chứ?

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 sẽ bị hạn chế.