• 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表单中提交:

  • 相关阅读:
    泛型为什么不用装箱拆箱
    net 自带cache
    泛型与非泛型的区别。
    java 魔术
    栈帧
    yii使用CUploadedFile上传文件
    yii上传图片、yii上传文件、yii控件activeFileField使用
    yii 验证码的使用
    mysql 分库分表
    全国省市区三级联动js
  • 原文地址:https://www.cnblogs.com/52-qq/p/7834395.html
Copyright © 2020-2023  润新知