사이트 오프라인 캐시 MITM 프록시

오프라인 웹 캐싱: Electron 기반 MITM 프록시

개발자들은 종종 문서나 웹사이트에 접근하기 어려운 상황에 직면합니다. MITM 프록시를 기반으로 한 애플리케이션은 HTTPS 리소스를 사전 캐싱하여 오프라인 접근을 보장합니다. 이 애플리케이션은 트래픽을 가로채기 위해 자체 서명된 인증서를 생성하고, 격리된 프로필을 가진 내장 Chromium을 사용합니다. 오프라인 모드에서는 네트워크 연결 없이 캐시된 응답을 제공합니다.

이 솔루션은 중견/시니어 수준의 전문가를 대상으로 합니다: 전문 용어를 유지하고 기술 구현 세부사항에 초점을 맞춥니다.

아키텍처와 배경

이 프로젝트는 2016년 기업 웹사이트 마이그레이션을 위한 프록시 서버에서 발전했습니다. 당시 작업은 백엔드 접근 없이 공개 콘텐츠를 캐싱해야 했습니다. 프록시는 모든 HTTP/HTTPS 요청을 강제로 저장하며 원본 소스를 대체했습니다.

업데이트에는 TypeScript와 ESLint가 포함되었습니다. Electron으로 전환하여 데스크톱 애플리케이션을 만들 수 있었습니다. AI 에이전트 통합으로 UI 개발, 인증서 관리, i18n 작업이 가속화되었습니다.

주요 구성 요소:

• 트래픽 가로채기를 위한 MITM 프록시.
• 맞춤형 프로필을 가진 Chromium.
• 네임스페이스별 캐시 저장소.

가로채기와 캐싱 원리

실행 시 자체 서명된 CA 인증서가 생성됩니다. 사용자는 이를 신뢰할 수 있는 인증서로 설치하여 HTTPS를 우회합니다. 내장 브라우저는 트래픽을 프록시를 통해 라우팅합니다.

// 프록시 로직 의사 코드
if (온라인) {
  프록시.가로채기(요청) -> 캐시.저장(응답);
} else {
  캐시.가져오기(요청) 반환;
}

프록시는 요청을 파싱하고 리소스를 포함한 전체 응답을 저장합니다. 오프라인 모드는 네트워크 요청을 하기 전에 캐시를 확인합니다.

개발자를 위한 기능

애플리케이션은 문서 없이 빠른 시작을 위해 UI를 최소화합니다. 주요 기능:

• 웹사이트 자동 캐싱: Crawlee + Playwright를 사용하는 내장 크롤러. 페이지를 재귀적으로 다운로드하지만 SPA(로드 이벤트)에 민감합니다.
• SOCKS5 프록시: 차단 우회를 위한 외부 프록시 지원.
• 네임스페이스: 프로젝트나 사이트별 캐시 격리 (예: Electron 및 PrimeReact 문서).
• 내보내기/가져오기: 전송을 위해 네임스페이스를 파일로 직렬화.

예시 시나리오: electron-vite.org를 캐싱하고 코드 예제와 API를 오프라인에서 작업.

개발에서의 사용

이상적인 용도:

• 오프라인 문서 (React, Vue, 프레임워크별 사이트).
• 리디자인 전 레거시 사이트 보관.
• 인터넷 없는 격리된 네트워크에서 작업.
• 고정 응답으로 UI 테스트.

제한사항: 크롤러는 동적 JS 콘텐츠에 어려움을 겪습니다. 정확한 캐싱을 위해 수동 탐색을 권장합니다.

Chrome 프로필 전송은 가능하지만 보안에 주의가 필요합니다: --user-data-dir를 통해 쿠키와 localStorage를 내보내세요.

핵심 포인트

• Electron의 MITM: 자체 서명된 인증서 + Chromium을 통한 HTTPS 가로채기.
• 캐시 격리: 네임스페이스로 리소스 충돌 방지.
• Crawlee/Playwright 크롤러: SPA에 대한 주의사항과 함께 자동화.
• 미니멀리스트 UI: 숙련된 사용자를 위한 지침 없음.
• 파일 내보내기: 기기 간 캐시 전송.

결론 및 개선 사항

이 도구는 여행 중이나 제재 상황에서 문서에 안정적으로 접근하는 실제 문제를 해결합니다. 네임스페이스 공유를 위한 HUB가 계획되어 있습니다.

커뮤니티에 대한 질문: 라이선스 (MIT/Apache?), Chrome 프로필의 안전한 가져오기.

— Editorial Team