DjangoはCSRFでアヤックスと3つの方法の認証を使用しています
AJAX機能
- パーシャルリフレッシュ
- 非同期リクエスト
ジャンゴは、AJAXで書かれています
AJAXはjQueryのは、最初に導入、AJAXを使用するために、jQueryの中に封入されています。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>登录页面</h1>
{#<form action="" method="post">#}
{# {% csrf_token %}#}
{# 用户名: <input type="text" name="username">#}
{# 密码: <input type="text" name="password">#}
{# <input type="submit">#}
{#</form>#}
{% csrf_token %}
<hr>
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>
<span id="error" style="color:red;font-size: 12px;"></span>
</body>
<!-- jQuery中封装了ajax -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
{#<script src="{% static 'js/xx.js' %}"></script>#}
<script>
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '{% url "login" %}', // 请求路径
type: 'post', // 请求方法
// 请求数据,不需要携带数据的请求，不需要写data参数
data: {'uname': uname, 'pwd': pwd, 'csrfmiddlewaretoken': csrf_token},
success: function (res) {
console.log('>>>>', res); // res参数拿到的是响应数据
if (res !== 'ok') {
$('#error').text('用户名或者密码有误!')
}else {
location.href='/home/';
}
}
})
})
</script>
</html>CSRFプロフィール
CSRF（クロスサイトリクエストフォージェリ）、中国名：クロスサイトリクエストフォージェリは、とも呼ばれる：ワンクリック攻撃/セッション乗馬、略し：CSRF / XSRF。答えはクッキーを盗むためにして、HTTPサーバへのリクエストデータを介して、江の攻撃。答えはクッキーを盗むためにした後、攻撃者はユーザーのみについての情報を得ることができない、あなたはまた、クッキーに関連付けられたアカウント情報を変更することができます。
だからCSRF攻撃に対する最も簡単な解決策は、完全な検証を超える値を持つすべての要求をユーザーのページに保存されているランダムcsrftoken値を生成することです。
csrf_tokenによって認定アヤックス
1つの方法は、inputタグを介して取得します
値の取得CSRFトークンにテンプレートをレンダリングした後、CSRFラベル生成を見つけることによって、入力ロジックの後。
HMTLコード
AJAXは、formタグでラベル入力をラップする必要はありません、直接データを提出することができます。
{% csrf_token %}
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>JSコード
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
// 获取到{% csrf_token %}这个模板渲染语法渲染之后的input标签对应的值
var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '{% url "login" %}', // 127.0.0.1:8000/login/
type: 'post',
// 给post请求提交的数据中添加上csrf_token认证所需要的键值对
data: {'uname': uname, 'pwd': pwd, 'csrfmiddlewaretoken': csrf_token},
success:function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用户名或者密码有误!')
}else {
location.href='/home/';
}
}
})
})直接アクセスをレンダリングモード2のテンプレート
直接書き込まれたデータのキーと値のペアの値csrf_token認証データ部
{{ csrf_token }}テンプレートのレンダリング後は、入力値ラベルの直接的な値です。
htmlコード
同様に、ラップformタグで入力タグへの必要性がありません。
用户名: <input type="text" id="uname">
密码: <input type="password" id="pwd">
<button id="sub">提交</button>JSコード
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
$.ajax({
url: '{% url "login" %}', // 127.0.0.1:8000/login/
type: 'post',
// 需要注意的是：经过模板渲染后的内容是不会带引号的，需要我们手动给csrf_token加引号，表示这是一个字符串，否则将会按照变量来解析，从而出错
data: {'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},
success: function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用户名或者密码有误!')
}else {
location.href='/home/';
}
}
})
})クッキーにより得られたモード3
ノーjQueryのコードクッキー包装作業は、我々が最初に導入する必要があります。
<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'jquery.cookie.js' %}"></script>
<script>
$('#btn').click(function () {
var uname = $('[type="text"]').val();
var pwd = $('[type="password"]').val();
// var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '/login/',
type: 'post',
// data:{uname:uname,pwd:pwd,csrfmiddlewaretoken:csrf_token},
headers: {'X-CSRFToken': $.cookie('csrftoken')}, // 获取cookie中的csrftoken，将其设置为ajax的请求头
data: {uname: uname, pwd: pwd},
success: function (res) {
console.log(res);
}
})
})
</script>