首先先简述一下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();":

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

问题解决。。。

解决js(ajax)提交后端的“ _xsrf' argument missing from POST” 的错误的更多相关文章

  1. pycharm 使用jupyter notebook 报错:'_xsrf' argument missing from POST

    出问题的关键点就在: 我用cmd启动的jupyter notebook,然后用pycham新建了一个jupyter notebook 结果 一直报错'_xsrf' argument missing f ...

  2. 验证控件,解决用于ajax提交前的验证,不是submit提交的验证

    //解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...

  3. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

  4. 解决Jquery Ajax提交 服务器端接收中文乱码问题

    看到有朋友说到用post提交方式解决,我指定了methord="post",仍然解决不了, 说一下解决办法,客户端进行编码,服务器端解码, 客户端:var where = esca ...

  5. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  6. 解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误

    参考页面:https://blog.csdn.net/idomyway/article/details/79572973 如果请求的是PHP页面: header("Access-Contro ...

  7. Ajax提交参数的值中带有html标签不能提交成功的解决办法(ASP.NET)

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  8. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  9. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

随机推荐

  1. POJ 3597 Polygon Division (DP)

    题目链接 题意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 题解: 如果分出的全为三角形的话,那就是正多边形三角剖分问题.它的结果就是Catalan数.现在也可以划分出四边形的话,可以采 ...

  2. CSS命名格式

    CSS样式命名整理页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目: ...

  3. August 12th 2016 Week 33rd Friday

    Everything is good in its season. 万物逢时皆美好. Every dog has its day. You are not in your best condition ...

  4. August 11th 2016, Week 33rd Thursday

    A particular fine spring came around. 转眼又是一番分外明媚的春光. Hey, it is hot outside, sometimes even unbearab ...

  5. July 8th, Week 28th Friday, 2016

    Care and diligence bring luck. 谨慎和勤奋带来好运气. Just as we have said before, diligence is the mother of g ...

  6. hdu 1257 最少拦截系统

    #include<time.h> #include <cstdio> #include <iostream> #include<algorithm> # ...

  7. 在线预览Office文件【效果类似百度文库】(转载)

    转载地址:http://www.cnblogs.com/sword-successful/p/4031823.html 引言 结合上个项目和目前做的这个项目,其中都用到了Office文件在线预览,目前 ...

  8. 无废话ExtJs 入门教程三[窗体:Window组件]

    无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...

  9. CXF学习 (1)

    Axis(Apache) -> Axis2(Apache) XFire - > CXF (XFire+Celtrix) (Apache) CXF并不仅仅是Webservice框架,更号称是 ...

  10. LSM-Tree (BigTable 的理论模型)(转)

    Google的BigTable架构在分布式结构化存储方面大名鼎鼎,其中的MergeDump模型在读写之间找到了一个较好的平衡点,很好的解决了web scale数据的读写问题. MergeDump的理论 ...