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 hiển thị trong 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 đáng lẽ đã 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 các tài nguyên nhiều nguồn gốc ngay cả khi chúng đã giành được 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 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 nhiều 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. Để đáp ứng các trường hợp sử dụng này, chúng tôi có một cơ chế tên 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 hoạt động tải tài nguyên nhiều nguồn gốc được cho phép. Xem phần Chia sẻ an toàn tài nguyên nhiều nguồn gốc để biết thêm thông tin về CORS.