Vue 디버거

다크 모드

보안 · 누출 차단 ​

이 도구의 1순위 가치는 "운영(production) 서버에 절대 실리지 않는다" 입니다. 이 페이지는 그 보장의 근거(3층 방어)와 디버거가 켜진 검증계에서의 데이터 거버넌스·노출 표면을 한곳에 모았습니다. 금융권 등 운영 배포를 절대 차단해야 하는 환경의 보안·플랫폼 리드를 위한 단일 출처입니다.

이 페이지의 내용은 2026-06-17 Opus 4.8 7에이전트 금융권 보안 감사 결과를 반영합니다(전체 리포트: 저장소 docs/DEBUGGER-SECURITY-AUDIT-2026-06-17.md).

운영 누출 0 — 3층 방어 ​

층역할무엇누가 책임
① 코드 패턴예방MODE === 'staging'을 박은 정적 분기 → production 빌드에서 디버거가 dead-code로 통째 제거소비 코드
② CI 누출 게이트증명npx vue-debugger-leak-check <dist> 가 실제 배포 산출물을 스캔, 흔적 있으면 배포 차단자사 CI
③ 트립와이어탐지디버거가 활성화되면 콘솔에 끌 수 없는 경고 — 게이트가 깨져도 운영 모니터링이 즉시 포착라이브러리(자동)

"라이브러리만으로 100% 자동 보장"은 거짓입니다

보장의 주어는 라이브러리가 아니라 "소비측 정적 분기(①) + 자사 CI 누출 게이트(②)" 이며, 이 둘은 조직이 책임집니다. ③ 트립와이어는 그 위의 탐지 안전망입니다. 아래 세 층을 모두 갖추면 운영 누출은 기계적으로 0이 됩니다.

1층 — mode 명시 분기 (예방) ​

디버거 부착을 반드시 이 정적 분기 안에 두세요:

ts
if (import.meta.env.DEV || (import.meta.env.MODE === 'staging' && import.meta.env.VITE_DEBUGGER === 'on')) {
  const { attachDebugger } = await import('@platform/vue-debugger')
  attachDebugger(app)
}
  • import.meta.env.MODE·VITE_DEBUGGER는 빌드 시 리터럴로 정적 치환됩니다. production 빌드(mode !== 'staging')에서는 조건 전체가 상수 false가 되어, 이 블록과 그 안의 동적 import()까지 번들에서 통째로 사라집니다(디버거 0바이트).

VITE_DEBUGGER 단독 분기 금지 — 셸/CI 환경변수 누출 경로

if (import.meta.env.VITE_DEBUGGER === 'on')만 쓰면, Vite .env는 빌드 --mode와 무관해서 셸/CI 환경변수나 공통 .env에 VITE_DEBUGGER=on이 남으면 production 빌드에도 디버거가 그대로 실립니다(보안 감사가 직접 재현한 누출 경로). MODE === 'staging'을 AND로 묶으면 production은 MODE 리터럴이 'production'이라 정적 false로 굳어, 환경변수가 새도 누출되지 않습니다. 또 조건을 boolean 변수·동적 키(import.meta.env[flag])로 빼지 마세요 — 정적 치환이 깨져 dead-code 제거가 무력화됩니다.

검증계 빌드는 vite build --mode staging으로 만들고, VITE_DEBUGGER=on은 .env.staging에 둡니다(셸 변수 X). 자세한 환경 매트릭스는 환경별 설정을 보세요.

webpack/Vue CLI도 같은 누출 경로가 있습니다 0.17

DefinePlugin은 셸/CI의 VUE_APP_* 환경변수도 정적 치환하므로, NODE_ENV 체크에 VUE_APP_DEBUGGER === 'on'을 OR로만 붙인 분기는 CI 잔존 env 하나로 production에 디버거가 실릴 수 있습니다. 빌드 스크립트에 묶인 상수와 AND로 묶으세요 — 연동의 webpack 예시에 안전 패턴(__VDBG_STAGING__)이 있습니다. 어느 빌드 체계든 2층 게이트(vue-debugger-leak-check)를 CI에 배선하는 것이 최종 안전망입니다.

2층 — CI 누출 게이트 (증명) ​

코드 패턴이 예방이라면, 게이트는 증명입니다. 사람은 실수하므로, 실제 배포될 dist를 만든 직후 디버거 흔적을 기계적으로 스캔해 잡히면 빌드를 실패시킵니다. 패키지에 동봉된 명령을 자사 CI/CD의 blocking(required) 스텝으로 두세요.

