Vue Academy · 강의

Vue SPA의 CSRF 방어

SameSite 쿠키, Axios의 CSRF 토큰과 이중 제출 쿠키 패턴을 익힙니다.

Vue SPA의 CSRF 방어은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSRF란 무엇인가

사이트 간 요청 위조는 로그인한 사용자의 브라우저가 원치 않는 상태 변경 요청을 사이트에 보내도록 속이는 공격입니다. 이때 브라우저가 자동으로 보내는 쿠키를 이용합니다. 공격자는 응답을 읽을 수 없지만, 송금이나 삭제와 같은 부작용을 일으킬 수 있습니다.

쿠키가 이를 가능하게 하는 이유

인증이 세션 쿠키에 의존하면 브라우저는 악성 사이트에서 유발한 요청을 포함하여 해당 도메인으로 보내는 모든 요청에 쿠키를 첨부합니다. 추가 방어 수단이 없으면 서버는 위조된 요청과 정상 요청을 구분할 수 없습니다.

SameSite 쿠키 속성

쿠키에 SameSite를 설정하면 사이트 간 요청에서 쿠키를 언제 보낼지 브라우저에 알릴 수 있습니다. SameSite=Strict는 모든 사이트 간 요청에서 쿠키를 보내지 않으므로 대부분의 CSRF를 즉시 차단합니다.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict와 Lax 비교

Strict가 가장 안전하지만 외부 링크를 통해 방문할 때 사용자가 로그아웃될 수 있습니다. Lax는 최상위 수준의 GET 탐색에서만 쿠키를 보내므로 일반적으로 균형 잡힌 선택입니다.

동기화 토큰 패턴

심층 방어를 위해 공격자가 알 수 없는 CSRF 토큰을 추가합니다. 서버가 토큰을 발급하면 클라이언트는 상태 변경 요청에 토큰을 되돌려 보내야 합니다.

이중 제출 쿠키

SPA에서 흔히 사용하는 방법입니다. 서버가 읽을 수 있는(HttpOnly가 아닌) 쿠키에 CSRF 토큰을 설정합니다. 클라이언트는 쿠키를 읽어 헤더로 다시 보내고, 서버는 두 값이 일치하는지 확인합니다.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

쿠키에서 토큰 읽기

Vue 앱의 간단한 도우미를 사용하여 CSRF 쿠키 값을 읽으십시오.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

요청에 헤더 설정하기

모든 상태 변경 요청(POST, PUT, PATCH, DELETE)에 X-CSRF-Token과 같은 사용자 지정 헤더로 토큰을 보내십시오.

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Axios 기본 헤더

Axios에서는 헤더를 기본값으로 한 번 설정하여 모든 요청에 자동으로 포함되도록 할 수 있습니다.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Axios 내장 CSRF 지원

Axios가 이 작업을 자동으로 처리하도록 할 수도 있습니다. 쿠키 이름과 헤더 이름을 설정하면 Axios가 쿠키를 읽고 헤더를 설정합니다.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

사용자 지정 헤더가 도움이 되는 이유

브라우저는 CORS 사전 요청을 통과하지 않고는 다른 출처의 사이트가 사용자 지정 헤더를 설정하지 못하도록 차단합니다. X-CSRF-Token을 요구하면 위조된 사이트 간 요청에 이 헤더를 포함할 수 없으므로 서버가 요청을 거부합니다.

빠른 확인

쿠키 속성 중 그 자체로 CSRF를 가장 직접적으로 완화하는 것은 무엇입니까?

요약

CSRF는 자동으로 전송되는 쿠키를 악용하여 상태 변경 요청을 위조합니다. 주요 방어 수단으로 인증 쿠키에 SameSite=Strict를 설정하고 CSRF 토큰을 추가하십시오. 토큰을 쿠키에서 읽어 모든 변경 요청에 X-CSRF-Token 헤더로 보내며, Axios 기본값으로 한 번 설정하거나 Axios의 내장 xsrf 옵션을 사용하면 됩니다.

자주 묻는 질문

“Vue SPA의 CSRF 방어” 강의는 무료인가요?

네 — “Vue SPA의 CSRF 방어” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vue SPA의 CSRF 방어”에서 뭘 배우나요?

SameSite 쿠키, Axios의 CSRF 토큰과 이중 제출 쿠키 패턴을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Vue SPA의 CSRF 방어” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기