개발자
header에 민감한 정보가 노출되고 있는데, 어떤 방식으로 숨길 수 있을까요?
안녕하세요. 현재 네이버 검색 api를 사용하던 중 요청을 보낼때 header에 client id같은 민감한 정보가 나타나고 있어서 해결을 하려고 하는 중입니다. 서버가 따로 존재하지 않아서 front에서 직접 네이버 api를 사용해 요청을 하고 있는 중인데 어떤식으로 숨길 수 있을 지 궁금합니다..!
답변 1
클라이언트에서 민감한 정보를 숨길 수 없습니다. 여타 다른 프론트엔드 프로젝트에서 env 파일을 통해서 민감한 정보를 숨기는 것을 권장하는 이유도 클라이언트에 코드가 도착하게 되면 그 이후로부터는 정보를 숨길 수 없기 때문입니다. https://ko.vite.dev/guide/env-and-mode#env-files 만약 검색 API를 사용하고자 하신다면 간단한 서버 프레임워크(ex. expressjs / honojs / ...)를 사용하여 클라이언트 시크릿을 숨기는 것을 권장합니다.
익명
작성자
1월 3일
답변 감사합니다..! 많이 깨달아 갑니다 :)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
1월 3일
서버 없이 클라이언트 측에서 API를 직접 호출하면서 민감한 정보를 숨기는 것은 매우 어렵습니다. 웹 브라우저로 접근 가능한 정보라면, 사용자가 확인할 수 있는 이유입니다. 최선의 방법은 API를 호출하는 작업을 서버에 위임하는 것입니다. 이렇게 하면 서버 코드 내부에서 민감한 정보를 안전하게 보관할 수 있습니다. 이런 식으로 프록시 서버 역할을 하는 백엔드가 작동합니다. 그러나 반드시 클라이언트 측에서 처리해야 하는 상황이라면, 웹 애플리케이션에 구성 요소를 숨기는 여러 가지 방법들을 사용할 수 있습니다. 예를 들어, 웹팩과 같은 모듈 번들러를 사용하여 환경 변수를 주입하고 애플리케이션에 빌드 타임에 이러한 값들을 주입할 수 있습니다. 하지만 다시 말하지만, 그런 임시 해결책조차도 완전히 안전하지 않습니다. 왜냐하면 브라우저 개발자 도구와 같은 도구로 스크립트 소스 코드에 접근하는 것은 여전히 가능하기 때문입니다. 따라서 가장 안전한 방법은 서버를 구현하고 이 서버에서 API 호출을 수행하는 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!