• 解决js(ajax)提交后端的“ _xsrf' argument missing from POST” 的错误


    首先先简述一下CSRF:

        CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意思,也就是在用户会话下对某个CGI做一些GET/POST的事情——这些事情用户未必知道和愿意做,你可以把它想做HTTP会话劫持。
        网站是通过cookie来识别用户的,当用户成功进行身份验证之后浏览器就会得到一个标识其身份的cookie,只要不关闭浏览器或者退出登录,以后访问 这个网站会带上这个cookie。如果这期间浏览器被人控制着请求了这个网站的url,可能就会执行一些用户不想做的功能(比如修改个人资料)。因为这个 不是用户真正想发出的请求,这就是所谓的请求伪造;呵呵,因为这些请求也是可以从第三方网站提交的,所以前缀跨站二字。

    当你采用有"_xrsf"防止攻击做项目的时候,你会发现如果采用ajax提交表单的话会出现“ _xsrf' argument missing from POST” 的错误。

    首先我们可能会想到在是因为表单里面input标签的type属性不是submit,而是button(用于aja提交)。所以可以将其该为submit是可以解决的,但是这会让ajax失去意义,因为拦不住form表单的action操作,也许可以在form标签里面加上onsubmit="return user_login();"

    1 <form action="/check_login_action" method="post" onsubmit="return user_login();">
    2             <dl><h2> 用户登录</h2><hr>
    3             <dt>账号:<input id="user_name" name="user_name" type="text" placeholder="输入账号"/> <a href="register_user.html">注册账户</a></dt>
    4             <dt>密码:<input id="user_password" name="user_password" type="password" placeholder="输入密码"/> 
    <a href="find_password.html">找回密码</a></dt> 5 {% raw xsrf_form_html() %} 6 <dt><input type="submit" value="登录" ></dt> 7 </dl> 8 </form>

    但是ajax的优势也会被覆盖掉;所以如果一定要采用ajax的话(至少可以很好的操作回显的值),可以在js中拿到这个xrsf里面的值传到后端就解决了:

    function user_login(){
        var _xsrf = $("input[name='_xsrf']").val();
        var user_name = $("#user_name").val();
        var username = check(1, user_name);
        if(username.split('#')[0]=='F'){
            alert(username.split('#')[1]);
        }
        else{
            var user_password = $("#user_password").val();
            var userpass = check(2, user_password);
            if(userpass.split('#')[0]=='F'){
                alert(userpass.split('#')[1]);
            }
            else{
                var xmlhttp;
                if(window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                }
                else{
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        var json_login = eval("("+ xmlhttp.responseText +")");
                        if(json_login.returnedjson.infostatus == 'T'){
                alert(json_login.returnedjson.infomsg);
                            window.location.href = "/personal_account_temp";
                //obj.action = "/check_login_action";
                        }
                        else{
                            alert(json_login.returnedjson.infomsg);
                            $("#user_name").val("");
                            $("#user_password").val("");
                            $("#user_name").focus();
                        }
                    }
                }
                var user_mess ="user_name=" + encodeURIComponent(user_name) + "&user_password=" + encodeURIComponent(user_password) + "&_xsrf=" + _xsrf;
            //传给后端,后端会自动的去接收 xmlhttp.open(
    "post", "/check_login_action", true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); xmlhttp.send(user_mess); } } }

    问题解决。。。

    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    MVC OnActionExecuting,OnResultExecuted 的用法
    MindManager脑图之项目管理甘特图
    jQuery.Autocomplete实现自动完成功能(经典)
    常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)
    用ATL创建COM组件详细解说
    STL中的常用的vector,map,set,Sort用法
    绘图效率完整解决方案——三种手段提高GDI/GDI+绘图效率
    C++面试
    iOS开发UI篇—iOS开发中三种简单的动画设置
    OS开发UI篇—IOS开发中Xcode的一些使用技巧
  • 原文地址:https://www.cnblogs.com/jlj9520/p/4902472.html
Copyright © 2020-2023  润新知