как проверить, что токен csrf хорошо работает в браузере при использовании django и react

#javascript #python #reactjs #python-3.x #django

Вопрос:

Заранее прошу прощения, если вопрос больше для начинающих, но я создал приложение с бэкэндом django и интерфейсом react, теперь я пытаюсь реализовать токен csrf для запроса post на конечной точке создания с помощью приведенных ниже кодов.

getCookie.js

 import React from 'react';

const getCookie = (name) => {
    let cookieValue = null;
    if (document.cookie amp;amp; document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i  ) {
            const 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;
}

export default getCookie;
 

CsrfToken.js

 import React from 'react';
import getCookie from './getCookie';

var csrftoken = getCookie('csrftoken');

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

 

Create.js

 import React from 'react';
import axios from "axios";
import CsrfToken from './CsrfToken';

const Create = () => {
    ...

    const options = {
        headers: {
            'Content-Type': 'application/json',
        }
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        axios.post("http://xyz/create/", fields, options)
        .then(response => {
          ...
    };

    return (
        <>
            <div className="somecontainer">
                <div className="row">
                    <div className="col-md">
                        <Form onSubmit={handleSubmit}>
                            <CsrfToken />                < ==== CSRF TOKEN COMPONENT
                            <Form.Group className="sm-3" controlId="username">
                            <Form.Control
                                size="lg"
                                className="submit-button-text"
                                type="name"
                                placeholder="Enter username"
                                value={fields.name}
                                onChange={handleFieldChange}
                                />
                            </Form.Group>
...
 

Предполагая, что приведенный выше сценарий верен (пожалуйста, дайте мне знать, если это не так), где в браузере, использующем chrome на вкладке «Сеть», я могу проверить, включена ли функция csrf на самом деле всякий раз, когда я создаю запрос на публикацию?

Я не мог видеть его здесь:

введите описание изображения здесь

Ответ №1:

Если вы используете Chrome: Проверьте > Приложение >> Файлы cookie >>> csrftoken