CSRF와 Django, React+Redux(Axios 사용)

CSRF와 Django, React+Redux(Axios 사용)

이것은 교육 프로젝트이지 생산을 위한 것이 아닙니다.이 작업의 일부로 사용자 로그인을 의도한 것은 아닙니다.

사용자가 로그인하지 않아도 CSRF 토큰을 사용하여 Django에 POST 콜을 발신할 수 있습니까?jQuery를 사용하지 않고 이 작업을 수행할 수 있습니까?난 여기서 내 전문을 벗어나서 몇 가지 개념을 확실히 혼란스럽게 하고 있어.

JavaScript 쪽에서는 이 redux-csrf 패키지를 찾았습니다.어떻게 조합해야 할지 모르겠어요.POSTAxios:

export const addJob = (title, hourly, tax) => {
  console.log("Trying to addJob: ", title, hourly, tax)
  return (dispatch) => {
    dispatch(requestData("addJob"));
    return axios({
      method: 'post',
      url: "/api/jobs",
      data: {
        "title": title,
        "hourly_rate": hourly,
        "tax_rate": tax
      },
      responseType: 'json'
    })
      .then((response) => {
        dispatch(receiveData(response.data, "addJob"));
      })
      .catch((response) => {
        dispatch(receiveError(response.data, "addJob"));
      })
  }
};

---

Django 측에서는 CSRF에 관한 문서와 클래스 베이스 뷰에 관한 일반적인 작업에 관한 문서를 읽어 보았습니다.

지금까지의 제 견해는 다음과 같습니다.

