Forbidden (CSRF token missing)

Using Django Forms & APIs
1

I just learned how to create a web server on raspberry using django, i am trying to improve it by using JS that generates form every time i send data but am getting this error and haven’t found a solution yet. Need some advice.

Error when i run web server
Screenshot 2023-03-21 091354

HTML code

<!DOCTYPE html>
<html>
<head>
    <title>blablablai</title>
    <script>
        function sendDirection(direction) {
            const data = new FormData();
            data.append('direction', direction);
            const request = new XMLHttpRequest();
            request.open('POST', '{% url "home" %}');
            request.send(data);
        }
        
        function onMouseDown(direction) {
            sendDirection(direction);
        }
        
        function onMouseUp() {
            sendDirection('stop');
        }
    </script>
</head>
<body>
    <h1>bzzzz....</h1>

    <button type="button" onmousedown="onMouseDown('forward')" onmouseup="onMouseUp()">Forward</button>
    <button type="button" onmousedown="onMouseDown('backward')" onmouseup="onMouseUp()">Backward</button>
    <button type="button" onmousedown="onMouseDown('left')" onmouseup="onMouseUp()">Left</button>
    <button type="button" onmousedown="onMouseDown('right')" onmouseup="onMouseUp()">Right</button>

    <form method="post" action="{% url 'change_speed' %}">
        {% csrf_token %}
        <button type="submit" name="speed" value="25">Speed 25%</button>
        <button type="submit" name="speed" value="50">Speed 50%</button>
        <button type="submit" name="speed" value="75">Speed 75%</button>
        <button type="submit" name="speed" value="100">Speed 100%</button>
    </form>
</body>
</html>

my views.py code

from django.shortcuts import render, redirect
import smbus

# Define I2C address
SLAVE_ADDRESS = 0x27

# Initialize I2C bus
bus = smbus.SMBus(1)

# Define motor control functions
def forward():
    bus.write_byte(SLAVE_ADDRESS, ord('f'))

def backward():
    bus.write_byte(SLAVE_ADDRESS, ord('b'))

def turn_left():
    bus.write_byte(SLAVE_ADDRESS, ord('l'))

def turn_right():
    bus.write_byte(SLAVE_ADDRESS, ord('r'))

def stop():
    bus.write_byte(SLAVE_ADDRESS, ord('s'))
    
def speed25():
    bus.write_byte(SLAVE_ADDRESS, ord('1'))

def speed50():
    bus.write_byte(SLAVE_ADDRESS, ord('2'))

def speed75():
    bus.write_byte(SLAVE_ADDRESS, ord('3'))
    
def speed100():
    bus.write_byte(SLAVE_ADDRESS, ord('4'))
    
def home(request):
    if request.method == 'POST':
        direction = request.POST.get('direction')
        speed = request.POST.get('speed')

        # Determine which button was pressed
        if direction == 'forward':
            forward()
        elif direction == 'backward':
            backward()
        elif direction == 'left':
            turn_left()
        elif direction == 'right':
            turn_right()
        elif direction == 'stop':
            stop()
    return render(request, 'home.html')
    
def change_speed(request):
    if request.method == 'POST':
        speed = request.POST.get('speed')

        # Determine which button was pressed
        if speed == '25':
            speed25()
        elif speed == '50':
            speed50()
        elif speed == '75':
            speed75()
        elif speed == '100':
            speed100()
        return redirect('home')
    else:
        return render(request, 'home.html')
2

You’re making an AJAX-style submission in your JavaScript - see the docs at Using CSRF protection with AJAX

3

thank for your reply. Do you have some advice for me to improve my web server.

4

What makes you think it needs to be improved?

Is it working?
Is it doing what you need it to do the way it needs to be done?

Unless you have identified a flaw or short-coming, “good enough” is usually good enough.

1 Like