피드로 돌아가기
How I Built a Zero-Server PII Scrubber for ChatGPT (It Works in Airplane Mode)
Dev.toDev.to
Security

Client-side JS 기반 Zero-Server PII Redactor 설계

How I Built a Zero-Server PII Scrubber for ChatGPT (It Works in Airplane Mode)

Ilya Sib2026년 4월 21일3intermediate

Context

기업 내 AI 도입 시 민감 데이터 유출 위험으로 인한 Compliance 이슈 발생. 수동 PII 제거 방식의 낮은 효율성과 데이터 외부 전송에 따른 보안 취약점을 해결하기 위한 아키텍처 필요.

Technical Solution

  • Client-side JavaScript 기반의 서버리스 구조를 통한 데이터 외부 유출 원천 차단 및 Airplane Mode 작동 환경 구현
  • 60종 이상의 Entity Type을 스캔하는 Detection Pass와 Specificity Priority 기반의 Conflict Resolution Pass로 구성된 Two-Pass Tokenization 적용
  • Reversible Redaction 설계를 통해 PII를 Typed Token으로 대체하고 IndexedDB에 로컬 매핑 정보를 저장하여 AI 응답 후 원문 복구 기능 제공
  • Context 및 Co-occurrence Pattern 가중치를 적용한 Confidence Scoring 시스템으로 False Positive 발생률 최소화
  • MutationObserver와 keydown Event Capture를 조합하여 React의 contenteditable div 내 입력 텍스트를 가로채는 인터셉터 구현
  • WebAssembly Tesseract 및 OffscreenCanvas API 도입을 통한 브라우저 내 오프라인 PDF OCR 및 이미지 처리 수행

1. 데이터 보안이 극도로 중요한 서비스 설계 시 Serverless Client-side 처리 가능 여부 검토

2. 복잡한 패턴 매칭 시스템 구축 시 우선순위 기반의 Conflict Resolution 로직 설계

3. React 등 프레임워크의 Synthetic Event 시스템 우회를 위한 MutationObserver 활용 방안 고려

4. UX 저해를 방지하기 위해 Recall보다 False Positive 비율을 낮추는 정밀도 중심의 필터링 전략 수립

원문 읽기