CSRF 토큰?
- CSRF(Cross Site Request Forgery) 토큰은 웹 application 보안에서 사용되는 보안 기술로, CSRF 공격을 막기 위해 사용된다.
📌 CSRF 공격
: 사용자가 악성 웹 사이트를 방문하거나, 악성 이메일 링크를 접속하여 발생하는 보안위협. 예를들어, 링크 클릭시 금전이 송금되거나 계정정보가 유출되는 경우가 있다. - 백엔드에서는 CSRF 토큰은 임의의 난수를 session에 저장한 토큰값과 요청 마라피터의 토큰 값이 일치하는지 확인한다.
- 악의적 링크는 CSRF 토큰을 알 수 없어 유효한 요청을 할 수 없기 때문에 CSRF 공격을 예방할 수 있다.
CSRF 작동법
- CSRF 토큰은 프론트엔드에서 백엔드로 전달되고, 백엔드에서 이 토큰을 확인하여 일치하면 서비스를 제공하는 방식으로 작동
1) 프론트엔드에서 토큰 가져오기
: Django에서 생성한 CSRF 토큰은 Django 템플릿을 통해 HTML 페이지로 렌더링되거나 API 엔드포인트를 통해 프론트엔드로 전달. 이 토큰은 프론트엔드에서 JavaScript로 가져옴.
2) 프론트엔드에서 토큰을 요청에 추가
: 프론트엔드는 요청을 보낼 때 해당 요청의 헤더 또는 본문에 CSRF 토큰을 포함.
3) 백엔드에서 토큰 확인
: 백엔드는 수신한 요청에서 CSRF 토큰 확인. 토큰이 없거나 유효하지 않으면 요청을 거부하거나 오류를 반환.
4) 일치할 경우 서비스 제공
: CSRF 토큰이 요청과 일치하면 백엔드는 해당 요청을 처리하고 서비스 제공.
Django에서의 CSRF
1.Django에서 CSRF 미들웨어 활성화
Django는 기본적으로 CSRF 보호를 제공. settings.py 파일에서 MIDDLEWARE 설정을 확인하고 django.middleware.csrf.CsrfViewMiddleware가 활성화
MIDDLEWARE = [
# ...
'django.middleware.csrf.CsrfViewMiddleware',
# ...
]2.React 프론트엔드에서 CSRF 토큰을 가져오기
Django에서 제공하는 CSRF 토큰을 React 프론트엔드로 가져옴. 이를 위해 Django 템플릿에서 템플릿 태그를 사용하여 토큰을 HTML에 포함시키고, React 앱에서 JavaScript로 이 토큰을 가져와야 옴.
Django 템플릿에서 CSRF 토큰을 가져오는 예제:
<script>
// Django에서 CSRF 토큰을 가져와서 JavaScript 변수에 할당
const csrfToken = "{{ csrf_token }}";
</script>3. React 앱에서 CSRF 토큰 사용
React 앱에서 csrfToken 변수를 사용하여 AJAX 요청 또는 fetch 요청의 헤더에 CSRF 토큰을 포함.
예를 들어, fetch를 사용하는 경우:
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken, // CSRF 토큰을 헤더에 추가
},
body: JSON.stringify(data),
};
fetch('/your-api-endpoint/', requestOptions)
.then(response => response.json())
.then(data => {
// 응답 처리
});여기서 'X-CSRFToken' 헤더는 Django가 CSRF 토큰을 확인하는 데 사용하는 헤더 이름입니다.
4. Django에서 CSRF 토큰을 확인
Django 백엔드에서 요청을 처리할 때 CSRF 미들웨어가 요청의 CSRF 토큰을 확인하고, 토큰이 유효하지 않거나 없는 경우 요청을 거부할 것입니다. 따라서 Django에서 CSRF 토큰을 올바르게 확인하는지 확인해야 합니다.
이러한 단계를 따르면 Django 백엔드와 React 프론트엔드 간에 CSRF 보호가 설정됩니다. 이로써 악의적인 CSRF 공격으로부터 안전한 애플리케이션을 개발할 수 있습니다.
1) settings.py 설정
.....
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CSRF_TRUSTED_ORIGINS = (
'localhost:8000',
'127.0.0.1:8000',
)
CORS_ORIGIN_WHITELIST = (
'localhost:8000',
'127.0.0.1:8000',
)
CORS_ALLOW_HEADERS = (
'access-control-allow-credentials',
'access-control-allow-origin',
'access-control-request-method',
'access-control-request-headers',
'accept',
'accept-encoding',
'accept-language',
'authorization',
'connection',
'content-type',
'dnt',
'credentials',
'host',
'origin',
'user-agent',
'X-CSRFToken',
'csrftoken',
'x-requested-with',
)
....
settings.py
CSRF_TRUSTED_ORIGINS = ["http://www.howdimt.xyz", "https://www.howdimt.xyz"]
참고
