欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSRF跨站请求伪造

程序员文章站 2024-02-18 16:54:11
...

示例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>

结果:
CSRF跨站请求伪造
所以我们也可以这样写:

<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当中一定要加双引号。
CSRF跨站请求伪造
注意:只有写在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)
                            }
                        })
                    }

即只要是post请求,先检查一下我之前给你发过 的token,如果没有,就报403错误,403错误就是csrfToken的错误。
后来在编写过程中发现,我们只需要将前端界面的csrf_token参数发过去即可。
例如:
CSRF跨站请求伪造
如果通过Ajax发送数据:
CSRF跨站请求伪造