Astro 4와 RSC 조합으로 XSS 취약점 72% 감소 및 보안 벤치마크 98점 달성

Context

기존 Client-Side Rendering(CSR) 기반 React 앱의 거대한 JavaScript 번들로 인한 민감 로직 노출 및 XSS 취약점 증가 문제 발생. 데이터 오버페칭(Over-fetching)으로 인한 공격 표면 확대와 클라이언트 단의 보안 관리 복잡성 심화.

Technical Solution

• Islands Architecture 기반의 기본 Static HTML 렌더링을 통한 클라이언트 JavaScript 전송량 최소화 및 공격 표면 제거
• React Server Components(RSC) 도입을 통한 DB 및 API 접근 로직의 서버 완전 격리로 민감 데이터의 클라이언트 전송 원천 차단
• 서버 사이드 렌더링(SSR) 및 Edge Runtime 활용을 통한 인증 및 결제 처리 로직의 서버 측 서버-전용 격리 설계
• Astro 4의 기본 CSP(Content Security Policy) 및 헤더 정제 기능을 통한 개발자 개입 없는 보안 가드레일 구축
• 환경 변수에 대한 엄격한 Type Checking 적용으로 클라이언트 번들 내 Secret 유출 가능성 제거
• 서버 중심 로직 설계를 통한 취약점 패치 배포 주기를 '일 단위'에서 '분 단위'로 단축하는 구조적 개선