ajax跨站请求伪造
用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跨站请求伪造的更多相关文章
- 跨站请求伪造 | ajax
一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...
- ajax向Django前后端提交请求和CSRF跨站请求伪造
1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...
- python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)
一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...
- （22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)
Ajax的作用 前后端分离的项目,需要交互,就要通过Ajax来完成交互 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即 ...
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- Web安全相关（二）：跨站请求伪造（CSRF/XSRF）
简介 CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对 ...
- 关于XSS（跨站脚本攻击）和CSRF（跨站请求伪造）
我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...
- xss(跨站脚本攻击)，crsf(跨站请求伪造)，xssf
我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...
- Django之CSRF 跨站请求伪造
一.简介 1.点我了解什么是跨站请求伪造 2.django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对 ...
随机推荐
- 【python】字符串、列表、元组间相互转化及函数len、max、min、sum、sorted、reversed、enumerate、zip用法示例
- 转：iOS开发之多种Cell高度自适应实现方案的UI流畅度分析
本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...
- java.lang基础数据类型boolean、char、byte、short、int、long、float、double (JDK1.8)
java.lang.Boolean public static int hashCode(boolean value) { return value ? 1231 : 1237; } JDK 1.8新 ...
- XE10 clientDataset 访问 DataSnap 服务端报错问题，锲而不舍找方法，终于解决了
1. 开发环境说明:win 10 下安装了XE10.2和Delphi7 2.按照网上datasnap 三层与使用xe10 自带的samples 的例子,访问数据库都要报莫名的地址错误,这个太不人性化: ...
- ABP .Net Core Entity Framework迁移使用MySql数据库
一.迁移说明 ABP模板项目Entity Framework Core默认使用的是Sql Server,也很容易将数据库迁移到MySQL,步骤如下. 二.迁移MySQL步骤 1. 下载项目 请到 ht ...
- 关于博客中引用多媒体出现的bug说明
插件说明 Aplayer.Dplayer @DIYgod 大佬在gihub的开源项目,对此,表示非常之感谢!! Aplayer 支持放在页首 支持放在页尾 但是不支持直接放在文章中引用 解决方法: 1 ...
- 'boost/iterator/iterator_adaptor.hpp' file not found之xcode生成时报错的解决方案
xcode生成rn(0.49.3)项目的时候出现“'boost/iterator/iterator_adaptor.hpp' file not found之xcode”报错. 原因: /Users/x ...
- react native仿微信性别选择-自定义弹出框
简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...
- wait/notify 实现多线程交叉备份
一.任务 创建20个线程,其中10个线程是将数据备份到 A 数据库中,另外10 个线程将数据备份到 B 数据库中,并且备份 A 数据库和 备份 B 数据库的是交叉运行的. 二.实现 1.实现备份 A ...
- COM_第四讲_保存GUID_优化使用代码
优化以前的代码,让使用者更方便 一丶 优化思路 1.我们可以将我们写的GUID(类工厂的ID)保存到注册表中,并且保存一下DLL的文件路径,遍历注册表去DLL路径即可. 2.每个类工厂我们就要使用一个 ...