CSRF跨站请求伪造
程序员文章站
2024-02-18 16:54:11
...
示例1:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>批量主机管理系统</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*由于使用的栅格系统,实际上wrap包裹层设置居中的效果没有得到很好的体现*/
.wrap {
margin: 0 auto;
}
</style>
<link rel="stylesheet" href="{% static "css/MyCSS/index.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<script src="{% static "js/jquery-1.11.3.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
</head>
<body style="background: #708090;">
{#我通过style样式设置距离上面的高度#}
<div class="wrap" style="margin-top: 5%">
<div class="container">
{% csrf_token %}
<div class="row">
<div class="col-md-offset-4 col-md-4 divhead">
<h3 class="text-center" id="title">批量主机管理系统</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-4 col-md-4 content">
<!--input-group方便加入前缀图标-->
<div class="mpadding input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" log="loglabel" name="username" placeholder="用户名" autofocus>
</div>
<div class="mpadding input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" log="loglabel" name="password" placeholder="密 码">
</div>
<!-- btn-block使控件填满父窗体 -->
<input type="button" class="mpadding btn btn-primary btn-block" value="登录">
<p class="small text-right" style="margin-top: 10px;">忘记密码?请联系制作团队</p>
</div>
</div>
</div>
</div>
</body>
<script>
$("input[log=loglabel]").focusin(function () {
$("div[name=error]").remove()
})
$("input[type=button]").on("click", function () {
var username = $("input[name=username]").val()
var password = $("input[name=password]").val()
{# 手动获取csrf隐藏的字符串数值 #}
var csrf_value = $("input[name=csrfmiddlewaretoken]").val()
$.ajax({
url: '/login/',
type: 'POST',
data: {'username': username, 'pwd': password,'csrfmiddlewaretoken':csrf_value},
{# 回调函数对返回的结果进行处理 #}
success: function (arg) {
var data_dict = JSON.parse(arg)
if (data_dict.status) {
window.open('/index/',"_self")
}
else {
tagname = $("input[value=登录]").next()[0].tagName
if (tagname != "DIV") {
var tag = document.createElement("div")
tag.innerText = "用户名或者密码有误"
tag.setAttribute("name", "error")
tag.classList.add("text-center")
tag.style.color = "red"
{# 登陆标签后面加入这个新标签#}
$("input[value=登录]").after(tag)
}
}
}
})
})
</script>
</html>
{% csrf_token %}的含义是生成一个隐藏的input 标签,并且这个标签还有值。
如有下面这样写:
<div class="wrap" style="margin-top: 5%">
<div class="container">
{# {% csrf_token %}#}
{{ csrf_token }}
<div class="row">
<div class="col-md-offset-4 col-md-4 divhead">
<h3 class="text-center" id="title">批量主机管理系统</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-4 col-md-4 content">
<!--input-group方便加入前缀图标-->
<div class="mpadding input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" log="loglabel" name="username" placeholder="用户名" autofocus>
</div>
<div class="mpadding input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" log="loglabel" name="password" placeholder="密 码">
</div>
<!-- btn-block使控件填满父窗体 -->
<input type="button" class="mpadding btn btn-primary btn-block" value="登录">
<p class="small text-right" style="margin-top: 10px;">忘记密码?请联系制作团队</p>
</div>
</div>
</div>
</div>
结果:
所以我们也可以这样写:
<script>
$("input[log=loglabel]").focusin(function () {
$("div[name=error]").remove()
})
$("input[type=button]").on("click", function () {
var username = $("input[name=username]").val()
var password = $("input[name=password]").val()
{# 手动获取csrf隐藏的字符串数值 #}
{# var csrf_value = $("input[name=csrfmiddlewaretoken]").val()#}
$.ajax({
url: '/login/',
type: 'POST',
data: {'username': username, 'pwd': password,'csrfmiddlewaretoken':"{{ csrf_token }}"},
{# 回调函数对返回的结果进行处理 #}
success: function (arg) {
var data_dict = JSON.parse(arg)
if (data_dict.status) {
window.open('/index/',"_self")
}
else {
tagname = $("input[value=登录]").next()[0].tagName
if (tagname != "DIV") {
var tag = document.createElement("div")
tag.innerText = "用户名或者密码有误"
tag.setAttribute("name", "error")
tag.classList.add("text-center")
tag.style.color = "red"
{# 登陆标签后面加入这个新标签#}
$("input[value=登录]").after(tag)
}
}
}
})
})
</script>
注意:只要是字符串,在js当中一定要加双引号。
注意:只有写在html里面的,就都可以渲染模板语言,包括js代码。
静态文件是不走视图函数的,不会被渲染。
总结:
Ajax提交:
基于请求体:
function ajaxSubmit() {
$.ajax({
url: "/icbc.html",
type: 'POST',
data: {'k1':'v1','k2':'v2','csrfmiddlewaretoken':$('input[name="csrfmiddlewaretoken"]').val() },
success:function (arg) {
console.log(arg)
}
})
}
// 只能写在模板中
function ajaxSubmit() {
$.ajax({
url: "/icbc.html",
type: 'POST',
data: {'k1':'v1','k2':'v2','csrfmiddlewaretoken':"{{ csrf_token }}" },
success:function (arg) {
console.log(arg)
}
})
}
function ajaxSubmit() {
$.ajax({
url: "/icbc.html",
type: 'POST',
data: $('#f1').serialize(),
success:function (arg) {
console.log(arg)
}
})
}
// 以上都是放在请求体中
基于请求头:
a. 在cookie中获取csrftoken对应的值 l2kEqQLhR1gH0hh3ioZ1dfxT3iSwjXoKTf7GNFggJZ7E6DROB6k33L7vdqe5lV1v
b. 发送请求时,放在请求头中也可以
function ajaxSubmit() {
$.ajax({
url: "/icbc.html",
type: 'POST',
data: {'k1':'v1','k2':'v2'},
headers: {"X-CSRFToken": $.cookie('csrftoken')},
success:function (arg) {
console.log(arg)
}
})
}
即只要是post请求,先检查一下我之前给你发过 的token,如果没有,就报403错误,403错误就是csrfToken的错误。
后来在编写过程中发现,我们只需要将前端界面的csrf_token参数发过去即可。
例如:
如果通过Ajax发送数据:
上一篇: 跨域及其解决方案
下一篇: 跨域问题及其解决方案