[2024.04.25] 바닐라 자바스크립트에서 key값 다루기(.env 없이)

  코딩을 할 때 사용자의 민감한 개인 정보나 중요한 API KEY 값의 경우 코드에 직접 하드코딩하게 되면 개발자 도구 등의 툴을 통해 민감 정보가 쉽게 탈취당할 수 있습니다. 이를 방지하기 위해서 .env 파일을 만들어 환경 변수들을 여기에 작성해 관리 및 사용하게 되고, github에 올라가지 못하도록 .gitignore에 넣어 처리를 하게 됩니다.

  하지만 바닐라 자바스크립트 환경에서는 웹 브라우저 환경에서만 동작하기에 .env 파일을 사용할 수 없습니다. 그렇기에 React 등의 라이브러리나 다른 프레임워크 환경에서는 당연하게 기본으로 사용할 수 있던 파일을 자바스크립트 환경에서는 사용할 수 없으니 답답했습니다. 이번 TIL에서는 JS에서 어떻게 민감한 정보나, Key값을 다룰 수 있을지 알아보았습니다.

Key 값 관리는 중요하지

 

※ 먼저 바닐라 자바스크립트를 사용해 .env처럼 견고한 보안방식의 관리는 어렵다는 걸 미리 밝히고 시작합니다.

그럼 자바스크립트는 어떻게 Key 값을 관리해?

1. 백엔드의 힘을 빌리기

비교적 접근이 쉬운 프론트엔드 보다는, 상대적으로 백엔드에서 key값을 관리하는 것이 안전합니다. 백엔드의 도움을 받을 수 있는 상황에서는 서버에 저장하여 필요할 때만 호출해 오는 것이 가장 안전합니다.

너무 잘 만드신 짤..(출처는 아래에)

 

2. dotenv를 통해 .env 사용하기

앞선 이유를 토대로 순수 자바스크립트 환경에서는 .env를 사용할 수 없으나, node.js 라이브러리인 'dotenv'의 도움을 받아 .env 파일을 만들 수 있습니다. 순서는 아래와 같습니다.

 

(1) dotenv 패키지 설치

npm install dotenv

 

(2) 프로젝트 root 디렉토리에 '.env' 파일을 생성 → 환경 변수 값(민감 정보, Key값 등) 입력

JAMONG_API_KEY=JAMONGMATITDA

 

(3) 변수를 사용하고자 하는 파일의 시작 부분에 dotenv를 삽입합니다.

require('dotenv').config();

 

(4) 'process.env' 객체를 통해 환경 변수에 접근할 수 있게 되었습니다.

const jamong_key = process.env.JAMONG_API_KEY;

 

 

바닐라 자바스크립트에서 Key 값 관리하기

여러 방법을 찾아 보았지만 완벽한 보안 방법은 찾지 못했습니다. 바닐라 자바스크립트는 보통 실제 배포용보다는 연습용으로 많이 활용하기 때문에, apiKey.js라는 .env를 대체하는 파일을 만든 후, .gitignore에 등록에 git의 추적을 방지하여 github상으로는 보안을 지킨 모습을 볼 수 있습니다. 다만, 스크립트 동작 과정에서 Key값이 노출되며, 배포 시 오류가 생길 있다는 점을 염두에 두어야 합니다. 혹은 아예 암호화 방식을 쓸 수도 있습니다. 하지만 결국 스크립트 어딘가 암호화 과정과 복호화 코드가 있어야 한다는 점을 생각해보면 큰 메리트가 있을 것 같진 않습니다.

혹시 방법을 아시는 고수님들 조언을 부탁..!!

 

코로나가 어느 정도 나으니 정말 살 것 같습니다 휴... 정말 많은 자료를 찾아보았는데 바닐라 자바스크립트 환경에서는 딱히 좋은 방법이 없어 아쉬웠고, 혹시 이 글에서 밝힌 내용 외 다른 해결 방법이 있으신 분은 댓글로 알려주시면 정말 감사하겠습니다!

갈아 만든 백엔드 짤 출처: https://velog.io/@seonwoo0808/%EA%B0%88%EC%95%84-%EB%A7%8C%EB%93%A0-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%A7%A4-%EA%B0%80%EC%A0%B8%EA%B0%80%EC%8B%A4-%EB%95%8C-%ED%95%98%ED%8A%B8-%ED%95%9C%EB%B2%88%EB%A7%8C