개발자
안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, 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일
감사합니다!!!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 02일
API 키와 같은 민감한 정보를 숨기는 데는 여러 가지 방법이 있습니다. 하지만 클라이언트 사이드 자바스크립트에서 완전히 숨기는 것은 불가능합니다. 왜냐하면, 자바스크립트 코드는 결국 사용자의 웹 브라우저에 의해 로드 및 실행되므로, 악의적인 사용자가 코드를 복사하거나 조작하는 것을 막을 수 없습니다. 그래서 일반적으로 이 문제를 해결하기 위해서 서버 측에서 리퀘스트를 처리하거나 프록시 서버를 설정하는 방법을 사용합니다: 1. **서버 측 요청 처리:** API 요청을 직접적으로 클라이언트에서 보내는 대신에, 그 요청을 서버로 전송합니다. 그런 다음, 서버에서 API 키를 추가하여 실제 요청을 외부 API로 전송합니다. 이렇게 하면 민감한 정보가 클라이언트 코드에 등장하지 않습니다. 2. **프록시 서버 설정:** 프록시 서버를 사용하면 API 키 정보를 숨길 수 있습니다. 클라이언트 앱은 프록시 서버에 요청을 보내고, 프록시 서버는 이 요청에 API 키를 첨부해서 타겟 서버로 전달합니다. 이렇게 하면 API 키는 실제로 클라이언트 사이드 코드에 노출되지 않으므로, 웹사이트의 사용자들은 이를 볼 수 없습니다. 그러나 이 방법들을 사용하기 위해서는 백엔드 개발 경험이 필요하고 추가적인 인프라가 필요할 수 있습니다. 그리고 문제가 되는 API 가 CORS policy 에서 외부 요청을 제한한다면, 위와 같은 방법으로 클라이언트에서 보내는 요청을 막을 수 있습니다. 다만, 특정 API가 정말 중요하거나 민감한 정보일 경우에는 그런 정보를 클라이언트에 두지 말아야 합니다. 대신 해당 로직은 모두 서버에서 처리해야 합니다. 요약하자면, 완벽한 해결책은 없으며 각 상황에 따른 최선의 방법을 찾아서 적용해야 합니다. 프론트엔드 단에서 완전히 숨길 수 있는 방법은 없기 때문입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!