<aside> ©️ IT: Từ A tới Á cho người ngoài ngành by @Rose Trinh

</aside>

Trong những bài viết trước mình có đề cập tới API và cách hoạt động của API (mọi người có thể đọc lướt qua):

API là gì?

Các dạng thông tin API truyền đạt: json, xml, jpeg…

REST API, SOAP API

Hôm nay thì mình sẽ đề cập tới một cơ chế bảo mật mà các web browser (Chrome, Safari, IE, Firefox vv.) có áp dụng cho việc gọi API: CORS (Cross-Origin Resource Sharing).

Đầu tiên, thì Origin, Same-Origin, Cross-Origin là gì?

• Nguồn (Origin): Khi bạn truy cập một trang web, nguồn (origin) của trang web đó là địa chỉ gồm giao thức (http/https), tên miền, và cổng của chính trang bạn đang truy cập.

// Ví dụ như mình đang truy cập youtube.com. Origin: https://www.youtube.com

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/9e07b21e-6d57-4d48-9e04-740cc0ada688/3c640cf8-596c-4e59-b391-c056d739e585/image.png>)

• Yêu cầu Cross-Origin: Nếu trang web cố gắng gửi yêu cầu tới một nguồn khác, đây được gọi là yêu cầu Cross-Origin.

// Một trong những API được gọi là YouTube Video Playback API, dùng để lấy video stream từ YouTube. Trang web YouTube gửi yêu cầu tới Google Video (YouTube có URL là https://www.youtube.com (origin: https://www.youtube.com), trong khi Google Video có URL là https://rr1---sn-8qj-nbo6r.googlevideo.com (origin: https://rr1---sn-8qj-nbo6r.googlevideo.com) đây sẽ được coi là một yêu cầu cross-origin do hai URL này khác nhau về domain.

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/9e07b21e-6d57-4d48-9e04-740cc0ada688/33e92713-4aad-4a2b-b95d-d2a7e90ab752/image.png>)

• Yêu cầu Same-Origin: Đây là khi trang web gửi yêu cầu đến một nguồn có cùng origin.

  // Ví dụ dưới đây là một API gửi các thống kê về thời gian xem video (watchtime) lên YouTube với URL là https://www.youtube.com/api/stats/watchtime?ns=yt&el=adunit&cpn=UcWKqYT3wFU5cuRI&ver=2&..., nó vẫn thuộc về origin https://www.youtube.comđó là yêu cầu same-origin.

  

CORS

CORS là cơ chế bảo mật web mà các server sử dụng để chỉ định những nguồn (origin) nào được phép truy cập tài nguyên của server, tức server có thể cấu hình để chỉ chấp nhận các request từ một số domain cụ thể.

CORS hoạt động như thế nào?

1. Yêu cầu Preflight: Khi một yêu cầu cross-origin được thực hiện, trình duyệt sẽ gửi một yêu cầu OPTIONS đến server để kiểm tra xem phương thức và các header cụ thể có được phép không. Server sẽ trả về thông tin về các origin và phương thức mà nó chấp nhận.
2. Header CORS: Nếu server đồng ý cho phép yêu cầu từ một origin cụ thể, nó sẽ trả về các header CORS trong phản hồi, ví dụ như:
   • Access-Control-Allow-Origin: Xác định các origin được phép truy cập.
   • Access-Control-Allow-Methods: Chỉ định các phương thức HTTP (GET, POST, PUT, DELETE, v.v.) được phép.
   • Access-Control-Allow-Headers: Liệt kê các header mà client có thể gửi cùng với yêu cầu.