API Keys 보호하기

나는 Vanilla JS로 해당 프로젝트를 완성했다. js파일에 내 고유 API Key를 그대로 노출시킨 채로 말이다..

큰 문제를 안고 서비스를 시작하자마자 AWS에서 메일이 날라왔다.

 

AWS 경고 메세지

대충 내용은 이러했다. 내 AWS Acitve Key와 Secret Key가 노출되었다는 내용이다.

하지만 난 권한 설정할 때 내가 사용하는 번역 기능만 가져와서 실행되도록 했기 때문에 별로 신경 안썼지만

마음 한 켠에 불안함이 남아있었다.

 

만약 React였다면 .env 환경변수 파일에 내 APIKeys를 입력해놓고 가져다 썼겠지만 Vanilla JS에서는 어려웠다.

그래서 로컬에서는 key.js파일을 만들어서 불러오게끔 설정했고, .gitignore에 key.js를 추가해줬다.

 

이상태로 깃 레퍼지토리에 푸쉬하고 netlify에서 배포한다면 key.js파일이 없어서 에러가 발생한다.

그래서 난 이렇게 해결했다.

 

Netlify Build Setting

netlify bulid setting에 가서 Build command에 

echo -e " const AWSkey= 'key값'; export default AWSkey;" > key.js

명령어로 build하면서 key.js파일을 생성해줬다.

 

이렇게 깃헙레퍼지토리에 key.js를 노출하지 않고 빌드를 완료했다.