用ajax提交数据到后台:

{#<!DOCTYPE html>#}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.2.1.min.js"></script>
<style>
.sp{
color: red;
}
</style>
</head>
<body>
<p>姓名:<input type="text"></p>
<p>密码:<input type="password"></p>
<p>
<button class="sub">提交</button><span class="sp"></span>
</p>
<script>
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})
</script>
</body>
</html>

 前端采取这种方式提交会报forbidden的错误是因为没有加csrf_token,可是这个不是采用form表单的方式提交的:

怎么解决这种问题呢?一般来说解决这种问题的办法有三种,下边就说一下这三种方式都怎么用:

方式一:

在提交ajax请求的时候给他事先设置一个值:
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
#######################################
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
});
#######################################
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})

方式二:

body部分:
<form action="">
{% csrf_token %}
<p>姓名:<input type="text"></p>
<p>密码:<input type="password"></p>
</form>
<p>
<button class="sub">提交</button><span class="sp"></span>
</p>
button要写在外边,否则会默认以get提交
----------------------------------------------------------------------------------------
这里是js代码:
function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
data: {
username: $(":text").val(),
password: $(":password").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})

方式三:

        function foo() {
$(".sp").html("");
}
$(".sub").click(function () {
$.ajax({
url: "/demo_ajax/",
type: "POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data: {
username: $(":text").val(),
password: $(":password").val()
},
success: function (data) {
var data = JSON.parse(data);
if (!data["flag"]){
$(".sp").html("用户名或密码错误"),
setTimeout(foo,3000)
}
}
})
})

方式三可以在form表单提交,也可以不在form表单中提交:

ajax跨站请求伪造的更多相关文章

  1. 跨站请求伪造 | ajax

    一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...

  2. ajax向Django前后端提交请求和CSRF跨站请求伪造

    1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...

  3. python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  4. (22)Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)

    Ajax的作用 前后端分离的项目,需要交互,就要通过Ajax来完成交互 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即 ...

  5. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  6. Web安全相关(二):跨站请求伪造(CSRF/XSRF)

    简介 CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对 ...

  7. 关于XSS(跨站脚本攻击)和CSRF(跨站请求伪造)

    我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...

  8. xss(跨站脚本攻击),crsf(跨站请求伪造),xssf

    我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...

  9. Django之CSRF 跨站请求伪造

    一.简介 1.点我了解什么是跨站请求伪造 2.django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对 ...

随机推荐

  1. 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理

    § 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 ind ...

  2. sourceTree每次拉取代码和提交代码都需要输入密码

    今天新安装的sourceTree导入项目,拉取代码的时候一直提示让我输入git密码,每次拉取和提交的时候都需要重新输入密码,甚是麻烦,在网上,搜索,解决办法五花八门,这里提供一种简单有效的方法供大家参 ...

  3. C图形库Easyx的使用

    学习Eaxy X图形库后我的成果: 花了一周时间做出并完善了Flappy Bird,目前功能如下: 1. 背景的显示 2. 加入小鸟image 3. 小鸟自由下落,按空格键/鼠标右键后上升 4. 加入 ...

  4. samba 搭建

    #useradd -M -s /sbin/nologin kvmshare #mkdir /home/etl #chown kvmshare:kvmshare /home/etl 将本地账号添加到 s ...

  5. 谈谈对Python的感想

    写在前面 我用Python已经好几年了,最早学习用Python还是因为对人工神经网络感兴趣,python有个很好用的ANN库neurolab.本人其实也算初学者,充其量算入门了吧,写这篇一来回顾自己所 ...

  6. jsp上的九个隐含对象

    首先说一说件jsp的原理.jsp被认为最经典的解释是  “嵌入了java 代码的html”. 在网上查了一些资料,和我本身对jsp的认识,总结如下: jsp本质上是一个servlet,继承自 当第一次 ...

  7. Hadoop版本选择

    刚开始学习Hadoop时就曾经一直抱怨Hadoop的安装部署为什么这么麻烦,对于一个新手需要捯饬一天才能把分布式环境安装配置好.而对于一个自学Hadoop而周围又没人交流的菜鸟来说,我对Hadoop的 ...

  8. ElasticSearch 学习记录之ES如何操作Lucene段

    近实时搜索 提交(Commiting)一个新的段到磁盘需要一个 fsync 来确保段被物理性地写入磁盘,这样在断电的时候就不会丢失数据.但是每次提交的一个新的段都fsync 这样操作代价过大.可以使用 ...

  9. 聚簇(或者叫做聚集,cluster)索引和非聚簇索引

    字典的拼音目录就是聚簇(cluster)索引,笔画目录就是非聚簇索引.这样查询“G到M的汉字”就非常快,而查询“6划到8划的字”则慢. 聚簇索引是一种特殊索引,它使数据按照索引的排序顺序存放表中.聚簇 ...

  10. Linux(CentOS6.5)修改系统市区被中国标准时间(北京时间)

    本文地址http://comexchan.cnblogs.com/ ,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 备份时区配置文件 cp /etc/localtime /etc/l ...