154.Ajax處理csrf防護

時間 2020-02-23

原文原文鏈接

在普通的form表單中採用post請求提交數據，能夠在form表單的method=post的form標籤下面，添加一個csrf_token標籤{% csrf_token %}，或者是直接手動的添加一個input標籤，<input type='text' name='csrfmiddlewaretoken value='{{ csrf_token }}'>，均可以在form表單中作好csrf防護的工做。可是若是咱們的數據是經過jQuery，Ajax提交的，那咱們就不能使用csrf_token標籤來處理csrf攻擊了。這種狀況下，能夠在form表單中添加csrfmiddlewaretoken，或者是經過ajax在咱們的請求頭中設置一個X-CSRFToken變量，咱們能夠從返回的cookie中提取csrf_token，再設置進去。在咱們的項目中建立一個js文件爲：myajax_csrf.js,用來定義獲取cookie中的csrftoken的函數，示例代碼以下：

function getcookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var myajax_csrf = {
    'get': function (args) {
        args['method'] = 'get';
        this.ajax(args);
    },
    'post': function (args) {
        args['method'] = 'post';
        this._ajaxSetup();
        this.ajax(args);
    },
    'ajax': function (args) {
        $.ajax(args);
    },
    '_ajaxSetup': function () {
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", getcookie('csrftoken'));
                }
            }
        });
    }
};

在咱們的轉帳html中加載js文件，示例代碼以下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ICBC</title>
    <!--加載js文件-->
    <script src="{% static 'myajax_csrf.js' %}"></script>
    <script>
        $(function () {
            $("#submit").click(function (event) {
               <!--阻止form表單採用post請求提交的方式-->
                event.preventDefault();
                var email = $("input[name='email']").val();
                var money = $("input[name='money]").val();
                
                <!--採用post請求的方式提交-->
                myajax_csrf.post({
                    'url': '/transfer/',
                    'data': {
                        'email': email,
                        'money': money,
                    },
                    'success': function (data) {
                    // 若是狀態等於200 纔會走到success的回調中
                        console.log(data);
                    },
                    'fail': function (error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
<h1 style="margin: auto">
    中國工商銀行轉帳界面
</h1>
<form action="" method="post">
    <table>
        <tr>
            <td>轉帳給郵箱：</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>金額：</td>
            <td><input type="text" name="money"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
{{ context.info }}
<ul>
    <button><a href="{% url 'logout' %}">退出登陸</a></button>
</ul>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。