민감 정보 노출
Sensitive Information Exposure
설명
Webpack DefinePlugin에 process.env 전체를 주입하면 빌드 시 모든 환경변수가 번들 안의 리터럴로 치환됩니다. 프론트엔드 번들은 누구나 내려받을 수 있으므로, API 키·토큰·비밀값이 그대로 노출될 수 있습니다. 공격자는 배포된 JS 파일(또는 source map)을 열람하거나, 코드 내에서 노출된 값들을 검색해 비밀 정보를 수집할 수 있습니다.
잠재적 영향
자격 증명/API 키 노출: 번들에 포함된 키·토큰을 누구나 뷰-소스/DevTools로 확인 가능.
백엔드 무단 접근: 노출된 자격정보로 API 호출, 데이터 조회·변조 시도.
계정 남용 및 과금 피해: 제3자 서비스 키 악용으로 트래픽 유발, 비용 증가.
규정 위반 및 평판 하락: 개인정보/보안정책 위반으로 법적 제재 및 신뢰도 하락.
해결 방법
DefinePlugin에 process.env 전체를 전달하지 말고, 공개가 허용된 소수의 키만 화이트리스트로 명시해 주입하십시오.
서버 전용 Secret은 절대 클라이언트로 노출하지 마십시오. 공개 허용 변수에 PUBLIC_ 같은 접두사를 부여해 구분하는 정책을 사용하십시오.
.env 파일을 용도별로 분리(.env.server, .env.client, .env.production 등)하고, CI/CD에서 클라이언트 빌드에 필요한 공개 변수만 export하십시오.
webpack DefinePlugin에서 개별 키를 정의하거나 EnvironmentPlugin(['NODE_ENV','PUBLIC_API_BASE'])처럼 지정된 목록만 허용하십시오.
취약한 코드 및 안전한 코드 예시
취약한 코드
안전한 코드
설명:
취약한 코드: process.env 전체를 직렬화하여 번들에 포함하면, 원래 서버 전용이어야 할 비밀값(예: API 키, 액세스 토큰, DB 연결 정보)이 공개 아티팩트에 남습니다. 사용자는 배포된 JS 파일이나 source map을 열람하여 해당 값을 쉽게 획득할 수 있습니다.
안전한 코드: DefinePlugin으로 공개가 허용된 변수만 개별적으로 정의해 노출 범위를 최소화합니다. PUBLIC_ 등 접두사 정책을 통해 클라이언트로 내보낼 변수만 선택하고, 나머지 Secret은 서버에서만 사용하도록 분리합니다. 이렇게 하면 번들에 민감정보가 포함되지 않아 유출 위험이 사라집니다.
참조
Last updated