개발자

브라우저 API KEY 노출 관련

2024년 01월 02일조회 330

안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, open ai 등의 api를 사용할 때, 개발자도구 네트워크 란에 들어가니까 api키가 쉽게 노출되더라구요 인증 토큰까지야 어치피 자신의 것이 노출된다고 생각하긴 하는데 api key나 다른 시크릿 키 등은 위험할 수도 있겠단 생각이 들었습니다 env가 생각보다 쉽게 노출되기 때문에 보안에 중요한 부분은 넣지 않아야 한다고 들었습니다만 위와 같은 경우, 브라우저에서 키를 보이지 않게 하는 방법이 어떤 게 있을까 해서 여쭤봅니다 조금 찾아 봤더니 사실 플랫폼 도메인과 redirect uri 같은 것을 등록하기 때문에 외부 오리진에서 api 키를 이용하는 것은 막혀 있다고 알고 있긴 한데 이렇게 잘 구성되어 있지 않은 부분이 있을 수도 있고, 말 그대로 민감한 정보가 노출될 수도 있다고 생각해서 가릴 수 있는 방법을 알고 싶습니다 FE는 ts vite react에 배포는 vercel로 진행했고 환경 변수는 버셀 프로젝트 세팅 환경 변수에 넣었습니다

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

인기 답변

백승훈님의 프로필 사진

클라이언트에서는 어떤 작업을 진행하더라도 해당 정보들을 완벽하게 숨기는 것은 불가능합니다. 해당 작업은 서버를 추가하시면 해결됩니다. 검색 키워드로 React SSR 혹은 React Server Components, Nest.js의 Serverless Function을 참고하시면 될 것 같습니다. https://vercel.com/docs/functions/serverless-functions

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!