Cross-Origin Resource Sharing (CORS) là cơ chế bảo mật quan trọng được trình duyệt web triển khai để bảo vệ người dùng khỏi các tập lệnh có khả năng gây hại. Tuy nhiên, đây cũng là một nguồn gây thất vọng phổ biến cho các nhà phát triển, đặc biệt là những người mới tham gia phát triển web. Bài viết này nhằm mục đích làm sáng tỏ CORS, giải thích lý do tại sao nó tồn tại và cung cấp các chiến lược để giải quyết các vấn đề liên quan đến CORS.
CORS là gì?
CORS là tính năng bảo mật được triển khai bởi trình duyệt web để kiểm soát quyền truy cập vào tài nguyên (như API hoặc fonts) trên trang web từ tên miền khác bên ngoài tên miền mà tài nguyên đó bắt nguồn.
Nguồn gốc
Để hiểu CORS, trước tiên chúng ta cần hiểu Same-Origin Policy. Chính sách này là biện pháp bảo mật cơ bản trong trình duyệt web, hạn chế cách tài liệu hoặc tập lệnh được tải từ nguồn có thể tương tác với các tài nguyên từ nguồn khác. Nguồn được xác định bằng sự kết hợp của giao thức, miền và cổng.
Ví dụ:
https://example.com/page1 và https://example.com/page2 có cùng nguồn gốc.
https://example.com và http://example.com có nguồn gốc khác nhau (giao thức khác nhau).
https://example.com và https://api.example.com có nguồn gốc khác nhau (tên miền phụ khác nhau).
Tại sao CORS tồn tại
CORS được giới thiệu để cho phép máy chủ chỉ định nguồn nào được phép truy cập tài nguyên của chúng, do đó nới lỏng Chính sách cùng nguồn theo cách có kiểm soát. Điều này rất quan trọng đối với các ứng dụng web hiện đại thường cần thực hiện yêu cầu tới API được lưu trữ trên các miền khác nhau.
Lỗi CORS thường gặp
Các nhà phát triển thường gặp lỗi CORS khi cố gắng thực hiện yêu cầu từ ứng dụng web đến API trên một miền khác. Một lỗi CORS điển hình có thể trông như thế này:
Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.
CORS hoạt động như thế nào
Khi một ứng dụng web thực hiện yêu cầu liên nguồn gốc:
1. Trình duyệt gửi yêu cầu cùng với Header Origin nêu rõ nguồn gốc của trang yêu cầu.
2. Sau đó, máy chủ có thể phản hồi bằng:
Header Access-Control-Allow-Origin chỉ rõ nguồn gốc nào được phép.
Các Header CORS khác kiểm soát các phương thức, headers, v.v.
3. Nếu phản hồi của máy chủ không bao gồm các header CORS thích hợp, trình duyệt sẽ chặn phản hồi.
Giải quyết các vấn đề CORS
1. Cấu hình phía máy chủ
Cách thích hợp nhất để giải quyết các vấn đề CORS là cấu hình máy chủ để gửi đúng headers CORS. Điều này thường bao gồm:
- Thiết lập header Access-Control-Allow-Origin để chỉ định nguồn gốc được phép.
- Cấu hình các header CORS khác khi cần (ví dụ: Access-Control-Allow-Methods, Access-Control-Allow-Headers).
Ví dụ trong Node.js với Express:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'https://myapp.com'
}));
2. Sử dụng Proxy
Nếu bạn không kiểm soát được máy chủ, bạn có thể thiết lập máy chủ proxy để thêm các tiêu đề CORS cần thiết. Điều này thường được thực hiện trong môi trường phát triển.
Ví dụ sử dụng tính năng proxy của Create React App:
TRONG package.json:
{
"proxy": "https://api.example.com"
}
3. JSONP (chỉ dành cho các yêu cầu GET)
JSONP (JSON có đệm) là kỹ thuật cũ hơn có thể bỏ qua CORS cho các yêu cầu GET bằng cách sử dụng thẻ script, không tuân theo Chính sách cùng nguồn gốc.
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
Lưu ý: JSONP được coi là lỗi thời và kém an toàn hơn so với triển khai CORS phù hợp.
Kết luận
Mặc dù CORS có thể gây khó chịu, nhưng đây là một tính năng bảo mật quan trọng. Bằng cách hiểu cách thức hoạt động và triển khai các giải pháp phù hợp, các nhà phát triển có thể tạo ra các ứng dụng web an toàn và chức năng tương tác với các tài nguyên trên nhiều miền khác nhau.