인프런 커뮤니티 질문&답변

yongsoocho님의 프로필 이미지
yongsoocho

작성한 질문수

Vue.js + TypeScript 완벽 가이드

vue 와 .env

작성

·

284

1

vue로 프론트 엔드 개발을 하고 배포를 하려고 하는데 막히는 점에 있어서 질문을 드립니다..ㅠㅠ

백엔드는 없고 api 사이트에서 회원가입을 하여 데이터를 받아옵니다. 무료지만 많은 접속을하게되면 요금이 청구되는데..

여기서 궁금한 점이 있습니다.

1. api-key를 vue에서 숨길 방법은 없나요? dotenv 설치 후 .env를 이용하여 봤는데 F12 개발자도구 탭에서 

Requests Headers 를 보면 api 키가 적나라하게 나오더라고요.. 만약 숨길 방법이 없다면 해커들이 제 api key 를 보고

악용을하여 어마어마한 요금이 청구되는 사태는 막을수 없나요?

Nuxt를 이용하여 ssr:false ,  target:'static' 으로 vue 개발을 했고 netlify 에서 배포 예정입니다. 

@nuxtjs/dotenv 모듈을 이용하였습니다.

답변 1

0

안녕하세요 용수님, 좋은 질문 주셨네요 :) 말씀하신대로 API 키는 환경 변수 파일에 관리하는 것이 좋습니다. 다만 네트워크 요청을 중간에 해커가 가로채는 부분에 대해서는 클라이언트 레벨에서 할 수 있는 건 딱히 없을 것 같아요. 해당 API 키를 가로채서 해커가 남용하지 못하게 하는 부분은 해당 API를 제공하는 서버 레벨에서 인증을 추가로 해줘야 할 것 같습니다 :)

yongsoocho님의 프로필 이미지
yongsoocho

작성한 질문수

질문하기