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

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