[fix] FE 보안 취약점 패치 및 보안 설정 강화 - #125
Conversation
- npm audit fix 실행 - axios, react-router-dom, vite HIGH/MODERATE CVE 일괄 패치 - react-router Open Redirect CVE, axios Prototype Pollution 포함 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- loginModalStore.open(): 전달된 URL을 pathname+search로 정규화, 외부 origin 차단 - ArtistCard·ConcertDetailPage·CalendarPage·ArtistDetailPage: openLoginModal 호출 시 window.location.href → pathname+search로 교체 - AuthCallbackPage·SignupPage: localStorage에서 꺼낸 redirectUri가 /로 시작하지 않으면 HOME으로 fallback (protocol-relative URL 차단) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Content-Security-Policy 메타태그 추가 - script-src 'self': 인라인 스크립트·외부 스크립트 차단 - frame-ancestors 'none': Clickjacking 방어 - connect-src 'self': 승인되지 않은 외부 API 호출 차단 - style/font: jsdelivr.net CDN만 허용 - Pretendard CDN link에 SRI integrity 해시 추가 (sha384) CDN 오염 시 변조된 CSS 로딩 차단 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- .env, .env.* 패턴 추가 (단, .env.example 제외) - 기존 *.local만으로는 .env 자체가 커밋될 수 있어 보완 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 32 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Free Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (16)
Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
1 participant
관련 이슈
Closes #124
변경 개요
FE 보안 리뷰를 통해 발견된 취약점을 패치하고, 기본 보안 설정을 강화합니다.
패키지 CVE 3건 해결, Open Redirect 방어, CSP/SRI/HTTP 보안 헤더 적용, 탭 간 로그아웃 동기화, Error Boundary, CI 자동화까지 총 9개 항목을 반영합니다.
변경사항
package-lock.jsonsrc/stores/loginModalStore.jsnew URL()파싱 후 동일 origin 검증, pathname+search만 저장src/pages/AuthCallbackPage.jsx,SignupPage.jsxstartsWith('/')유효성 검증 추가 (use 시점 방어)src/components/artist/ArtistCard.jsx외 3개 페이지window.location.href→pathname + search전달로 수정 (pass 시점 방어)index.html.gitignore.env,.env.*패턴 추가vercel.jsonsrc/App.jsxsrc/components/ui/ErrorBoundary.jsxsrc/main.jsx.github/workflows/audit.ymlvite.config.js주요 구현 내용
Open Redirect 3중 방어
pathname + search만 전달loginModalStore.open()에서new URL()파싱 → 동일 origin 검증 → pathname+search만 저장startsWith('/')검증 후 미통과 시 홈으로 fallback테스트
npm run build성공 확인 (소스맵 미생성 확인)curl -I https://comingg.com또는 securityheaders.com)코드 리뷰
변경사항 요약
보안 강화 목적의 변경. 기존 동작에 영향을 주는 코드 수정(Open Redirect 방어, 탭 간 로그아웃)과 신규 추가(ErrorBoundary, CI 워크플로, Vercel 헤더, sourcemap 비활성화)로 구성.
🔵 suggestion
src/components/ui/ErrorBoundary.jsx: 에러 화면에 인라인 스타일 사용 — 프로젝트의 CSS Modules 컨벤션과 불일치. 추후 ErrorBoundary.module.css 분리 가능..github/workflows/audit.yml:package.json/package-lock.json변경 시에만 트리거됨 — 기존 의존성에 신규 CVE가 공개된 경우 자동 감지 안 됨. 필요 시schedule: cron추가로 주기적 스캔 가능.