Issue

I am sorry in advance if the question is more a beginner one but i have built an application with django backend and react frontend, now i am trying to implement the csrf token for the post request on the create endpoint with the codes below.

getCookie.js

import React from 'react';

const getCookie = (name) => {
    let cookieValue = null;
    if (document.cookie && 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>
...

Assuming the script above is correct (Please let me know if it is not), where in the browser using chrome inside of the network tab do i check whether the csrf feature is actually enabled whenever i generate a post request?

I couldnt see it here:

Solution

If you are using Chrome: Inspect > Application > Cookies > csrftoken

Answered By – user16350436

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0