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 tổ chức 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, bạn sẽ thấy 200 hiển thị 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 đã 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 trên nhiều nguồn gốc ngay cả khi chúng đã nắ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 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 có 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 các tài nguyên trên nhiều nguồn gốc 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 những trường hợp sử dụng này, có một cơ chế tên là CORS (Chia sẻ tài nguyên đa nguồn gốc) để thông báo cho trình duyệt tải một tài nguyên trên nhiều nguồn gốc. Xem bài viết Chia sẻ an toàn tài nguyên trên nhiều nguồn gốc để biết thêm thông tin trên CORS.