Blob URL 및 httpOnly 쿠키 기반의 AI 웹 빌더 아키텍처 구현

# I Built an AI Website Builder and Here's What Actually Happened

Kunal Chakraborty2026년 5월 23일5분intermediate

AI 요약

Context

LLM 기반의 HTML/CSS/JS 생성 서비스에서 발생하는 비정형 데이터 파싱 오류와 iframe 내 CORS 제약 사항 해결 필요. 클라이언트-서버 간 보안 인증 체계 및 Stripe 결제 시스템의 안정적 통합을 통한 상용 수준의 제품화 지향.

Markdown 코드 펜스 제거 유틸리티와 최대 3회 Retry 로직을 통한 JSON.parse() 안정성 확보
srcdoc 방식의 한계를 극복하기 위해 HTML 데이터를 Blob 객체로 변환 후 URL.createObjectURL을 통한 Sandboxed Preview 환경 구축
localStorage 대신 httpOnly, secure, sameSite: 'none' 설정의 JWT 쿠키를 도입하여 XSS 공격 방어 및 Cross-Origin 인증 구현
Stripe Webhook 수신 시 express.json() 대신 express.raw() 파서를 적용하여 서명 검증 무결성 유지
Cross-Origin-Opener-Policy 헤더 제거를 통한 OAuth 팝업과 부모 윈도우 간 통신 단절 문제 해결

실천 포인트

1. LLM 응답 파싱 시 정규표현식 기반의 클리닝 단계와 재시도 메커니즘 설계 여부 확인

2. iframe 내 동적 콘텐츠 렌더링 시 CORS 및 스크립트 간섭 회피를 위한 Blob URL 검토

3. 분산 환경의 쿠키 인증 시 NODE_ENV 설정과 secure/sameSite 속성의 정합성 검증

4. 외부 결제 Webhook 연동 시 원본 바이너리 데이터 유지를 위한 raw body 파서 사용 필수

태그