美文网首页
前端Ajax请求的CSRF防御

前端Ajax请求的CSRF防御

作者: 叶田的学习笔记 | 来源:发表于2018-10-18 17:31 被阅读0次

    在前端模版的JavaScript代码处,添加下面的代码:

    // using jQuery
    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 csrftoken = getCookie('csrftoken');
    
    function csrfSafeMethod(method) {
        // 这些HTTP方法不要求CSRF包含
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    

    上面代码的作用就是让ajax的POST方法带上CSRF需要的令牌,它依赖Jquery库,必须提前加载Jquery。

    举例:

    
    <script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
    <script type="text/javascript">
    
    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;
    }
    
    $(document).ready(function() {
        var csrftoken = getCookie('csrftoken');
        function csrfSafeMethod(method) {
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({
            crossDomain: false, // obviates need for sameOrigin test
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
    
        var onDelete = function(){
            alert("delete it?");
            $.post(this.href, function(data) {
                if (data.result == "ok"){
                  window.location.reload();
                } else {
                    alert("sth wrong");
                }
            }).fail(function() {
                alert("error");
            });
            return false;
        }
    
        $(".delete").click(onDelete);
    })
    </script>
    

    相关文章

      网友评论

          本文标题:前端Ajax请求的CSRF防御

          本文链接:https://www.haomeiwen.com/subject/etuszftx.html