웹 브라우저 저장 방식 및 배포, 보안이슈 정리

1. 웹 브라우저 저장 방식 정리

저장 방식	용량	만료 시점	서버 전송	보안 취약점	주요 용도
Cookie	~4KB	설정 가능	✅ 자동 전송	XSS, CSRF, 스니핑 가능	로그인, 세션 인증
LocalStorage	5–10MB	없음 (영구 저장)	❌	✅ XSS로 탈취 가능	사용자 설정, 캐시 저장
SessionStorage	~5MB	탭/창 종료 시 삭제	❌	✅ XSS로 탈취 가능	일시적 데이터 유지
IndexedDB	수십 MB~	없음	❌	✅ XSS로 접근 가능	구조화된 대용량 데이터 저장
Web SQL	-	폐기됨	❌	사용 지양	사용 금지 (IndexedDB로 대체)

Web SQL : W3C에서 2020년에 공식 폐기되었으며, 모든 주요 브라우저에서 사용 중단됨. IndexedDB로 대체됨.

내 것에서는 무엇으로 전송할지 고민하다 쿠키를 많이 보고 들었기에 쿠키로 진행해 보았다.

• 현재 쿠키 흐름도

사용자 질문
↓
프론트엔드 (Next.js)
↓
fetch 요청 + credentials: 'include'
↓
백엔드 (Flask) - 쿠키 확인
↓
┌─────────────────┐
│ 쿠키에 thread_id │
│ 있나요? │
└─────────────────┘
↓
├─ YES ──→ 기존 thread_id 사용
│ ↓
│ "🔄 기존 Thread 사용: thread_abc123"
│ ↓
│ OpenAI API 호출 (기존 thread)
│ ↓
│ 응답 (thread_id 쿠키 없음)
│ ↓
│ 프론트엔드로 응답
│
└─ NO ──→ 새 thread 생성
↓
"🧵 새 Thread 생성: thread_xyz789"
↓
OpenAI API 호출 (새 thread)
↓
응답 + Set-Cookie: thread_id=thread_xyz789
↓
브라우저가 쿠키 저장
↓
프론트엔드로 응답

📌 보안 참고

쿠키는 서버로 자동 전송되어 CSRF와 스니핑에 취약하므로 HttpOnly, Secure, SameSite=Strict 설정 필수

Local/Session/IndexedDB는 CSRF에 안전하나 XSS로 탈취될 수 있음 → 민감 데이터 저장 금지

• SSL(Secure Sockets Layer)은 웹사이트와 사용자의 브라우저 간 통신을 암호화해주는 보안 프로토콜입니다. 현재는 더 안전한 TLS(Transport Layer Security)로 대체되었지만, 관행적으로 여전히 "SSL"이라고 부릅니다.

• 핵심 기능:

  데이터 암호화: 개인정보, 로그인 정보 등이 노출되지 않도록 보호

  서버 인증: 서버의 신원을 확인해 피싱 방지

  데이터 무결성: 통신 중 데이터 변조 여부를 확인

✅ 2. thread_id 생성 및 쿠키 관리
변경된 로직

• 기존의 경우 내가 생성해둔 thread_id 사용

존재 확인: API 요청 시 thread_id 없으면 생성, 있으면 재사용

저장 위치: 쿠키 (만료: 1주일)

사용 이유: 쿠키는 서버로 자동 전송되므로 API에서 thread_id 확인이 간편

• 없는 경우 생성
  

• 있는 경우 재사용
  

보안 고려사항

Secure, HttpOnly, SameSite=Strict 설정 필수

CSRF 방지용 토큰 사용 병행 추천

thread_id는 UUID 등 무작위 값으로 생성하고, 필요 시 암호화 고려

✅ 3. Vercel 배포 및 도메인 설정

기본 구성

도메인 구매: 가비아

Vercel 네임서버 설정: 예) ns1.vercel-dns.com, ns2.vercel-dns.com

DNS 레코드

    A 레코드: user.com → 76.76.21.21

    CNAME: www.user.com → cname.vercel-dns.com

• 1. 도메인 구매
     가비아를 통해 구매 완료
     
• 2. 도메인 설정

• 3. 네임서버 설정
     
• 4. vercel 도메인 설정

유의사항

DNS 전파 시간: 최대 48시간 소요

Vercel에서 도메인 소유권 인증 필요

SSL은 Vercel에서 자동 발급

🔐 웹 저장 방식별 보안 취약점 정리
📌 주요 취약점 설명

취약점	설명	방어 방법
XSS (Cross-Site Scripting)	악성 스크립트가 웹페이지에 삽입되어 실행됨 → 저장소 데이터 탈취 가능	입력 필터링, CSP, HttpOnly 설정
CSRF (Cross-Site Request Forgery)	사용자가 모르게 요청을 보내는 공격 (쿠키 자동 전송 악용)	CSRF 토큰, SameSite 쿠키, Referer 검증
스니핑 (Sniffing)	네트워크 패킷을 가로채 정보 탈취 (비암호화 통신 시 발생)	HTTPS 사용, Secure 쿠키 설정

🧩 저장 방식별 보안 위험 비교

저장 방식	XSS 위험	CSRF 위험	스니핑 위험	자동 전송	비고
Cookie	✅ 높음	✅ 높음	✅ 있음	✅ 전송됨	보안 설정 필수 (HttpOnly 등)
LocalStorage	✅ 높음	❌ 낮음	❌ 없음	❌ 전송 안됨	XSS 취약, 민감 데이터 저장 X
SessionStorage	✅ 높음	❌ 낮음	❌ 없음	❌ 전송 안됨	탭/창 기준 저장
IndexedDB	✅ 높음	❌ 없음	❌ 없음	❌ 전송 안됨	구조화된 대용량 데이터
Web SQL	✅ 높음	❌ 없음	❌ 없음	❌ 전송 안됨	폐기됨, 사용 금지

✅ 4. 추가 권장사항 요약

항목	권장사항
쿠키 보안	Secure, HttpOnly, SameSite=Strict 설정
thread_id	암호화 및 중복 생성 방지 로직 추가
도메인 검증	dig, nslookup 등으로 확인
참조 문서	Vercel 도메인 설정 가이드

쿠키 보안 관련 업데이트 필요
flask -> nginx, railway, Vercel(serverless function) 업데이트 필요

• 배포는 되었다고 나오는데 실제 실행은 제대로 되지 않음
  -> 추측은 backend에서 api를 로컬 주소로 호출하여 제대로 실행되지 않는 것 같다고 생각 중