개발자
안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, 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

상연
작성자
프론트엔드 개발자 • 2024년 01월 03일
감사합니다!!!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!