Trong lớp học lập trình này, hãy xem cách hoạt động của cùng một 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ừ nhiều nguồn gố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 khác. Điều này có nghĩa là kẻ tấn công không thể đọc các tài nguyên trên nhiều nguồn gốc ngay cả khi đã kiểm soát trình duyệt của người dùng.
2. Tìm nạp tài nguyên trên nhiều 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 trên nhiều nguồn gốc để tải các tập lệnh của bên thứ ba hoặc truy vấn đ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ế được gọi là CORS (Chia sẻ tài nguyên trên nhiều nguồn gốc) để cho trình duyệt biết rằng việc tải tài nguyên trên nhiều nguồn gốc được cho phép. Hãy xem phần Chia sẻ tài nguyên trên nhiều nguồn gốc một cách an toàn để biết thêm về CORS.