Cách giấu API KEY trên tab network trong react create-react-app(CRA)

83 lượt xem

profile picture

Ẩn danh

Ngày 12 tháng 07 năm 2023

Mình đang làm dự án bằng react CRA. Mình cho API vào file .env rồi process.env.REACT_APP_APIKEY thì authorization header trong network hiện hết cả thông tin của key. Mình có thử tìm cách để giấu cái này thì có vẻ mọi người hay làm bằng next.js là nhiều. Có vẻ dùng rewrite rồi gọi route và wrap 1 lần là được, nhưng có cách nào không cần dùng next.js mà chỉ dùng react CRA là giải quyết được không nhỉ? Mình tìm thì chỉ thấy cách làm bằng next.js thôi ấy.

Đánh giá câu hỏi ngay!

Hãy ấn Up Vote với những câu hỏi cụ thể và chi tiết

Hãy ấn Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.

1 câu trả lời

BEST

Ảnh đại diện của Kien Dinh

Chào bạn, việc giấu đi API key khỏi tab network là điều cần thiết cho bảo mật, tuy nhiên, bạn cần nắm rõ lại lý thuyết chút. Ta cùng tìm hiểu: 🌀 Có thể giấu được HTTP header hay không? Request Header là meta-data của các request HTTP, có thể hiểu nôm na đó là những thông tin có thể dùng cho mọi request của domain API nào đó. Và request header thì KHÔNG giấu đi được khỏi trình duyệt, vậy nên các phương thức xác thực người dùng truyền thống bằng cách truyền username và password trực tiếp đã bị loại bỏ, thay vào đó thì người ta dùng phương thức xác thực bằng JWT hoặc cookie/ session. 🌀 Vậy NextJS làm thế nào để giấu API key? NextJS có thể giấu API key vì bản chất Next là 1 framework SSR, việc gọi API để lấy data diễn ra ở server-side, chứ không ở trình duyệt, do đó người dùng không thể thấy được HTTP header ở tab network. Việc này cũng giống như NextJS đảm nhiệm vai trò làm backend, việc gọi API cũng giống như việc Backend truyền thống lấy data từ DB vậy. 🌀 Thế làm sao để có thể giấu API key khỏi request ở react? Biện pháp tốt nhất là bạn dùng NextJS và cơ chế SSR. Còn nếu không, thì quay lại câu hỏi: API bạn dùng để lấy nội dung gì? Nếu API key đó giấu kín, nhưng mọi data bạn lấy về đều công khai cho cả anonymous user, vậy bạn có còn cần API key không? Thông thường API key chỉ dùng cho các 3rd party service, vậy nên nó cần được encrypt và lưu trữ ở Backend, chứ không phải Frontend. Hi vọng bạn có thể tự tìm cách xử lý. Bài viết liên quan: - OAuth2 token Request Body vs Request Header: https://careerly.vn/qnas/412 - Kĩ thuật Frontend: SPA, SSG và SSR: https://careerly.vn/comments/6774?utm_campaign=self-share - Giải ảo về Authentication: https://viblo.asia/p/authentication-voi-jwt-luu-token-o-dau-la-bao-mat-nhat-aNj4vz2v46r

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.

Xem thêm

Đồng ý với Điều khoản dịch vụ Chính sách bảo mật của Careerly

Bạn đã có tài khoản rồi?

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.