웹에서 api키는 어떻게 숨겨야 되나요?(보안적으로 어떻게 해야 맞는건가요?)

Question

웹개발을 할때 api키는 무조건 숨겨야 되는 영역이라고 생각하는데요(네이버지도api 받아서 웹에서 작업 하던 도중)이걸 어떻게 숨겨야 되는지가 궁금합니다!저의 경우 프론트 위주로 공부해왔습니다그러다보니 백엔드까지 혼자 처리하기엔 뭔가..? 많다고 해야될까요백엔드는 express를 공부해 왔습니다웹서버(express)없이 프론트만으로 배포 했을때키값을 숨기는 방법에 대해 알아 보았는데 배포 할려는 사이트 네트리파이 같은데에서 키값만 따로 보관 하면된다찾아 보던 중 서버를 만들고 관리하기에는 많은 노력이 필요 하다보니 아래 링크 영상에서는 cloudflare workers(서버리스)에 키값 보관을 이야기 하시는 것 같고요링크1구글에 생각보다 프론트에서 api키를 숨기는 법 치니까 내용은 나오는데결론적으로 이런 방법을 사용하면 브라우저 단에서 개발자도구 네트워크 탭을 보면키값이 노출된다고 하는 이야기가 많던데 이렇게 사용해도 문제는 없나요?(네이버 지도 연결하던 과정 중에 api키 발급 받는 부분에 특정url이나 ip에서만 처리 가능하도록 설정하는 게 있던데 괜찮지 않나..?하는 생각이 들곤 했습니다?)키 값이 노출 되었다고 과정했을때 해커가 웹사이트 ip주소나 url을 제가 배포한 브라우저 ,서버가 아니더라도 개인적으로 설정 해서 사용 가능 한건가요? 그정도는 거의 불가능하니 그냥 써도 되는건가요?쉽지 않지만 env파일에 키값 잘 낮두고백엔드에서 처리 한뒤 프론트에 안전하게 두어야 되는건가요?(설명이 좀 약하긴 합니다.. 백엔드를 잘못하기도 하고 아직 초보라서요)링크2유명하신 분 글 보니까 결국 정석은 express사용해서 웹서버를 만들어야 되는게 정석이겠죠?(만약에 실제 운영중인 서비스나 외주를 받아서 개발할때 상황을 가정 하여 물어보았습니다혼자 개인프로젝트면 뭐.. 누가 들어오기라도.. 하진 않으니까요뭔가 조금 더 완벽한 프로그래밍을 하고 싶어서 남겨봅니다!)지저분한 글이지만 읽어 주셔서 감사합니다!

kimhwanhoon · Answer

원래 숨길 수 있는게 아닙니다. 숨기는것도 아니고요. 어느 사이트건 로그인할때 이메일 비밀번호는 다 브라우저 네트워크탭 단에서 확인 가능합니다. 그런데 그런지 몇 십년도 지났고, 아직도 oauth2.0로 넘어가지 않은 회사들도 많습니다. (인스타그램 등) 그 이유는 브라우저 단에서 확인이 되더라도 그게 실제 해킹으로 이뤄지려면 유저의 컴퓨터나 네트워크가 완전히 해킹이 되어야하기 때문입니다. 그리고 api키도 공개키가 있고, 시크릿키가 있는데 클라이언트단에서는 공개키를 사용하는겁니다. 시크릿키는 오직 서버에서만 사용하구요. 질문자님 말 처럼 해킹 해커.. 가 그렇게까지 해가며 api키 하나 얻으려고 하는 행동을 차라리 직접 사진들이나 노트같은것을 해킹하여 다른 비밀번호들 빼내는게 더 이득이기도 하지요..

ansdbduf · Answer

3rd party key는 proxy server 구현이 정석아닐까요?

ㅇㅈㅇ · Answer

키는 서버 밖으로 나가면 안됩니다.클라이언트가 요청하는 건 서버도 다 요청할 수 있고 클라이언트가 받아오는 건 서버도 다 받아올 수 있습니다.서버에서 요청하고 서버에서 받은다음 클라이언트 주면 됩니다.

장독깨기 · Answer

기본적으로 프런트에, 그니까, 브라우저에 뭘 숨길 수가 없습니다. 당연합니다.그니까, 숨길게 있으면 서버에 둬야 합니다.api 키는 숨겨야 하는가?가령, 이 api 가 유료입니다. 어떻게 해야 합니까. 당연히 숨겨야 합니다.그리고, 이런 API 는 브라우저에서 호출 못하게 CORS 로 막아 둡니다.지금 프런트 쪽만 공부하니까, 이런 고민을 하는거 같은데요.너무 고민 마시고, 진도 나가세요, 그리고, 백앤드 쪽도 관심 가지고 공부하는게 좋을거 같습니다.

초보개발자111 · Answer

네이버,카카오 지도쓸때 프론트단에서 키 노출되는거 말씀하시는거죠? 저도 찾아봤었는데 프론트단에서 감출수는 없다고 하더라고요 웹팩?으로 패키징해도 다 js랑 html로 전환하는 방법이 있다하더라구요 최대한 소스 구조를 복잡하게 하던가 해야될것같아요 그리고 카카오 지도 api등록할때 도메인도 등록하게하잖아요? 거기서 한단계 보안이있는것같아요

오후 · Answer

추가적으로 호출 가능한 ip 도메인등 제약을겁니다.

세브라이드 · Answer

숨겨야 되는 키가 있고 숨기지 않아도 되는 키가 있습니다.브라우저에서 쓰는 키는 숨기지 않아도 되는 키입니다.서버에서 쓰라고 있는 키가 브라우저로 유출되었으면 그건 대형사고고요.

Llux lux · Answer

네이버 api 설정쪽에 호출 URL을 설정할 수 있지 않나요?그걸로 접근 제어가 되니 키만 가진다고 호출 해서 사용할 수는 없습니다.카카오 api 설정에도 있었던 걸로 기억하고요.

웹에서 api키는 어떻게 숨겨야 되나요?(보안적으로 어떻게 해야 맞는건가요?)

8개의 답변

Q&A 목록