nuxt 에서 비밀키 숨기기
751
작성한 질문수 21
vue로 프론트 엔드 개발을 하고 배포를 하려고 하는데 막히는 점에 있어서 질문을 드립니다..ㅠㅠ
백엔드는 없고 api 사이트에서 회원가입을 하여 데이터를 받아옵니다. 무료지만 많은 접속을하게되면 요금이 청구되는데..
여기서 궁금한 점이 있습니다.
1. api-key를 vue에서 숨길 방법은 없나요? dotenv 설치 후 .env를 이용하여 봤는데 F12 개발자도구 탭에서
Requests Headers 를 보면 api 키가 적나라하게 나오더라고요.. 만약 숨길 방법이 없다면 해커들이 제 api key 를 보고
악용을하여 어마어마한 요금이 청구되는 사태는 막을수 없나요?
Nuxt를 이용하여 ssr:false , target:'static' 으로 vue 개발을 했고 netlify 에서 배포 예정입니다.
@nuxtjs/dotenv 모듈을 이용하였습니다.
답변 1
1
https를 적용하시면 됩니다. 그러면 암호화되므로 해커들이 내용물을 확인할 수 없습니다.
0
위 사진과 같이 headers 에 env 를 이용하여 보냈습니다
F12 의 request header 태그에 이렇게 적나라하게 나오네요.. ㅠㅠ
진짜 이것 때문에 1주일 동안 해메고 있습니다.. https 는 적용된 상태이구요
nuxt를 server side 에서는 숨기는 방법이 몇 있던데.. client side 에서는 정녕
방법이 없는건가요..포기해야 하는건가요 ㅠㅠ
0
혹시 질문자분의 서비스를 사용하는 사람들이 저걸 복사붙여넣기해서 자신의 서비스에 사용할까봐 걱정하시는 건가요? 그게 가능하다면 저 api 설계가 잘못된 것입니다. 원래 클라이언트에서 사용하는 키는 api 서버쪽에서 도메인까지 같이 검증해서 다른 도메인에서는 못 쓰게 만드는게 기본입니다. 그런게 없다면 저것은 서버에서 보내도록 설계된 것입니다.
즉, 브라우저에서 요청을 보낼게 아니라 nuxt 프론트 서버에서 요청을 보내도록 시키고, 브라우저는 nuxt 프론트 서버로 요청을 보내야 하는 겁니다(브라우저 -> nuxt 서버 -> api 서버)
0
감사합니다 아직 많이 부족한거 같아요..
조현영님 말대로 도메인을 확인해주는 기능이 없어서 답답하네요.
친절한 답변 감사합니다. 강의 정말 도움많이 받고있습니다!
npm run dev 할 때 에러가 발생합니다.
0
156
1
해당 강의는 리뉴얼 예정은 따로 없나요?
0
341
1
강의는 언제까지 업데이트 된 내용인가요?
0
339
2
실습 환경 문의(Node 버전)
0
377
1
로그인 새로고침시 풀림
0
304
1
안녕하세요! 로그인 유지 질문 드립니다!
0
416
1
웹 서버 관련해서 질문드립니다.
0
451
1
버전때매 질문 드립니다!!
0
320
1
이 강의는 vue3는 아닌가요??
0
380
1
vsCode에 관한 질문입니다
0
495
1
v.trim()이 타입에러가 뜹니다...
0
349
1
express.static('uploads')
0
352
2
STRING이 인식이 안되는데 이유알수있을까요?
0
455
2
<v-lsit-item-title> 에러
0
416
2
vue cli 를 실무에서도 사용하지 않으시나요?
0
327
1
선생님 처음 환경 셋팅 관련 문의드립니다.
0
393
1
nuxtServerInit 무한 로딩
0
987
3
Nginx Cookie 설정
0
736
2
상태가 204번인경우에는 어떻게 처리를 해야하나요?
0
302
1
선생님 nuxt 관련질문드립니다.
0
357
1
인덱스 비교로 삭제해도 될까요?
0
387
1
질문 드립니다!
0
335
2
안녕하세요
0
231
1
궁금한점이있습니다
0
241
1