프론트엔드 보안

프론트엔드 개발 시 놓치기 쉬운 보안 위협은 크게 네 가지 유형으로 나뉜다. XSS, CSRF, 클릭재킹, 민감 데이터 노출이 그것이다. Next.js 환경을 기준으로 각 위협의 원리와 대응법을 이해하면 보안 취약점을 사전에 차단할 수 있다.

XSS(Cross-Site Scripting)는 가장 흔한 공격 유형으로, 입력 필드나 URL 파라미터를 통해 악성 스크립트를 삽입해 다른 사용자의 브라우저에서 실행되도록 만든다. 세 가지로 구분된다. Reflected XSS는 악성 스크립트가 포함된 URL을 사용자가 클릭하면 서버가 해당 스크립트를 응답에 포함해 실행시키는 방식이다. Stored XSS는 게시판·댓글 등에 스크립트를 영구 저장해 다수 사용자를 감염시킬 수 있어 파급력이 가장 크다. DOM based XSS는 서버가 아닌 브라우저의 DOM 조작 과정에서 발생해 서버 로그에 남지 않아 탐지가 어렵다. Next.js(React 기반)는 JSX 렌더링 시 기본적으로 문자열을 Escape 처리하지만, `dangerouslySetInnerHTML`을 사용할 경우 이 기능이 비활성화되므로 `dompurify`(`isomorphic-dompurify`) 라이브러리로 HTML을 반드시 정화해야 한다. 추가로 `next.config.js`의 CSP(Content-Security-Policy) HTTP 헤더를 설정해 브라우저가 로드·실행할 수 있는 리소스를 제한한다. `unsafe-inline`과 `unsafe-eval`은 보안상 취약하므로 꼭 필요한 경우가 아니라면 사용을 피해야 한다.

CSRF(Cross-Site Request Forgery)는 로그인된 사용자가 악성 링크를 클릭하면 의도치 않은 서버 요청(글 삭제, 정보 수정 등)이 전송되도록 만드는 공격이다. `next.config.js`에 `X-Content-Type-Options: nosniff`, `Referrer-Policy: strict-origin-when-cross-origin`, `Set-Cookie: SameSite=Strict` 헤더를 추가해 방어한다.

클릭재킹(Clickjacking)은 투명한 `