首先先简述一下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. IOS - ARC改为非ARC

    1.project -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C Automatic ...

  2. php数据访问(修改)

    修改:跟添加相似,需要显示默认值 先嵌入php代码  查询数据库 $code = $_GET["c"]; $db = new MySQLi("localhost" ...

  3. [Android Pro] 关于inputStream.available()方法获取文件的总大小

    reference to :http://hold-on.iteye.com/blog/1017449 如果用inputStream对象的available()方法获取流中可读取的数据大小,通常我们调 ...

  4. 添加thrust的库后出错

    在添加thrust库中的host_vector.h等头文件时 C:\NVIDIA\cudatoolkit\include\thrust\detail\config中的debug.h一直出问题,因此注释 ...

  5. 关于 UICollectionViewCell 的一些陷阱

    如果直接使用 UICollectionViewCell 的自带属性 selected 来自定义一些样式,如: - (void)setSelected:(BOOL)selected { [super s ...

  6. “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法

    百思不得其解,最后发现 1:实体中的表必须有主键(数据库中的表必须有主键),如果没有,会有这样的提示 2:主键设置好后,运行还是会出现类似问题,那就一个郁闷 1):方法一:先从EF中删除刚设置主键的模 ...

  7. python基础——使用@property

    python基础——使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9 ...

  8. DB2 Add hidden Identity columns

    An identity column contains a unique numeric value for each row in the table. DB2® can automatically ...

  9. zip 压缩文件 unzip查看zip压缩包内的内容

    [root@GitLab tmp]# zip -r new.zip ./*  adding: gitlab_key_file20161001-2668-1eu44mv (deflated 15%)  ...

  10. WPA: 4-Way Handshake failed - pre-shared key may be incorrect

    生成psk网址: https://www.wireshark.org/tools/wpa-psk.html 相关 bug: 重点 关注 : https://en.community.sonos.com ...