react create-react-app(CRA)에서 네트워크탭 API KEY숨기는법

Question

react CRA로 프로젝트 개발하고있습니다.
.env파일에 api를 넣어서 process.env.REACT_APP_APIKEY 이런식으로 사용하고 있는데
네트워크탭에서 authorization header에 key 정보가 다 보이네요.

이걸 숨기는방법에 대해서 찾아보니 next.js를 많이 사용하는것같습니다.
rewrite정의하고 해당 route호출해서 한번 감싸주는 방식인것같은데
next.js사용하지않고 react CRA 에서만 해결할수있을 방법은 없을까요??

찾아보면 다 Next.js사용하는 방법 뿐이네요.

달레 · Answer

클라이언트 측에서는 어떤 방법으로 API 키를 저장하시더라도 난이도에 차이가 있을 뿐 100% 사용자에게 API 키가 노출이 된다고 보시면 됩니다. 따라서 API 키와 같은 민감한 정보는 서버 단에서 관리하는 것이 애플리케이션 보안에서 매우 중요한 기본 원칙입니다.

Next.js의 다른 기능도 필요하시다면 몰라도 API 키 하나 보호하겠다고 굳이 Next.js까지 쓰실 필요는 없을 것 같고요. Express.js를 이용하여 React 앱에서 보내는 API 요청에 API 키만 추가하여 그대로 API 서버에 전달하는 간단한 중개 서버를 구현하셔도 될 것 같습니다. 클라우드 플랫폼에 익숙하시다면 AWS Lambda와 같은 Serverless Function을 쓰시면 더 간단하겠고요.

참고로 Google APIs와 같은 대형 API 제공 업체에서는 API 키를 특정 도메인 네임이나 IP 주소로 제한하는 부가 기능을 제공하기도 하는데요. 하지만 이 것은 어디까지나 정말 특별한 사유로 서버 단에서 API 키를 관리하기 불가능한 상황에서 고려할 수 있는 차선책입니다. API 키를 클라이언트 단에 두는 것은 보안적으로 굉장히 위험하다고 재차 강조드립니다.