bash
npm run build                       # 실제 배포 산출물(production)
npx vue-debugger-leak-check dist    # 누출 발견 시 exit 1 → 파이프라인 실패 → 배포 차단
  • 디버거 컴파일 코드에만 존재하는 문자열 마커 3종(__VUE_DEBUGGER__·vue-debugger-host·__vdbgWrapped, minify로도 보존)을 재귀 스캔합니다. 런타임 의존성 0.
  • grep -rl __VUE_DEBUGGER__ dist는 bin을 못 쓸 때의 약식 1회 확인일 뿐, 정식 게이트는 위 명령입니다.
  • 저장소의 scripts/check-debugger-leak.mjs는 워크숍 유지보수자 전용입니다. 외부 소비자는 동봉 bin(npx vue-debugger-leak-check)을 쓰세요.

3층 — attachDebugger 트립와이어 (탐지) ​

attachDebugger가 실행되면 콘솔에 끌 수 없는 경고를 남깁니다:

⚠ @platform/vue-debugger ACTIVE — … 이 경고가 운영(production) 콘솔에 보이면 디버거가 누출된 것이니 즉시 차단·조사하세요.

dev/검증계에서는 "디버거가 켜졌다"는 정상 신호이고, production 콘솔/SIEM에서 이 문자열이 잡히면 곧 누출입니다. 1·2층이 깨져도 한 겹 더 탐지하는 심층방어입니다. 운영 모니터링(Sentry·로그 수집)에서 @platform/vue-debugger ACTIVE를 알람 규칙으로 잡아 두는 것을 권장합니다.

빌드된 라이브러리 dist는 소비측의 production 여부를 신뢰성 있게 읽을 수 없어(import.meta.env가 라이브러리 빌드 시점에 박힘), 라이브러리 차원의 "자동 하드 차단"은 불가능합니다. 그래서 예방(빌드 게이트) + 탐지(트립와이어) 조합이 올바른 형태입니다.

소스맵 — production은 0 ​

production 빌드는 소스맵을 만들지 마세요(build.sourcemap: false). 디버거의 스택 복원에 필요한 .map은 검증계(staging) 빌드에만 'hidden'으로 두고, 외부 공개망에는 절대 배포하지 않습니다(원본 소스 복원 표면). 디버거가 없는 production CSP는 unsafe-eval 금지를 유지하세요(디버거의 식 평가가 new Function을 쓰므로 staging에만 영향).

데이터 거버넌스 — 디버거가 켜진 검증계 ​

채널라이브 화면리포트 반출(buildReport)
네트워크 헤더(Authorization·Cookie)평문 표시redact:true면 마스킹
cURL 복사헤더 포함(평문)—
응답 본문 · 스토리지 · 쿠키평문 표시/조회redact:true면 키 기준 마스킹·쿠키 전체 마스킹
리포트 전송(sendReport)—allowHosts 화이트리스트 외 차단
  • report.redact는 기본 OFF(옵트인) 입니다. 금융권은 redact: true를 강제하고, report.allowHosts를 사내 호스트로 잠가 외부 SaaS 우발 전송을 막으세요(옵션).
  • redact는 키 이름 패턴(auth·token·cookie·secret·password·jwt)과 JWT 형태 값, 네트워크 민감 헤더(Authorization·Cookie·Set-Cookie), 그리고 같은 데이터의 평행 복사본(Pinia 뮤테이션 before/after 스냅샷·액션 인자·타임라인·URL 민감 쿼리·선택 컴포넌트 미리보기, 0.17.1)까지 마스킹합니다.
  • 한계(정직 고지): redact는 키 기반이라 응답 본문 속 PII/PCI(계좌·카드·잔액·주민번호 등 일반 키)는 마스킹하지 못합니다. 검증계는 가명/테스트 데이터를 우선하고, 실데이터 연결은 보안팀 승인 절차를 두세요. (가드 소스 문자열 노출 등 그 외 한계는 정보 패널의 '알려진 한계'에 고지됩니다.)

관련 문서 ​

개발/검증 환경 전용 인페이지 Vue 디버거 · 진짜 프로덕션엔 코드가 들어가지 않습니다

@platform/vue-debugger · UNLICENSED (사내 전용)