HTTP Analyzer는 브라우저/클라이언트에서 발생한 HTTP 트래픽을 캡처하고, 요청/응답을 눈으로 확인하면서 보안 관점에서 빠르게 분류할 수 있도록 만든 로컬 분석 도구입니다.
이 프로젝트는 세 가지 축으로 구성됩니다.
mitmproxy로 실시간 트래픽을 가로채고 수정/관찰Node + Express서버로 캡처 상태, HAR 분석, 리플레이, Cloudflare R2 파일 저장 처리React + Vite프런트엔드로 요청/응답 확인, 보안 패턴 분석, 리포트 출력
- 구글 로그인 기반 접근 제어
- 사이드 메뉴 기반 기능 분리(
Overview,Capture,Findings,HAR,Recent Data) - 실시간 HTTP 요청/응답 캡처
- Playwright 브라우저 기반 같은 도메인 크롤링 캡처
- 크롤링 완료 또는 idle 상태 감지 시 자동 캡처 중지
- SQLMap 기반 SQL Injection 후보 엔드포인트 점검 메뉴
- OpenAI API 기반 크롤링 완료 Summary 생성
- 요청/응답 헤더 및 바디 확인
- 특정 요청 재전송(Replay)
- 캡처 흐름 기반 Mermaid 다이어그램 생성
- HAR 파일 업로드 및 성능/호스트/상태코드 분석
- 보안 패턴 탐지 및
OWASP Top 10기준 요약 - 엔드포인트 우선순위 정리
Before / After비교용 DiffHTML / PDF / JSON / Markdown / CSV리포트 출력- 캡처 이벤트와 점검 이력을 Cloudflare R2 JSON 파일로 저장
- 업로드된 HAR 원본 파일을 Cloudflare R2에 저장
프런트에서 캡처된 요청/응답을 기반으로 아래 항목들을 탐지합니다.
- 민감정보 URL 노출
- 응답 본문 비밀값 노출
- 요청 본문 민감정보 포함
- 위험한 CORS 설정
- 세션 쿠키 속성 누락(
HttpOnly,Secure,SameSite) - 보안 헤더 누락(
CSP,HSTS,X-Frame-Options,Referrer-Policy,X-Content-Type-Options) - 서버 배너/버전 노출
- 스택트레이스/상세 오류 노출
- 디렉터리 인덱싱 노출
- 캐시 정책 부족
- SQLi / XSS / SSRF / Path Traversal / Command Injection / Open Redirect 흔적
- Basic 인증 사용 흔적
각 finding은 다음 정보를 함께 보여줍니다.
- 심각도
- OWASP 분류
- Evidence
- Guide
- Remediation
- Reproduction Checklist
- PoC Template
.
├─ proxy/
│ ├─ modify_request.py
│ ├─ requirements.txt
│ └─ rules.json
├─ server/
│ └─ index.js
├─ samples/
│ ├─ sample.har
│ ├─ sample-errors.har
│ ├─ sample-security.har
│ └─ sample-large.har
├─ src/
│ ├─ App.jsx
│ ├─ main.jsx
│ ├─ styles.css
├─ .env.example
├─ package.json
└─ README.md
주요 파일 설명:
proxy/modify_request.pymitmproxy애드온입니다.proxy/rules.json규칙을 읽어서 요청 바디를 수정하고 응답을 출력합니다.server/index.js프론트 API 서버입니다. 캡처 상태 조회, 리플레이, HAR 분석, 캡처 이벤트 저장, 점검 이력 저장을 처리합니다.src/App.jsx메인 UI입니다. 로그인, 사이드 메뉴, 실시간 요청 목록, 보안 finding, 리포트 출력, Diff, PoC 주입, 최근 이력 화면 등을 담당합니다.samples/HAR 업로드 테스트용 샘플 파일입니다.
- Node.js 18+
- npm
- Python 3.9+
mitmproxy- Cloudflare R2 버킷
- Firebase 프로젝트(Auth, 선택적 HAR 분석 이력)
- SQLMap(Optional, 로컬 Injection 점검 시 필요)
npm install
pip install -r proxy/requirements.txtcp .env.example .env예시:
VITE_API_BASE_URL=https://http-analyzer-api.onrender.com
VITE_LOCAL_API_BASE_URL=http://127.0.0.1:5000
VITE_FIREBASE_API_KEY=<firebase-web-api-key>
VITE_FIREBASE_AUTH_DOMAIN=<project>.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=<project-id>
VITE_FIREBASE_STORAGE_BUCKET=<project>.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=<messaging-sender-id>
VITE_FIREBASE_APP_ID=<firebase-app-id>
VITE_FIREBASE_MEASUREMENT_ID=<measurement-id>
PORT=4000
HOST=127.0.0.1
DISABLE_CAPTURE=false
DISABLE_SQLMAP=false
SQLMAP_BIN=sqlmap
OPENAI_API_KEY=<server-side-openai-api-key>
PLAYWRIGHT_HEADLESS=true
CAPTURE_READY_DELAY_MS=3000
CAPTURE_IDLE_AUTO_STOP_MS=10000
CAPTURE_CRAWL_ENABLED=true
CAPTURE_CRAWL_MAX_PAGES=8
CAPTURE_CRAWL_PAGE_DELAY_MS=1500
CAPTURE_LOGIN_WAIT_MS=3000
FIREBASE_SERVICE_ACCOUNT_JSON={"project_id":"<project-id>","client_email":"firebase-adminsdk@<project-id>.iam.gserviceaccount.com","private_key":"-----BEGIN PRIVATE KEY-----\\n...\\n-----END PRIVATE KEY-----\\n"}
# 또는 개별 환경변수
FIREBASE_PROJECT_ID=<project-id>
FIREBASE_CLIENT_EMAIL=firebase-adminsdk@<project-id>.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n
# 또는 로컬 파일 경로
FIREBASE_SERVICE_ACCOUNT_PATH=/absolute/path/to/firebase-service-account.json
CLOUDFLARE_R2_ACCOUNT_ID=<cloudflare-account-id>
CLOUDFLARE_R2_ACCESS_KEY_ID=<r2-access-key-id>
CLOUDFLARE_R2_SECRET_ACCESS_KEY=<r2-secret-access-key>
CLOUDFLARE_R2_BUCKET=http-analyzer-files
CLOUDFLARE_R2_PUBLIC_BASE_URL=https://<public-bucket-host>
R2_HAR_ANALYSIS_INDEX_KEY=har/recent-index.json
R2_HAR_ANALYSIS_INDEX_LIMIT=50
R2_INSPECTION_INDEX_KEY=inspections/recent-index.json
R2_INSPECTION_INDEX_LIMIT=100로컬에서 프런트와 백엔드를 같이 실행할 때는 VITE_API_BASE_URL=http://127.0.0.1:5000으로 바꿔도 됩니다.
운영 프런트에서 새창 수동 캡처를 사용할 때는 사용자 PC의 로컬 백엔드를 호출해야 하므로
VITE_LOCAL_API_BASE_URL=http://127.0.0.1:5000 값을 유지합니다.
설명:
VITE_*프런트에서 사용하는 값입니다.VITE_FIREBASE_*는 Firebase Auth에 사용합니다.FIREBASE_SERVICE_ACCOUNT_JSON또는FIREBASE_PROJECT_ID,FIREBASE_CLIENT_EMAIL,FIREBASE_PRIVATE_KEY,FIREBASE_SERVICE_ACCOUNT_PATH서버에서 Firebase Admin을 초기화할 때만 사용합니다. 캡처/분석 결과 저장에는 사용하지 않습니다.CLOUDFLARE_R2_*캡처 이벤트, 점검 이력, HAR 원본 파일을 Cloudflare R2에 업로드할 때 사용합니다.HOST로컬은 보통127.0.0.1, Render 같은 배포 환경은0.0.0.0을 사용합니다.DISABLE_CAPTURE배포 백엔드에서 Playwright 캡처 API를 막고 저장/조회 API만 운영하려면true로 둡니다.DISABLE_SQLMAPSQLMap 실행 API를 막을지 결정합니다. 공개 배포 환경에서는 악용 방지를 위해true를 권장합니다.SQLMAP_BIN로컬에 설치된 SQLMap 실행 파일 경로입니다. 기본값은sqlmap입니다.CAPTURE_READY_DELAY_MS첫 페이지 로드 후 캡처 준비를 위해 대기하는 시간입니다. 기본값은3000입니다.CAPTURE_IDLE_AUTO_STOP_MS네트워크 활동이 없을 때 자동 중지하기까지 기다리는 시간입니다. 기본값은10000입니다.CAPTURE_CRAWL_ENABLED,CAPTURE_CRAWL_MAX_PAGES,CAPTURE_CRAWL_PAGE_DELAY_MS캡처 시작 후 같은 도메인의 링크를 자동 순회할지, 최대 몇 페이지까지 볼지, 페이지 사이에 얼마나 기다릴지 설정합니다.CAPTURE_LOGIN_WAIT_MSID/PW 자동 입력 후 로그인 처리를 기다리는 시간입니다. 기본값은3000입니다.
mitmdump -s proxy/modify_request.py프록시 기본 주소:
- Host:
127.0.0.1 - Port:
8080
HTTPS를 보려면 mitmproxy 인증서를 대상 클라이언트/브라우저에 설치해야 합니다.
npm run server기본 주소:
http://127.0.0.1:4000
npm run dev기본 주소:
http://localhost:5173
- 프런트 접속 후 구글 로그인 버튼을 누릅니다.
- 현재 허용된 계정으로 로그인해야 메인 화면에 들어갈 수 있습니다.
현재 허용 계정:
totoriverce@gmail.com
참고:
- 로그인 세션은 Firebase Auth의 브라우저 지속성으로 유지됩니다.
- 캡처/점검 이력은 먼저 로컬 저장소에 적재된 뒤, 백엔드 또는 Firestore에 동기화됩니다.
Capture화면에서 분석 대상 URL을 입력합니다.- 필요하면 추가 제외 패턴을 입력합니다.
- 로그인 필요한 사이트라면
ID,PW를 입력하거나Session에 쿠키 값을 입력합니다. 캡처 시작을 누르면 서버가 Playwright 브라우저를 열고 대상 URL로 이동합니다.Session값이 있으면 쿠키로 먼저 적용하고, 없으면 ID/PW로 첫 화면의 로그인 폼을 자동 감지해 입력/제출합니다.- 첫 페이지 로드 후 3초 대기한 뒤 같은 도메인의 링크를 최대
CAPTURE_CRAWL_MAX_PAGES개까지 자동 순회합니다. - 크롤링이 완료되면 캡처가 자동 중지되고, 사이드바 진행 상태가
complete로 바뀝니다. - 요청/응답 목록을 보면서 finding과 Diff를 확인합니다.
참고:
- 이미지 요청은 기본적으로 항상 제외됩니다.
Excluded입력칸은 추가 제외 규칙만 받습니다.ID,PW,Session은 인증 자동화에만 사용하며 앱 저장소에는 저장하지 않습니다.Session은SESSIONID=...또는SESSIONID=...; other=...같은 Cookie 문자열을 권장합니다. 값만 넣으면session=<값>쿠키로 적용합니다.Capture사이드바에는 캡처된 요청 수, 전체 요청 수, 크롤링 페이지 수, 오류 수가 표시됩니다.- 수동으로 중지하고 싶으면
캡처 중지를 누르면 됩니다. Capture화면에서는 요청별 보안 finding 요약만 보여주고, 상세 내용은Findings메뉴에서 확인합니다.Findings에서 보기를 누르면 해당 요청의 finding만 필터되어 바로 이동합니다.- 종료 과정에서 발생한
net::ERR_ABORTED는 종료성 노이즈로 간주해 UI와 Recent Data에서 숨깁니다.
- 요청 카드를 클릭합니다.
- Replay 모달에서 URL, 헤더, 바디를 수정합니다.
요청버튼으로 다시 보냅니다.
보안 finding이 있는 경우:
PoC를 Replay에 주입버튼으로 재현 템플릿을 바로 모달에 넣을 수 있습니다.- 긴 응답은 모달 내부에서 스크롤됩니다.
Capture 화면의 Generate Mermaid 버튼으로 현재 캡처된 요청을 기반으로 Mermaid 흐름도를 만들 수 있습니다.
- 결과는 본문이 아니라 전용 팝업으로 표시됩니다.
- 팝업 우측 상단
복사버튼으로 Mermaid 코드를 바로 복사할 수 있습니다. - 복사 후 팝업은 자동으로 닫힙니다.
SQLMap 메뉴는 캡처된 요청 중 SQL Injection 점검 후보를 골라 sqlmap으로 실행할 수 있는 로컬 점검 도구입니다.
사용 흐름:
Capture또는Recent Data에서 요청을 확보합니다.SQLMap메뉴로 이동합니다.Captured Candidates에서 요청을 선택하면 URL, Method, Headers, Body가 자동 입력됩니다.- 필요하면
Level,Risk, Header, Body 값을 조정합니다. SQLMap Scan을 눌러 결과를 확인합니다.
주의:
- 반드시 본인 소유 또는 명시적으로 허가받은 대상에만 사용해야 합니다.
- 로컬 서버에서
sqlmap바이너리를 실행하므로 로컬에 SQLMap이 설치되어 있어야 합니다. - macOS Homebrew 기준 설치 예시는
brew install sqlmap입니다. - 공개 Render 백엔드에서는
DISABLE_SQLMAP=true로 차단합니다. - 배포 환경에서 SQLMap을 열어두면 임의 외부 대상 스캔에 악용될 수 있으므로 권장하지 않습니다.
Settings 메뉴에서 크롤링 완료 후 자동 생성할 Summary 설정을 관리합니다.
서버 환경변수 OPENAI_API_KEY를 설정하면 브라우저에 키를 입력하지 않아도 서버 키로 Summary를 생성합니다.
입력 항목:
OPENAI KEY: 선택 입력입니다. 서버OPENAI_API_KEY가 없을 때만 브라우저 localStorage 키로 Summary를 생성합니다.MODEL: Summary 생성에 사용할 모델명입니다. 기본값은gpt-4.1-mini입니다.PROMPT: HTTP 캡처 결과를 어떤 관점으로 요약할지 정하는 프롬프트입니다.
기본 프롬프트는 다음 관점을 포함합니다.
- 전체 요약
- 위험도 우선 엔드포인트
- SQL Injection, XSS, 인증/세션, CORS, 민감정보 노출 근거
- 캡처 데이터 기반 증거와 추가 확인 필요 항목 분리
- SQLMap 점검 후보 URL/파라미터 제안
- 개발자 다음 조치 체크리스트
크롤링이 crawl-complete로 자동 중지되면, API Key가 입력된 경우 현재 캡처 데이터를 기반으로 Summary가 생성됩니다. 수동으로는 현재 데이터로 Summary 생성 버튼을 사용할 수 있습니다.
HAR 화면에서 파일을 선택해 업로드할 수 있습니다. 서버는 아래 항목을 계산합니다.
- 총 요청 수
- 평균 대기 시간
- 가장 느린 요청
- 메서드 분포
- 상위 호스트
- 상태코드 분포
- 콘텐츠 타입 분포
- 실패 요청 목록
분석 자체는 Firebase 없이도 가능하지만, 결과 파일을 서버에 저장하려면 Cloudflare R2 설정이 필요합니다.
Recent Data 화면에서는 아래 내용을 확인할 수 있습니다.
- 최근 점검 이력
- 최근 캡처 이벤트
- 최근 7일 / 30일 기준 통계 대시보드
- 점검 이력 상세 모달
- 점검 이력별
HTML / PDF리포트 재다운로드 - 항목별 저장 출처(
Cloudflare R2)
중요:
- 캡처 결과는 Cloudflare R2 파일 저장이 성공해야
Recent Data에 표시됩니다. - 파일 저장이 실패하면 로컬 대기 항목으로 표시하지 않고 저장 실패 메시지를 보여줍니다.
Recent Data는 R2의inspections/recent-index.json인덱스를 기준으로 표시합니다.
- 현재 캡처/분석 결과 저장에는 Firestore 컬렉션을 사용하지 않습니다.
- Firebase는 인증과 기존 프로젝트 호환 목적으로만 남아 있습니다.
- 캡처 이벤트:
inspections/events/YYYY-MM-DD/<session-id>.json - 점검 이력 / 리포트 스냅샷:
inspections/runs/YYYY-MM-DD/<run-id>.json - Recent Data 인덱스:
inspections/recent-index.json - HAR 분석 결과:
har/analyses/YYYY-MM-DD/<analysis-id>.json - HAR 분석 인덱스:
har/recent-index.json - HAR 원본 파일과 생성 리포트 첨부 파일도 Cloudflare R2에 저장합니다.
주의:
FIREBASE_SERVICE_ACCOUNT_JSON과CLOUDFLARE_R2_SECRET_ACCESS_KEY는 서버 전용입니다.- 프런트 코드에 직접 노출하면 안 됩니다.
이 저장소는 프런트와 백엔드를 분리해서 배포하도록 구성되어 있습니다.
- 프런트: GitHub Pages
- 백엔드: Render Web Service
- DB: Firebase Firestore
- File Storage: Cloudflare R2
GitHub 저장소 Settings > Secrets and variables > Actions에 아래 값을 등록합니다.
프런트 API URL은 저장소 변수(Variables)로 등록합니다. 값을 등록하지 않으면 GitHub Actions는 기본값으로 https://http-analyzer-api.onrender.com을 사용합니다.
VITE_API_BASE_URL=https://http-analyzer-api.onrender.com
VITE_LOCAL_API_BASE_URL=http://127.0.0.1:5000
Render 자동 배포 트리거용:
RENDER_DEPLOY_HOOK_URL=<render-deploy-hook-url>
RENDER_DEPLOY_HOOK_URL은 Render 서비스의 Settings > Deploy Hook에서 생성한 URL입니다. 이 값이 없으면 프런트 배포만 진행되고 백엔드 배포 트리거 단계는 건너뜁니다.
Render Web Service에는 아래 값을 등록합니다.
NODE_ENV=production
HOST=0.0.0.0
DISABLE_CAPTURE=false
PLAYWRIGHT_HEADLESS=true
DISABLE_SQLMAP=true
FIREBASE_PROJECT_ID=<project-id>
FIREBASE_CLIENT_EMAIL=<firebase-client-email>
FIREBASE_PRIVATE_KEY=<firebase-private-key>
CLOUDFLARE_R2_ACCOUNT_ID=<cloudflare-account-id>
CLOUDFLARE_R2_ACCESS_KEY_ID=<r2-access-key-id>
CLOUDFLARE_R2_SECRET_ACCESS_KEY=<r2-secret-access-key>
CLOUDFLARE_R2_BUCKET=<r2-bucket-name>
CLOUDFLARE_R2_PUBLIC_BASE_URL=<public-bucket-host>
R2_HAR_ANALYSIS_INDEX_KEY=har/recent-index.json
R2_HAR_ANALYSIS_INDEX_LIMIT=50
R2_INSPECTION_INDEX_KEY=inspections/recent-index.json
R2_INSPECTION_INDEX_LIMIT=100
배포 백엔드에서도 캡처 API를 사용할 수 있도록 DISABLE_CAPTURE=false로 둡니다.
- 동작:
/api/health,/api/capture/start,/api/capture/status,/api/capture/stop,/api/replay-request,/api/recent-analyses,/api/inspection-runs,/api/capture-events/batch,/api/analyze-har - Render에서는
PLAYWRIGHT_HEADLESS=true로 서버 내부 headless Chromium을 실행합니다. - Render에서는 SQLMap API를 기본 차단합니다.
render.yaml의DISABLE_SQLMAP=true는 의도된 보안 설정입니다.
주의: Render에서 실행되는 브라우저는 사용자 PC가 아니라 Render 서버 내부 브라우저입니다. 사람이 직접 로그인하고 조작하는 세션 캡처는 로컬 앱에서 실행하는 것이 가장 정확합니다.
render.yaml이 포함되어 있으므로 Render에서 Blueprint로 연결할 수 있습니다.
- Service Name:
http-analyzer-api - Build Command:
npm ci - Start Command:
npm run start - Health Check Path:
/api/health - 예상 백엔드 URL:
https://http-analyzer-api.onrender.com
Render에서 서비스 이름이 이미 사용 중이면 실제 생성된 URL을 GitHub Actions 변수 VITE_API_BASE_URL에 다시 등록해야 합니다.
배포 사이트에서도 기존 메뉴는 그대로 표시됩니다.
Overview,Capture,Findings,HAR,Recent Data메뉴 표시HAR업로드,Replay, 리포트 출력은 백엔드 API URL을 통해 실행- Render 환경에서는 headless Chromium으로 캡처가 실행됨
- 실제 브라우저 창을 띄워 세션을 이어가는 캡처는 로컬 앱에서 실행하는 것을 권장
이 저장소는 서버에서 다음 Cloudflare R2 경로를 사용하도록 구성되어 있습니다.
har/analyses/YYYY-MM-DD/...경로에 HAR 분석 결과 저장har/recent-index.json경로에 HAR 최근 이력 인덱스 저장inspections/events/YYYY-MM-DD/...경로에 캡처 이벤트 저장inspections/runs/YYYY-MM-DD/...경로에 점검 이력과 리포트 스냅샷 저장inspections/recent-index.json경로에 Recent Data 인덱스 저장
상단 Export 메뉴에서 다음 포맷을 출력할 수 있습니다.
- HTML
- JSON
- Markdown
- CSV
리포트에는 다음 정보가 포함됩니다.
- 표지
- 점검자
- 점검 일시
- 결론
- 요청/응답 목록
- 보안 finding
- OWASP 요약
- 엔드포인트 위험도 요약
Mask Secrets가 켜져 있으면 민감정보는 마스킹된 상태로 출력됩니다.
테스트용 HAR 파일은 samples에 들어 있습니다.
- samples/sample.har 기본 업로드/저장 동작 확인용
- samples/sample-errors.har 오류 응답과 실패 요청 확인용
- samples/sample-security.har 보안 패턴 탐지 확인용
- samples/sample-large.har 대량 요청 흐름 확인용
- samples/sample-vulnerable.har 민감정보 노출, 보안 헤더 누락, 주입 흔적 등 취약 징후 테스트용
민감값을 기본 마스킹합니다.
예:
AuthorizationCookieSet-Cookie- 토큰/JWT/API Key
- Private Key 형식 문자열
finding마다 다음 범위로 억제할 수 있습니다.
- 세션 오탐
- 엔드포인트 오탐
- 호스트 오탐
- 전역 오탐
같은 엔드포인트의 이전 요청과 현재 요청을 비교합니다.
- 상태코드
- 바뀐 요청 헤더
- 바뀐 응답 헤더
- 요청 바디
- 응답 바디
기본 상태는 접힘입니다.
finding이 많이 몰린 엔드포인트를 우선순위로 정리합니다.
- 누적 점수
- finding 개수
- 최고 심각도
- 자주 걸린 OWASP 카테고리
기본 상태는 접힘입니다.
최근 점검 이력과 캡처 이벤트는 Cloudflare R2 파일 저장 성공 기준으로 관리합니다.
- 캡처 이벤트: R2 JSON 파일로 저장
- 점검 이력: R2 JSON 파일로 저장
- HAR 분석 결과: R2 JSON 파일로 저장
- Recent Data: R2 인덱스 파일에서 최근 점검 이력만 조회
파일 저장이 실패하면 Recent Data에 로컬 대기 항목을 만들지 않고 저장 실패 메시지를 보여줍니다.
npm run buildnpm run servernpm run dev- 이 도구의 finding은 확정 취약점이 아니라 패턴 기반 탐지입니다.
- 실제 취약 여부는 재현 테스트와 서버 코드/인프라 설정 검토로 확인해야 합니다.
- Firebase 서비스 계정 키와 Cloudflare R2 비밀키는 절대 브라우저나 공개 저장소에 노출하면 안 됩니다.
- finding 결과의 프로젝트별 저장/조회 화면
- replay 결과 자동 비교
- finding별 코멘트 및 triage 상태
- 팀 공유용 보고서 템플릿
- 특정 finding 발생 시 Slack/이메일 알림