CSRF跨站请求伪造

最新推荐文章于 2024-06-22 12:36:33 发布

一只懒得睁眼的猫

最新推荐文章于 2024-06-22 12:36:33 发布

阅读量340

点赞数

分类专栏： Python

Python 专栏收录该内容

76 篇文章 4 订阅

订阅专栏

示例1：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>批量主机管理系统</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        /*由于使用的栅格系统，实际上wrap包裹层设置居中的效果没有得到很好的体现*/
        .wrap {
            margin: 0 auto;
        }
    </style>

    <link rel="stylesheet" href="{% static "css/MyCSS/index.css" %}">
    <link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
    <script src="{% static "js/jquery-1.11.3.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>

</head>
<body style="background: #708090;">
{#我通过style样式设置距离上面的高度#}
<div class="wrap" style="margin-top: 5%">
    <div class="container">
        {% csrf_token %}
        <div class="row">
            <div class="col-md-offset-4 col-md-4 divhead">
                <h3 class="text-center" id="title">批量主机管理系统</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-4 col-md-4 content">
                <!--input-group方便加入前缀图标-->
                <div class="mpadding input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input type="text" class="form-control" log="loglabel" name="username" placeholder="用户名" autofocus>
                </div>
                <div class="mpadding input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" class="form-control" log="loglabel" name="password" placeholder="密 码">
                </div>
                <!-- btn-block使控件填满父窗体 -->
                <input type="button" class="mpadding btn btn-primary btn-block" value="登录">
                <p class="small text-right" style="margin-top: 10px;">忘记密码？请联系制作团队</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    $("input[log=loglabel]").focusin(function () {
        $("div[name=error]").remove()
    })

    $("input[type=button]").on("click", function () {
        var username = $("input[name=username]").val()
        var password = $("input[name=password]").val()
        {# 手动获取csrf隐藏的字符串数值 #}
        var csrf_value = $("input[name=csrfmiddlewaretoken]").val()

        $.ajax({
            url: '/login/',
            type: 'POST',
            data: {'username': username, 'pwd': password,'csrfmiddlewaretoken':csrf_value},
            {# 回调函数对返回的结果进行处理 #}
            success: function (arg) {
                var data_dict = JSON.parse(arg)
                if (data_dict.status) {
                    window.open('/index/',"_self")
                }
                else {
                    tagname = $("input[value=登录]").next()[0].tagName
                    if (tagname != "DIV") {
                        var tag = document.createElement("div")
                        tag.innerText = "用户名或者密码有误"
                        tag.setAttribute("name", "error")
                        tag.classList.add("text-center")
                        tag.style.color = "red"
                        {# 登陆标签后面加入这个新标签#}
                        $("input[value=登录]").after(tag)
                    }
                }
            }
        })
    })


</script>
</html>

{% csrf_token %}的含义是生成一个隐藏的input 标签，并且这个标签还有值。
如有下面这样写：

<div class="wrap" style="margin-top: 5%">
    <div class="container">
{#        {% csrf_token %}#}
        {{ csrf_token }}
        <div class="row">
            <div class="col-md-offset-4 col-md-4 divhead">
                <h3 class="text-center" id="title">批量主机管理系统</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-4 col-md-4 content">
                <!--input-group方便加入前缀图标-->
                <div class="mpadding input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input type="text" class="form-control" log="loglabel" name="username" placeholder="用户名" autofocus>
                </div>
                <div class="mpadding input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" class="form-control" log="loglabel" name="password" placeholder="密 码">
                </div>
                <!-- btn-block使控件填满父窗体 -->
                <input type="button" class="mpadding btn btn-primary btn-block" value="登录">
                <p class="small text-right" style="margin-top: 10px;">忘记密码？请联系制作团队</p>
            </div>
        </div>
    </div>
</div>

结果：
这里写图片描述
所以我们也可以这样写：

<script>

    $("input[log=loglabel]").focusin(function () {
        $("div[name=error]").remove()
    })

    $("input[type=button]").on("click", function () {
        var username = $("input[name=username]").val()
        var password = $("input[name=password]").val()
        {# 手动获取csrf隐藏的字符串数值 #}
        {# var csrf_value = $("input[name=csrfmiddlewaretoken]").val()#}

        $.ajax({
            url: '/login/',
            type: 'POST',
            data: {'username': username, 'pwd': password,'csrfmiddlewaretoken':"{{ csrf_token }}"},
            {# 回调函数对返回的结果进行处理 #}
            success: function (arg) {
                var data_dict = JSON.parse(arg)
                if (data_dict.status) {
                    window.open('/index/',"_self")
                }
                else {
                    tagname = $("input[value=登录]").next()[0].tagName
                    if (tagname != "DIV") {
                        var tag = document.createElement("div")
                        tag.innerText = "用户名或者密码有误"
                        tag.setAttribute("name", "error")
                        tag.classList.add("text-center")
                        tag.style.color = "red"
                        {# 登陆标签后面加入这个新标签#}
                        $("input[value=登录]").after(tag)
                    }
                }
            }
        })
    })


</script>

注意：只要是字符串，在js当中一定要加双引号。
这里写图片描述
注意：只有写在html里面的，就都可以渲染模板语言，包括js代码。
静态文件是不走视图函数的，不会被渲染。
总结：

            Ajax提交：
                基于请求体：
                    function ajaxSubmit() {
                        $.ajax({
                            url: "/icbc.html",
                            type: 'POST',
                            data: {'k1':'v1','k2':'v2','csrfmiddlewaretoken':$('input[name="csrfmiddlewaretoken"]').val() },
                            success:function (arg) {
                                console.log(arg)
                            }
                        })
                    }

                    // 只能写在模板中
                    function ajaxSubmit() {
                        $.ajax({
                            url: "/icbc.html",
                            type: 'POST',
                            data: {'k1':'v1','k2':'v2','csrfmiddlewaretoken':"{{ csrf_token }}" },
                            success:function (arg) {
                                console.log(arg)
                            }
                        })
                    }

                    function ajaxSubmit() {
                        $.ajax({
                            url: "/icbc.html",
                            type: 'POST',
                            data: $('#f1').serialize(),
                            success:function (arg) {
                                console.log(arg)
                            }
                        })
                    }
                    // 以上都是放在请求体中

                基于请求头：
                    a. 在cookie中获取csrftoken对应的值 l2kEqQLhR1gH0hh3ioZ1dfxT3iSwjXoKTf7GNFggJZ7E6DROB6k33L7vdqe5lV1v
                    b. 发送请求时，放在请求头中也可以

                    function ajaxSubmit() {
                        $.ajax({
                            url: "/icbc.html",
                            type: 'POST',
                            data: {'k1':'v1','k2':'v2'},
                            headers: {"X-CSRFToken": $.cookie('csrftoken')},
                            success:function (arg) {
                                console.log(arg)
                            }
                        })
                    }