개발자
프론트엔드 ENV Key 관리 방법
현재 Next.js로 프로젝트를 진행하고 있는 중 궁금한 점이 있어 질문 남깁니다 KEY 값을 ENV 파일에 등록 후 사용중인데 NEXT_PUBLIC으로 붙여 클라이언트측에서도 접근 가능하게 만들어 사용중인데 이렇게 되면 키가 공개되어 보안상 위험하다고 생각이 들었습니다 혹시 어떤 방식으로 클라이언트 측에서 접근이 가능한 KEY 값을 관리하는지 방법에 대해 공유해주시면 감사하겠습니다!
답변 2
기본적으로 민감한 값은 클라이언트에 노출시키지 않아야 합니다. 그래서 환경변수에는 말 그대로 환경에 따라 달라지는 단순한 값들을 넣는게 맞습니다. 노출되면 안되는 값들은 서버쪽 환경변수나 db에서 관리하시는게 원래는 맞습니다. Next.js 사용하신다면 퍼블릭 프리픽스를 생략하여 next.js 서버만 해당 값을 참조하도록 만드시고, 클라이언트에서 참조가 꼭 필요하다 하면 서버측 액션이나 라우트 핸들러를 만들어서 호출해서 간접 사용하시는 것을 추천드립니다. 보안이 정말 중요한 키값들은 vault와 같은 외부 솔루션을 사용해서 안전하게 관리하는 것도 방법입니다. 다만 비용이 들고 러닝 커브도 다소 있습니다.
오? 클라이언트에서 next 서버의 환경에 접근할 수 있나요? 설령 접근한다 하더라도 동적 변경이 불가능한 대상이라 next 서버를 재실행하지 않으면 변경한 값을 적용하지 못할텐데요. 이것도 된다고 전제하면 사용자에 의해서 셧다운이 일어나는 서버라는 이야기이고요. 본문의 상황이 신기하네요.
조세영
프론트엔드 엔지니어 • 3월 31일
NEXT_PUBLIC 프리픽스를 붙인 환경변수를 사용하는 코드가 자바스크립트 번들로 만들어지는 과정에서 실제 값으로 변경되는걸로 알고 있습니다. 그렇게 서버에서 브라우저로 보내온 번들을 클라이언트 단에서 쉽게 확인할 수 있기때문에 환경변수값이 노출되는것을 우려하는 상황인것 같습니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
3월 31일
KEY를 안전하게 관리하는 방법은 여러 가지가 있지만, 가장 흔하게 사용되는 방법은 다음과 같습니다: 1. **.env 파일을 gitignore에 추가**: KEY 값들이 저장된 .env 파일을 Git에 절대로 업로드하지 않아야 합니다. 이렇게 하면 소스 코드와 함께 KEY 값들이 공개되는 것을 막을 수 있습니다. 2. **서버측에서 처리**: NEXT_PUBLIC으로 시작하는 환경변수는 클라이언트사이드에서 드러나므로, 서버사이드에서 가능한 작업은 모두 처리해 클라이언트로 보내지 않도록 하는 것이 좋습니다. 3. **Vercel 또는 Netlify와 같은 호스팅 서비스의 환경 변수 기능 사용**: 이런 서비스들은 보안적인 관점에서 환경 변수를 저장할 수 있는 방법을 제공합니다. 4. **Secrets Manager 사용**: AWS Secrets Manager 또는 Google Cloud Secret Manager와 같은 외부 서비스를 활용하여 중요한 키 값을 안전하게 관리할 수도 있습니다. 5. **환경별 .env 파일 분리**: 개발(.env.development), 스테이징(.env.staging), 프로덕션(.env.production) 등 환경에 따라 다른 .env 파일을 사용하여 키 값을 분리하고 관리합니다. 항상 어떤 정보를 공개적으로 노출할지, 어떤 정보를 보호해야 할지 신중하게 결정하는 것이 중요합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!