Hiểu tường tận tùy chọn credentials trong Fetch API: Chìa khóa cho xác thực Cross-Origin

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• Tùy chọn credentials kiểm soát việc gửi thông tin xác thực (cookies, HTTP Auth, TLS certificates) trong các request.
• Ba chế độ chính bao gồm omit, same-origin (mặc định), và include.
• Việc sử dụng include đòi hỏi cấu hình CORS nghiêm ngặt từ phía server thông qua header Access-Control-Allow-Credentials.

Trong thế giới phát triển web hiện đại, việc quản lý xác thực giữa các domain không còn là điều xa lạ. Tuy nhiên, không ít lập trình viên vẫn gặp rắc rối với các lỗi CORS hoặc tình trạng request bị từ chối dù đã đăng nhập. Vấn đề thường nằm ở cách chúng ta cấu hình tùy chọn credentials trong Fetch API. Nếu bạn từng tự hỏi tại sao cookie của mình không được gửi kèm trong một request API quan trọng, thì đây chính là mảnh ghép kiến thức mà bạn đang thiếu.

Các chế độ credentials trong Fetch API

Fetch API cung cấp ba chế độ chính để kiểm soát việc gửi thông tin xác thực. Thông tin này bao gồm HTTP Authentication, cookies, và TLS Client Certificates.

1. Chế độ omit

Khi thiết lập credentials: "omit", trình duyệt sẽ hoàn toàn không gửi bất kỳ thông tin xác thực nào kèm theo request. Request sẽ luôn được xử lý như một yêu cầu ẩn danh, ngay cả khi người dùng đã có phiên đăng nhập hợp lệ.

fetch("https://api.example.com/profile", {
  credentials: "omit"
});

Chế độ này thường được sử dụng cho các tài nguyên công cộng nơi việc xác thực là không cần thiết hoặc để đảm bảo tính riêng tư tuyệt đối.

2. Chế độ same-origin (Mặc định)

Đây là hành vi mặc định của trình duyệt nếu bạn không khai báo tùy chọn này. Thông tin xác thực chỉ được gửi khi request được thực hiện tới cùng một nguồn (same-origin).

• Nếu request từ https://app.example.com tới https://app.example.com/api, credentials sẽ được gửi.
• Nếu request từ https://app.example.com tới https://api.example.com, credentials sẽ bị loại bỏ.

Việc hiểu rõ cách thức hoạt động của các request này cũng quan trọng như việc nắm vững các kỹ thuật tối ưu hóa hiệu năng Claude Code để đảm bảo hệ thống vận hành trơn tru.

3. Chế độ include

Chế độ này cho phép trình duyệt gửi thông tin xác thực ngay cả đối với các request Cross-Origin. Đây là lựa chọn bắt buộc khi bạn cần truy cập tài nguyên bảo mật từ một domain khác.

Bảng so sánh các chế độ credentials

Mối quan hệ với CORS

Khi sử dụng credentials: "include", bạn không thể chỉ cấu hình phía client. Server phải phản hồi với header Access-Control-Allow-Credentials: true. Ngoài ra, header Access-Control-Allow-Origin không được phép sử dụng ký tự đại diện (*), mà phải chỉ định rõ domain cụ thể.

Lưu ý: Việc cấu hình sai CORS có thể dẫn đến các lỗi bảo mật nghiêm trọng. Hãy đảm bảo bạn luôn kiểm tra kỹ các chính sách bảo mật trước khi triển khai, tương tự như cách bạn xây dựng công cụ phân tích hành vi người dùng để bảo vệ dữ liệu ứng dụng.

Đánh giá & Lời khuyên Thực tiễn

Từ góc độ kỹ thuật, việc sử dụng credentials: "include" mang lại sự linh hoạt nhưng cũng tiềm ẩn rủi ro về CSRF (Cross-Site Request Forgery).

• Ưu điểm: Cho phép chia sẻ phiên đăng nhập giữa các subdomain hoặc dịch vụ tin cậy.
• Nhược điểm: Phức tạp trong cấu hình CORS, yêu cầu sự đồng bộ giữa Client và Server.
• Lời khuyên: Chỉ sử dụng include khi thực sự cần thiết. Đối với các hệ thống yêu cầu bảo mật cao, hãy cân nhắc sử dụng các cơ chế xác thực dựa trên Token (như JWT) thay vì dựa vào cookie trình duyệt. Việc này cũng giúp bạn dễ dàng hơn trong việc tối ưu hóa quy trình xử lý lỗi khi gặp sự cố xác thực.

Câu hỏi thường gặp (FAQ)

Tại sao tôi dùng include nhưng vẫn bị lỗi CORS?

Có thể do server của bạn chưa trả về header Access-Control-Allow-Credentials: true hoặc Access-Control-Allow-Origin đang để là *.

Tôi có nên dùng include cho mọi request không?

Không. Điều này làm tăng nguy cơ bị tấn công CSRF. Chỉ sử dụng khi cần thiết.

Same-origin có bao gồm cả subdomain không?

Không. app.example.com và api.example.com được coi là các origin khác nhau.

Kết luận

Việc nắm vững tùy chọn credentials trong Fetch API là kỹ năng nền tảng cho bất kỳ lập trình viên Frontend nào. Nếu bạn muốn chuyên sâu hơn về các kỹ thuật phát triển, đừng quên tìm hiểu thêm về memoization từ nguyên lý cơ bản để tối ưu hóa ứng dụng của mình. Hãy để lại bình luận nếu bạn có thắc mắc và đừng quên theo dõi hi_dev để cập nhật những kiến thức công nghệ mới nhất.