브라우저 API KEY 노출 관련

Question

안녕하세요
프론트엔드 개발자 취업을 준비 중인 취준생입니다

다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데
생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다

오어스나 지도, open ai 등의 api를 사용할 때,
개발자도구 네트워크 란에 들어가니까 api키가 쉽게 노출되더라구요
인증 토큰까지야 어치피 자신의 것이 노출된다고 생각하긴 하는데 api key나 다른 시크릿 키 등은 위험할 수도 있겠단 생각이 들었습니다

env가 생각보다 쉽게 노출되기 때문에 보안에 중요한 부분은 넣지 않아야 한다고 들었습니다만

위와 같은 경우, 브라우저에서 키를 보이지 않게 하는 방법이 어떤 게 있을까 해서 여쭤봅니다

조금 찾아 봤더니 사실 플랫폼 도메인과 redirect uri 같은 것을 등록하기 때문에 외부 오리진에서 api 키를 이용하는 것은 막혀 있다고 알고 있긴 한데

이렇게 잘 구성되어 있지 않은 부분이 있을 수도 있고, 말 그대로 민감한 정보가 노출될 수도 있다고 생각해서
가릴 수 있는 방법을 알고 싶습니다

FE는 ts vite react에 배포는 vercel로 진행했고
환경 변수는 버셀 프로젝트 세팅 환경 변수에 넣었습니다

백승훈 · Accepted Answer

클라이언트에서는 어떤 작업을 진행하더라도 해당 정보들을 완벽하게 숨기는 것은 불가능합니다. 해당 작업은 서버를 추가하시면 해결됩니다.

검색 키워드로 React SSR 혹은 React Server Components,  Nest.js의 Serverless Function을 참고하시면 될 것 같습니다.

https://vercel.com/docs/functions/serverless-functions