Django RESTful API 및 React에서 csrf_token을 사용하는 방법

Django RESTful API 및 React에서 csrf_token을 사용하는 방법

나는 이전에 에 대한 경험이 있다.Django행을 추가하는 경우{csrf_token}에Django그러면 템플릿Django기능을 처리하다csrf_token하지만 제가 API를 개발하려고 할 때Django REST Framework막히죠.다음과 같은 기능을 추가 및 처리하려면 어떻게 해야 합니까?csrf_token에API(백엔드, 사용방법Django REST Framework)와React Native/React JS장고 템플릿 같은 거?

첫 번째 단계는 Django csrftoken cookie에서 취득할 수 있는 CSRF 토큰을 얻는 것입니다.

이제 Django 문서에서 다음과 같은 간단한 JavaScript 함수를 사용하여 cookie에서 csrf 토큰을 얻는 방법을 확인할 수 있습니다.

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

이제 CSRF 토큰을 취득하려면getCookie('csrftoken')기능.

var csrftoken = getCookie('csrftoken');

다음으로 취득한 토큰을 X-CSRFToken 헤더에 할당함으로써 fetch()를 사용하여 요청을 전송할 때 이 CSRF 토큰을 사용할 수 있습니다.

  fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }

리액트 폼에서의 CSRF 토큰 렌더링:

Django 템플릿 대신 React를 사용하여 폼을 렌더링하는 경우 Django 태그가 있기 때문에 CSRF 토큰도 렌더링해야 합니다.{ % csrf_token % }클라이언트 측에서는 사용할 수 없기 때문에 토큰을 취득하는 상위 컴포넌트를 작성해야 합니다.getCookie()어떤 형태로든 렌더링할 수 있습니다.

에 행을 추가합니다.csrftoken.js파일.

import React from 'react';

var csrftoken = getCookie('csrftoken');

const CSRFToken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSRFToken;

그러면 단순히 Import하여 폼 내에서 호출할 수 있습니다.

import React, { Component , PropTypes} from 'react';

import CSRFToken from './csrftoken';


class aForm extends Component {
    render() {

        return (
                 <form action="/endpoint" method="post">
                        <CSRFToken />
                        <button type="submit">Send</button>
                 </form>
        );
    }
}

export default aForm;

장고 CSRF 쿠키

React는 컴포넌트를 동적으로 렌더링하기 때문에 React를 사용하여 폼을 렌더링하는 경우 Django가 CSRF 토큰 쿠키를 설정하지 못할 수 있습니다.Django docs는 다음과 같이 말합니다.

뷰가 csrftoken 템플릿태그를 포함한 템플릿을 렌더링하고 있지 않은 경우 Django는 CSRF 토큰 쿠키를 설정하지 않을 수 있습니다.이것은 양식이 페이지에 동적으로 추가되는 경우에 일반적입니다.이 문제에 대처하기 위해 Django는 cookie: surecsrf_cookie()를 강제로 설정하는 뷰 데코레이터를 제공합니다.

이 문제를 해결하기 위해 Django는 뷰 기능에 추가할 필요가 있는 surecsrfcookie 데코레이터를 제공합니다.예를 들어 다음과 같습니다.

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def myview(request):

반응에서 jquery를 ajax에 사용했습니다.이 경우 다음과 같은 해결책이 있습니다.

let csrfcookie = function() {  // for django csrf protection
            let cookieValue = null,
                name = "csrftoken";
            if (document.cookie && document.cookie !== "") {
                let cookies = document.cookie.split(";");
                for (let i = 0; i < cookies.length; i++) {
                    let cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) == (name + "=")) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
};

$.ajax({
       type: "POST",
       beforeSend: function(request, settings) {
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        request.setRequestHeader("X-CSRFToken", csrfcookie());
                    }
},

.... /// other codes

언급URL : https://stackoverflow.com/questions/50732815/how-to-use-csrf-token-in-django-restful-api-and-react