React 및 API 설정의 CSRF 보호

교차 사이트 요청 위조(CSRF)는 악성 웹사이트가 사용자의 브라우저를 속여 API에 인증된 요청을 보내게 하는 공격입니다. 브라우저는 요청에 쿠키를 자동으로 첨부하므로, 서버는 애플리케이션에서 보낸 정상 요청과 공격자 사이트에서 보낸 위조 요청을 구분할 수 없습니다.

쿠키는 CSRF 취약점의 근본 원인입니다. 사용자가 애플리케이션에 로그인하면 세션 쿠키가 브라우저에 저장됩니다. 사용자가 공격자의 페이지를 방문하면 공격자는 API에 폼 제출이나 가져오기 요청을 실행할 수 있고, 브라우저는 세션 쿠키를 자동으로 포함하여 악성 요청을 인증합니다.

SameSite 쿠키 속성은 브라우저에 교차 사이트 요청에서 쿠키를 언제 포함할지 알려줍니다. 값은 세 가지입니다. Lax(최신 브라우저의 기본값으로, 교차 사이트 POST는 차단하지만 GET은 허용), Strict(GET 탐색을 포함한 모든 교차 사이트 요청을 차단), None(교차 사이트 요청을 허용하지만 HTTPS 보안 플래그가 필요)입니다.

SameSite=Lax는 교차 사이트 POST, PUT, DELETE, PATCH 요청을 차단합니다. 이러한 메서드는 변경 작업에 사용됩니다. API가 읽기에는 GET만 사용하고 모든 변경 작업에는 POST를 사용한다면, SameSite=Lax는 최신 브라우저에서 SPA의 CSRF를 사실상 방지합니다. 이는 오늘날 대부분의 애플리케이션이 의존하는 기본적인 완화 방법입니다.

이중 제출 쿠키 패턴은 서버가 무작위 CSRF 토큰을 HttpOnly가 아닌 쿠키에 설정하는 CSRF 완화 방법입니다. 클라이언트는 이 쿠키 값을 읽어 사용자 지정 요청 헤더(예: X-CSRF-Token)로 포함합니다. 서버는 헤더 값이 쿠키 값과 일치하는지 확인합니다. 공격자는 다른 출처의 쿠키를 읽을 수 없으므로 올바른 헤더를 설정할 수 없습니다.

동기화 토큰 패턴은 서버에서 사용자 세션마다 고유한 CSRF 토큰을 생성합니다. HTML 폼에서는 토큰을 숨겨진 필드에 삽입합니다. SPA API 호출에서는 엔드포인트나 메타 태그를 통해 토큰을 제공하고 사용자 지정 헤더로 전송합니다. 서버는 상태를 변경하는 모든 요청에서 토큰을 검증합니다.

JWT를 메모리 또는 localStorage에 저장하고 Authorization: Bearer 헤더로 전송하는 React SPA는 전형적인 CSRF 공격에 취약하지 않습니다. CSRF 공격은 쿠키 기반 인증을 악용하지만, 공격자의 페이지는 CORS 제한으로 인해 교차 출처 요청에 사용자 지정 헤더를 설정할 수 없습니다. 따라서 Authorization 헤더를 위조할 수 없습니다.

단순한 교차 출처 요청(폼 POST, 이미지 로드)에서는 사용자 지정 헤더를 사용할 수 없습니다. CORS 프리플라이트를 거치는 요청만 사용자 지정 헤더를 포함할 수 있으며, 프리플라이트 요청에는 서버의 명시적인 허가가 필요합니다. 모든 변경 작업에 사용자 지정 헤더(예: X-Requested-With: XMLHttpRequest)를 요구하는 API는 단순한 CSRF 공격으로부터 본질적으로 보호됩니다.

CORS는 교차 출처 요청의 응답을 읽을 수 있는 출처를 제어합니다. CSRF는 상태를 변경하는 요청을 보낼 수 있는 출처와 관련됩니다. 출처를 제한하도록 CORS를 구성해도 CSRF를 방지할 수는 없습니다. 브라우저는 여전히 요청과 쿠키를 전송하며, CORS는 응답을 JavaScript에서 볼 수 있는지만 제어합니다. CSRF 공격에는 응답을 읽을 필요가 없습니다.

세션 쿠키는 다음과 같이 구성하십시오. HttpOnly: true(JavaScript가 쿠키를 읽지 못하게 하여 XSS 기반 토큰 탈취를 차단), Secure: true(HTTPS를 통해서만 전송), SameSite: Lax 또는 Strict(CSRF 방지), 적절한 Max-Age 또는 만료 시간을 설정합니다. 이 네 가지 속성을 함께 사용하면 세션 관리의 보안이 크게 강화됩니다.

Next.js App Router는 POST 요청인 Server Actions를 사용합니다. Next.js는 Origin 헤더를 호스트와 비교하여 CSRF를 방지합니다. 예상하지 못한 출처에서 온 요청은 거부됩니다. 이 기본 제공 검사와 SameSite=Lax 세션 쿠키를 함께 사용하면 Server Action 기반 변경 작업에 강력한 CSRF 방어를 제공할 수 있습니다.

교차 사이트 POST 요청은 차단하면서 교차 사이트 GET 탐색은 허용하는 SameSite 쿠키 값은 무엇입니까?

CSRF는 브라우저를 속여 인증된 교차 사이트 요청을 보내게 함으로써 쿠키 기반 인증을 악용합니다. SameSite=Lax는 최신 브라우저에서 사용하는 기본 방어 수단입니다. 이중 제출 쿠키 및 동기화 토큰 패턴은 추가적인 보호 기능을 제공합니다. Authorization 헤더에서 JWT를 사용하는 React SPA는 본질적으로 CSRF에 강합니다. 사용자 지정 필수 헤더와 CORS 사전 요청도 CSRF를 완화합니다. 세션 쿠키에는 항상 HttpOnly + Secure + SameSite를 함께 사용하십시오.