原文網址:http://www.cnblogs.com/retop/p/4677148.html註：本人使用的Django1.8.3版本進行測試除了使用Django內置表單，有時往往我們需要自定義表單。對於自定義表單Post方式提交往往會帶來由CSRF(跨站請求偽造)產生的錯誤"CSRF verif...
原文網址:http://www.cnblogs.com/retop/p/4677148.html
註：本人使用的Django1.8.3版本進行測試
除了使用Django內置表單，有時往往我們需要自定義表單。對於自定義表單Post方式提交往往會帶來由CSRF(跨站請求偽造)產生的錯誤"CSRF verification failed. Request aborted."
本篇博客只要針對"表單提交"和"Ajax提交"兩種方式來解決CSRF帶來的錯誤
一、表單提交
Template：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算數字和</title>
</head>
<body>
<form method="post" action="{%url 'Calculate' %}">
{% csrf_token %}
<label for="A"><input id="A" name="ValueA" type="text"></label>
<label for="B"><input id="B" name="ValueB" type="text"></label>
<input type="submit" value="開始計算">
</form>
</body>
</html>
|
Views.py:
?| 1 2 3 4 5 6 7 8 |
def Calculate(request):
if request.POST:
a=request.POST["ValueA"]
b=request.POST["ValueB"]
c=str(int(a)+int(b))
return render_to_response('Result.html',{'result':c})
else:
return render_to_response('Calculation.html',context_instance=RequestContext(request))
|
需要註意：
(1)在<form>標簽內添加{% csrf_token %},這樣在表單提交的過程中，會產生"csrfmiddlewaretoken"標識去防止CSRF
(2)在Get請求頁面時，需要添加context_instance=RequestContext(request) ,它和{% csrf_token %}配合使用，缺少一個都會出現上述錯誤,RequestContext 需要在 django.shortcuts 導入
(3)只有當表單以Post方式提交時，才需要驗證CSRF，Get方式是不需要的
二、Ajax提交
同比與表單提交，Ajax提交需要進行額外的操作，Ajax提交時需要自己提供"csrfmiddlewaretoken"標識參數。我們除了需要引入JQuery外還需要引入一段JS代碼
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
|
Template：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 提交</title>
<script type="text/javascript" src="/static/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
</script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({
data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
});
$("#Comment").click(function(){
$.post('{% url 'AjaxRequest' %}',{"a":$("#A").val(),"b":$("#B").val()},function(data){
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label for="A"><input id="A" name="ValueA" type="text"></label>
<label for="B"><input id="B" name="ValueB" type="text"></label>
<input type="button" id="Comment" value="開始計算">
<h1>計算的結果為：<span id="result"></span></h1>
</body>
</html>
|
View.py：
?| 1 2 3 4 5 6 7 8 |
def AjaxRequest(request):
if request.POST:
a =request.POST["a"]
b=request.POST["b"]
c=int(a)+int(b)
return JsonResponse(c,safe=False)
else:
return render_to_response('AjaxDemo.html',context_instance=RequestContext(request))
|
需要註意：
(1)在使用引入的JS代碼後，需要添加如下代碼，這樣JS就可以自動幫我們生成"csrfmiddlewaretoken"標識,接下來你就可以使用$.post()了
?| 1 2 3 |
$.ajaxSetup({
data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
});
|
(2)context_instance=RequestContext(request) 並不是必須的
(3)Get請求不需要以上操作，直接使用$.get()即可
總結：本人學習Django的時間不長，寫博客的目的只要是為了自己做知識記錄和對知識的分享，如果哪裡寫的不好，還請廣大博友指點，多多包涵。
