Question

我正在运行Django v1.10.8项目。我有一个使用AngularJS v1.5.6处理的表单。我把项目放在使用SSL的远程服务器上，在HTTPS上运行。

当我尝试提交自定义登录表单时，出现此错误：Forbidden (403) CSRF verification failed. Request aborted.。

login_register.html登录表单：

<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;
        });
    };
});

以下是我的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

尽管在JS中设置了CSRF令牌，为什么我会收到403错误？

Answer 1

除非我严重错误，并且因为我对Angular知之甚少，所以我很可能，你实际上从未在Javascript中设置实际令牌。您设置了Cookie，但没有将令牌的值放入其中。您可以使用{{ csrf_token }}在HTML中访问令牌的原始值。

如果我不正确，那么您还没有使用HTTPS访问该页面的可能性，这可能是因为您设置了CSRF_COOKIE_SECURE = True

Answer 2

表单标签后应有一个CSRF令牌

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

禁止（403）CSRF验证失败。请求中止。 Django + AngularJS

2 个答案: