Trong lớp học lập trình này, hãy xem cách hoạt động của cùng nguồn gốc khi tìm nạp tài nguyên.
Thiết lập: Tìm nạp trang từ cùng một nguồn gốc
Bản minh hoạ được lưu trữ tại https://same-origin-policy-fetch.glitch.me.
Trang web đơn giản này sử dụng fetch để tải tài nguyên từ https://same-origin-policy-fetch.glitch.me/fetch.html. Vì index.html và fetch.html có cùng nguồn gốc, nên bạn sẽ thấy 200 xuất hiện trên bản xem trước trực tiếp.
1. Tìm nạp trang từ nguồn gốc khác
Hãy thử thay đổi URL tìm nạp thành https://www.google.com.
Bạn thấy gì trong bản xem trước trực tiếp?
Trình duyệt lẽ ra phải chặn yêu cầu tìm nạp vì bạn đã yêu cầu một tài nguyên từ một nguồn gốc khác. Điều này có nghĩa là kẻ tấn công không thể đọc tài nguyên khác nguồn gốc ngay cả khi chúng đã chiếm quyền kiểm soát trình duyệt của người dùng.
2. Tìm nạp tài nguyên khác nguồn gốc
Hãy thử thay đổi URL tìm nạp thành https://api.thecatapi.com/v1/images/search.
Bạn thấy gì trong bản xem trước trực tiếp?
URL tìm nạp là một nguồn gốc khác, nhưng bạn sẽ thấy mã trạng thái 200. Tại sao? Các ứng dụng web hiện đại thường yêu cầu tài nguyên khác nguồn gốc để tải tập lệnh của bên thứ ba hoặc truy vấn một điểm cuối API. Để phù hợp với các trường hợp sử dụng này, có một cơ chế gọi là CORS (Chia sẻ tài nguyên khác nguồn gốc) để cho trình duyệt biết rằng việc tải tài nguyên khác nguồn gốc được cho phép. Hãy xem bài viết Chia sẻ tài nguyên khác nguồn gốc một cách an toàn để biết thêm thông tin về CORS.