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 gọi là iframe.html) có 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 vào dữ liệu bên trong iframe và hiển thị thông báo bí mật một cách nhanh chóng.

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

Thay đổi sang 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ư bí mật không?

Vì máy chủ lưu trữ và iframe đã 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ế.