CODEWITHSUNDEEP
angularjsdjangocsrf
Username
Username

Reputation: 3663

Forbidden (403) CSRF verification failed. Request aborted. Django + AngularJS

I'm running a Django v1.10.8 project. I have a form that's processed with AngularJS v1.5.6. I've put the project on a remote server that uses SSL, runs on HTTPS.

When I try submitting my custom login form, I get this error: Forbidden (403) CSRF verification failed. Request aborted..

login_register.html login form here:

<div ng-app="app" ng-controller="Ctrl">
<form method="post" name="loginForm" ng-submit="login()">
    <fieldset ng-disabled="submittingForm">
        <p>
            <input 
                id="{{ login_form.username.id_for_label }}"
                type="email" 
                name="{{ login_form.username.html_name }}"
                placeholder="Email"
                ng-model="login.email"
                required>
        </p>
        <p>
                <input 
                    class="form-control" 
                    id="{{ login_form.password.id_for_label }}" 
                    name="{{ login_form.password.html_name }}"
                    placeholder="{% trans 'Password (8+ characters)' %}"
                    type="[[[ login.showPW ? 'text' : 'password' ]]]" 
                    ng-minlength="{{ min_pw_length }}" 
                    ng-maxlength="{{ max_pw_length }}" 
                    ng-model="login.pw"
                    required 
                >               
        </p>
        <button class="btn btn-primary" type="submit" ng-disabled="!login.email || !login.pw">{% trans "Log in" %}</button>
    </fieldset>
</form>
</div>

login-register.js:

var app=    angular.module("app",[]);
app.config(function($interpolateProvider, $httpProvider){
    $interpolateProvider.startSymbol("[[[");
    $interpolateProvider.endSymbol("]]]");

    $httpProvider.defaults.xsrfCookieName=  "csrftoken";
    $httpProvider.defaults.xsrfHeaderName=  "X-CSRFToken";
});

app.controller("Ctrl", function($scope, $http, $window){
    $scope.loginError=  '';

    $scope.login= function(){
        $scope.submittingForm=  true;
        $scope.loginError=  '';
        var formData=   {
            "username": $scope.login.email,
            "password": $scope.login.pw
        };
        $http.post(
            "login", 
            JSON.stringify(formData)
        ).success(function(response){
            if (response.success === false){
                $scope.loginError=  response.err_msg;
                $scope.submittingForm=false;
                return;
            }
            $window.location.href=  GLOBAL_paths.home;
        });
    };
});

Here's an excerpt my local_settings.py:

SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_HTTPONLY = True
X_FRAME_OPTIONS = "DENY"
SECURE_HSTS_SECONDS = 60
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_BROWSER_XSS_FILTER = True
SECURE_SSL_REDIRECT = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True

Why do I get this 403 error despite setting the CSRF token in the JS?

Upvotes: 2

Views: 1495

Answers (2)

Toluwalemi
Toluwalemi

Reputation: 414

There should be a CSRF token after the form tag

<form method="post" name="loginForm" ng-submit="login()">
{% csrf_token %}

Upvotes: 2

Patrick Gallagher
Patrick Gallagher

Reputation: 193

Unless I am gravely mistaken, and since I know little to no Angular it's very possible I am, you actually never set the actual token in your Javascript. You set up the cookie, but didn't put the token's value in it. You can access the token's raw value in your HTML with {{ csrf_token }}.

If I am incorrect, then there's also the probability that you're not using HTTPS to access the page, which would arise from you having set CSRF_COOKIE_SECURE = True

Upvotes: 1

Related Questions