ajax跨站请求伪造

用ajax提交数据到后台：

{#<!DOCTYPE html>#}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <style>
        .sp{
            color: red;
        }
    </style>
</head>
<body>
<p>姓名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p>
    <button class="sub">提交</button><span class="sp"></span>
</p>
<script>
    function foo() {
            $(".sp").html("");
        }
    $(".sub").click(function () {
        $.ajax({
            url: "/demo_ajax/",
            type: "POST",
            data: {
                username: $(":text").val(),
                password: $(":password").val()
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (!data["flag"]){
                    $(".sp").html("用户名或密码错误"),
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
</html>

　前端采取这种方式提交会报forbidden的错误是因为没有加csrf_token，可是这个不是采用form表单的方式提交的：

怎么解决这种问题呢？一般来说解决这种问题的办法有三种，下边就说一下这三种方式都怎么用：

方式一：

在提交ajax请求的时候给他事先设置一个值：
function foo() {
            $(".sp").html("");
        }
    $(".sub").click(function () {
#######################################
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
#######################################
        $.ajax({
            url: "/demo_ajax/",
            type: "POST",
            data: {
                username: $(":text").val(),
                password: $(":password").val()
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (!data["flag"]){
                    $(".sp").html("用户名或密码错误"),
                    setTimeout(foo,3000)
                }
            }
        })
    })

方式二：

body部分：
<form action="">
{% csrf_token %}
<p>姓名：<input type="text"></p>
<p>密码：<input type="password"></p>
</form>
<p>
    <button class="sub">提交</button><span class="sp"></span>
</p>
button要写在外边，否则会默认以get提交
----------------------------------------------------------------------------------------
这里是js代码：
    function foo() {
        $(".sp").html("");
    }
    $(".sub").click(function () {
        $.ajax({
            url: "/demo_ajax/",
            type: "POST",
            data: {
                username: $(":text").val(),
                password: $(":password").val(),
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (!data["flag"]){
                    $(".sp").html("用户名或密码错误"),
                    setTimeout(foo,3000)
                }
            }
        })
    })

方式三：

        function foo() {
        $(".sp").html("");
    }
    $(".sub").click(function () {
        $.ajax({
            url: "/demo_ajax/",
            type: "POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data: {
                username: $(":text").val(),
                password: $(":password").val()
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (!data["flag"]){
                    $(".sp").html("用户名或密码错误"),
                    setTimeout(foo,3000)
                }
            }
        })
    })

方式三可以在form表单提交，也可以不在form表单中提交：

posted @ 2017-11-14 20:13  前方、有光  阅读(1204)  评论(0)  编辑  收藏  举报