class JobsHandler(View):

    def get(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        return HttpResponse(json.dumps(jobs))

    def post(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        new_job = request.to_dict()
        id = new_job['title']
        jobs[id] = new_job

        with open('./data/jobs.json', 'w') as f:
            f.write(json.dumps(jobs, indent=4, separators=(',', ': ')))

        return HttpResponse(json.dumps(jobs[id]))

일단은 걱정하지 않기 위해 데코레이터를 사용하려고 했습니다만, 그렇게 되지 않는 것 같습니다.

추가했습니다.{% csrf_token %}템플릿으로 이동합니다.

은 나의 ★★★★★★★★★★★★★★★★★★★★입니다.getCookie장고:

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 = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Axios CSRF 정보를 변경해야 한다고 읽었습니다.

var axios = require("axios");
var axiosDefaults = require("axios/lib/defaults");

axiosDefaults.xsrfCookieName = "csrftoken"
axiosDefaults.xsrfHeaderName = "X-CSRFToken"

토큰을 이 토큰을 호출하면 수 있는 입니다.콜을 통해 얻을 수 있는 값getCookie('csrftoken')

이 Q&A는 2016년인데, 놀랄 것도 없이 상황이 바뀌었다고 생각합니다.답변은 계속 상향투표를 받기 때문에 다른 답변의 새로운 정보를 추가하지만 원래 답변도 남겨둡니다.

어떤 솔루션이 당신에게 적합한지 댓글로 알려주세요.

옵션 1기본 헤더 설정

Axios를 가져올 파일에서 기본 헤더를 설정합니다.

import axios from 'axios';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";

옵션 2Axios 호출에 수동으로 추가

를 들어이 '에해 보겠습니다.csrfToken 악시오스

// ...
method: 'post',
url: '/api/data',
data: {...},
headers: {"X-CSRFToken": csrfToken},
// ...

【 설정】xsrfHeaderName in :

추가:

// ...
method: 'post',
url: '/api/data',
data: {...},
xsrfHeaderName: "X-CSRFToken",
// ...

그 your your your thensettings.py합니다: 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예, 예.

CSRF_COOKIE_NAME = "XSRF-TOKEN"

편집(2017년 6월 10일):사용자 @yestema는 Safari와는 조금^[2] 다르다고 말합니다.

편집(2019년 4월 17일):사용자 @GregHolst는 위의 Safari 솔루션이 자신에게 적합하지 않다고 말합니다.대신 위의 솔루션 #3을 MacOS Mojave에서 Safari 12.1에 사용했습니다(댓글 참조).

편집(2019년 2월 17일):또, 다음과 같이^[3] 설정할 필요가 있습니다.

axios.defaults.withCredentials = true

내가 시도했지만 효과가 없었다: 1

알아본 바로는, i가 i i, 건건 i i 。axios.defaults.xsrfCookieName = "XCSRF-TOKEN"; ★★★★★★★★★★★★★★★★★」CSRF_COOKIE_NAME = "XCSRF-TOKEN"

Mac OS의 Apple Safari에서 작동하지 않음

MAC Safari 용 솔루션은 간단합니다.로 변경하기만 하면 됩니다.

따라서 js-code는 다음과 같습니다.

    import axios from 'axios';
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";

설정 중.py:

    CSRF_COOKIE_NAME = "csrftoken"

이 설정은 문제없이 기능합니다.구성 악리 CSRF django

import axios from 'axios'

/**
 * Config global for axios/django
 */
axios.defaults.xsrfHeaderName = "X-CSRFToken"
axios.defaults.xsrfCookieName = 'csrftoken'

export default axios

위 답변에 대한 조사와 구현에 너무 많은 시간을 소비한 후, 이 문제에 대한 오류를 발견했습니다!이 답변은 수용된 답변의 보충으로 추가하였습니다.모든 것을 말씀드린 대로 셋업했습니다만, 실제로 브라우저 자체에 gotcha가 있었습니다!

로컬로 테스트하는 경우는, 에 액세스 하고 있는 것을 확인해 주세요.127.0.0.1대신localhost!localhost는 요구 헤더를 다르게 처리하고 헤더 응답에 CSRF 토큰을 표시하지 않습니다.127.0.0.1윌! 그래서 대신localhost:3000해라127.0.0.1:3000!

이게 도움이 됐으면 좋겠다.

"쉬운 방법"이 내게 거의 먹힐 뻔했다.이것은 효과가 있는 것 같습니다.

import axios from 'axios';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "XCSRF-TOKEN";

settings.py 파일에는 다음과 같은 내용이 있습니다.

CSRF_COOKIE_NAME = "XCSRF-TOKEN"

모든 투고 요청에 수동으로 Django에서 제공한 CSRF 토큰을 추가할 수 있지만 번거롭습니다.

Django 문서에서:

AJAX POST 요구에는 상기의 방법(수동 설정 CSRF 토큰)을 사용할 수 있습니다만, POST 요구 마다 CSRF 토큰을 POST 데이터로서 건네주는 것을 잊지 말아 주세요.따라서 다른 방법이 있습니다.각 XMLHttpRequest에서 커스텀 X-CSRFToken 헤더를 CSRF 토큰 값으로 설정합니다.많은 JavaScript 프레임워크가 모든 요청에 대해 헤더를 설정할 수 있는 후크를 제공하기 때문에 이 작업은 종종 더 쉽습니다.

문서에는 CSRF 토큰 쿠키에서 CSRF 토큰을 꺼내 AJAX 요청 헤더에 추가하기 위해 사용할 수 있는 코드가 있습니다.

정말 쉬운 방법이 있어요.

더하다axios.defaults.xsrfHeaderName = "X-CSRFToken";어플리케이션 설정에 맞추어 설정하다CSRF_COOKIE_NAME = "XSRF-TOKEN"settings.py 파일을 참조해 주세요.마법처럼 작동한다.

저는 장고가 제가 보내는 헤더를 듣고 있지 않았어요.API로 컬링할 수 있었지만 엑시스로는 접근할 수 없었습니다.코르스헤더 패키지 좀 봐새로운 베스트 프렌드일지도 몰라

장고코어 헤더를 설치하여 고쳤습니다.

pip install django-cors-headers

그리고 추가

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

그리고.

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

설정을 변경해 주세요.화이

저도요.

ALLOWED_HOSTS = ['*']
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
    'Access-Control-Allow-Origin: *',
)

settings.py에 있는 것은 과잉일지도 모릅니다.

yestema가 말한 것(그리고 crescruz, cran_man, Dave Merwin 등) 외에 다음과 같은 것도 필요합니다.

axios.defaults.withCredentials = true

언급URL : https://stackoverflow.com/questions/39254562/csrf-with-django-reactredux-using-axios