AI가 만든 코드에 비밀 키가 클라이언트로 노출돼요
API 키·토큰·데이터베이스 연결 문자열이 브라우저 번들에 포함되었는지 확인하는 가이드입니다.
빠른 답변
브라우저에 전달된 값은 공개된 값으로 취급합니다. 서버 비밀값은 서버 코드에서만 읽고, 이미 노출된 자격 증명은 교체를 검토해야 합니다.
- 적용 범위
- 이 가이드의 시작 증상과 각 분기 조건이 일치하는 경우문맥: 바이브 코딩
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 대상
- 사이트 운영자, 웹 에이전시, 프리랜서
이 가이드가 맞는 경우
- 보안 위험
- 설정 누락
상황별 다음 단계
호스팅사·개발자에게 전달할 내용
변경 전 기록
- 노출된 변수 이름·노출 위치·배포 커밋과 자격 증명 교체 여부를 기록합니다.
- 실제 키·토큰·쿠키·소스맵 원문은 전달하지 않습니다.
알아둘 점
확인 순서
- 실제 비밀값 대신 변수 이름과 노출 위치를 기록합니다.
- 프로덕션 번들·소스맵·HTML·네트워크 응답에서 값이 브라우저로 전달되는지 확인합니다.
NEXT_PUBLIC_,VITE_접두사 변수에 서버 전용 값을 넣었는지 찾습니다.- 노출이 확인되면 자격 증명 교체, 사용처 점검, 서버 전용 코드 이동 순서를 결정합니다.
브라우저에 전달된 값은 누구나 볼 수 있다고 가정하십시오. 변수 이름만 바꾸는 것으로 이미 배포된 자격 증명의 노출을 되돌릴 수 없습니다.
참고 자료
Guides: Environment Variables | Next.js (새 창에서 열림)
Next.js · 공식 자료 · 확인 범위: NEXT_PUBLIC_ 접두사가 붙은 변수는 브라우저 JavaScript에 인라인될 수 있으므로 비밀값에 사용하지 않아야 합니다. · 확인일: 2026-08-04
Env Variables and Modes | Vite (새 창에서 열림)
Vite · 공식 자료 · 확인 범위: VITE_ 접두사가 붙은 변수는 클라이언트 소스 코드에 노출되므로 비밀 정보를 담지 않아야 합니다. · 확인일: 2026-08-04