CORS được sử dụng rộng rãi trong các ứng dụng web hiện đại để cho phép các trang web giao tiếp với các máy chủ từ nguồn khác nhau và truy cập dữ liệu được chia sẻ từ một máy chủ khác. Bài viết dưới đây sẽ giúp chúng ta hiểu về cơ chế CORS, cách hoạt động của nó trong các ứng dụng trang web. 

1. CORS là gì

CORS là viết tắt của “Cross-Origin Resource Sharing” (Chia sẻ tài nguyên giữa các nguồn gốc khác nhau) là một cơ chế bảo mật của trình duyệt web giúp ngăn chặn các trang web khác từ việc truy cập tài nguyên từ nguồn gốc khác nhau.

Khi một trang web cố gắng truy cập một tài nguyên từ nguồn khác ( ví dụ: trang web A truy cập tài nguyên từ trang web B), trình duyệt sẽ thực hiện một yêu cầu CORS để xác định liệu việc truy cập này có được phép hay không. Yêu cầu CORS bao gồm các tiêu đề HTTP đặc biệt và nếu trình duyệt của bạn xác định rằng truy cập này không được phép nó sẽ từ chối yêu cầu đó.

CORS giúp ngăn chặn các cuộc tấn công Cross-Site Request Forgery (CSRF), một loại tấn công mà kẻ tấn công cố gắng lợi dụng quyền truy cập của một người dùng đến một trang web khác mà họ đang đăng nhập.

2. Vai trò của CORS

Vai trò của CORS trong phát triển ứng dụng web là rất quan trọng. Nó cho phép các trang web tương tác với nhau và chia sẻ dữ liệu một cách an toàn, mà không cần sử dụng các phương tiện như iFrame hay JSONP. Điều này cho phép các trang web độc lập khác nhau có thể tương tác với nhau một cách an toàn và hiệu quả.

Khi một trang web muốn truy cập một tài nguyên từ một trang web khác, trình duyệt sẽ thực hiện một yêu cầu HTTP đến trang web đó để yêu cầu tài nguyên. Tuy nhiên, trong một số trường hợp, trang web yêu cầu tài nguyên từ một nguồn khác, điều này được gọi là “cross-origin” yêu cầu. Cross-origin yêu cầu có thể gây ra các vấn đề bảo mật nhưng cũng có thể rất hữu ích trong việc phát triển các ứng dụng web phức tạp. Cụ thể, CORS giúp:

• Ngăn chặn tấn công từ xa: CORS đảm bảo rằng các trang web chỉ có thể truy cập tài nguyên từ nguồn gốc có liên quan đến trang web đó, ngăn chặn các tấn công từ xa như cross-site scripting (XSS) và cross-site request forgery (CSRF).
• Bảo mật dữ liệu: CORS giúp ngăn chặn việc truy cập trái phép vào truy cập trái phép vào dữ liệu nhạy cảm, bảo vệ thông tin quan trọng trên trang web.
• Quản lý phân quyền: CORS cho phép quản trị viên của trang web thiết lập các quy tắc cho phép hoặc từ chối truy cập tài nguyên từ các nguồn khác nhau, giúp kiểm soát quyền truy cập tài nguyên của người dùng.

Xem thêm bài viết:

- Alert manager: Cấu hình cảnh báo bằng Prometheus cho hệ thống K8s

- Monitoring trên K8s cluster với Prometheus và Grafana

- Hướng dẫn cài đặt Web server Apache trên CentOS 7

3. Làm thế nào để sử dụng CORS

3.1 Tạo truy vấn CORS bằng XMLHttpRequest

• Tạo một đối tượng XMLHttpRequest:

• Sử dụng phương thức open để khởi tạo một yêu cầu:

Ở đây, ‘GET’ là phương thức yêu cầu HTTP và ‘https://domain.com/data’ là URL của tài nguyên mà bạn muốn truy cập

• Thiết lập tiêu đề CORS:

Ở đây, ‘Content - Type’ chỉ định kiểu dữ liệu của yêu cầu, ‘Access - Control - Allow - Origin’ chỉ định các nguồn được phép truy cập tài nguyên.

• Gửi yêu cầu:

• Xử lý kết quả:

Ở đây, ‘onreadystatechange’ là một sự kiện được kích hoạt khi trạng thái của yêu cầu thay đổi. Nếu trạng thái của yêu cầu là 4 (hoàn thành) và mã trạng thái là 200 (OK), dữ liệu được trả về sẽ được lưu trong ‘xhr.response Text’. Bạn có thể xử lý dữ liệu này bằng cách in nó ra console hoặc sử dụng nó để cập nhật giao diện của trang web.

3.2 Tạo truy vấn CORS bằng jQuery

Để tạo một truy vấn CORS bằng jQuery, bạn có thể sử dụng phương thức ‘$.ajax()’ để gửi yêu cầu và xử lý kết quả trả về. Dưới đây là một ví dụ về cách tạo một truy vấn CORS bằng jQuery:

Trong đoạn mã này, ‘url’ là URL của tài nguyên mà bạn muốn truy cập, ‘type’ là phương thức yêu cầu HTTP (ở đây là GET), ‘dataType’ là kiểu dữ liệu của kết quả trả về (ở đây là JSON). Bạn cũng cần đặt ‘crossDomain’ thành ‘true’ để bật CORS.

Nếu yêu cầu được thực hiện thành công, dữ liệu sẽ được trả về trong hàm ‘success’. Nếu có lỗi xảy ra, hàm ‘error’ sẽ được gọi và bạn có thể xử lý lỗi đó

Bạn cũng có thể thêm các tiêu đề CORS bổ sung thông qua thuộc tính ‘headers’ như sau:

Ở đây, ‘headers’ chứa các tiêu đề CORS bổ sung như ‘Content-Type’ và ‘Access-Control-Allow-Origin’.

3.3 Tạo truy vấn CORS bằng Fetch API

Để tạo một truy vấn CORS bằng Fetch API, bạn có thể sử dụng phương thức ‘fetch()’ để gửi yêu cầu và xử lý kết quả trả về. Dưới đây là một ví dụ về cách tạo một truy vấn CORS bằng Fetch API:

Trong đoạn mã này, ‘fetch()’ nhận vào hai tham số: URL của tài nguyên mà bạn muốn truy cập và các tùy chọn để thiết lập yêu cầu (ở đây là phương thức GET và mode CORS). Bạn có thể thêm các tiêu đề CORS bổ sung thông qua thuộc tính ‘headers’.

Sau khi yêu cầu được thực hiện, dữ liệu sẽ được trả về trong hàm ‘then()’. Nếu có lỗi xảy ra, hàm ‘catch()’ sẽ được gọi và bạn có thể xử lý lỗi đó.

Lưu ý rằng phương thức ‘fetch()’ trả về một Promise, do đó bạn cần sử dụng các phương thức ‘then()’ và ‘catch()’ để xử lý kết quả.

Tạm kết

Trong bài viết này, chúng ta đã tìm hiểu về cơ chế CORS và cách sử dụng nó để truy cập các tài nguyên trên các trang web từ các nguồn khác. Chúng ta đã xem xét cách thiết lập CORS thông qua tiêu đề HTTP, XMLHttpRequest, jQuery và Fetch API. Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cơ chế CORS và áp dụng nó đúng cách trong các ứng dụng web của mình.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: