虽然做web开发有一段时间了，但是对于同源策略和csrf安全策略理解一直不深刻，特抽出时间做了简单的实验进行理解。实验过程如下，与大家一起分享。
实验目的：验证同源策略和csrf安全策略的关系和区别
实验方案：1.Linux搭建django框架的python服务器（a）；Windows搭建简单的js服务器（b）
2.b的首页中做了如下内容：（1）通过post\get方式提交向a表单
（2）通过ajax方式（post\get）向a请求数据
实验结果：1.a没有开启csrf安全策略的情况下，打开b的首页，b的页面可以通过post\get方式正常的向a提交表单并得到回复页面；但是通过ajax的get\post方式无法请求到a的数据。观察a的log日志，发现b的request请求在a上能够收到，但是b的request附带的数据均加载不成功，b的ajax（get\post）请求均能得到a的response，在下发到打开b的浏览器时报出了同源策略的警告。
2.a开启csrf安全策略的情况下，打开b的首页，b的页面可以通过get方式正常的向a提交表单并得到回复页面，但是并不能通过post方式提交；b页面通过ajax的get\post方式均无法请求到a的数据。
结论：1.同源策略：js语言的设计安全考虑，只允许同源访问。非同源访问也能向对应服务器发送请求，但是浏览器request中附带的数据全部丢失，服务器能回传request的response。但是在浏览器解析服务器下发的response阶段会有同源策略的警告。（解释基于js的ajax技术）
2.csrf安全策略：搭建服务器时的安全考虑，需要普通开发者进行相关的设计（框架一般自带csrf安全策略的设计）。csrf策略过程为：在请求服务器的页面时，服务器的response会向浏览器设置一个cookie，当有post方式的表单向服务器提交时，服务器设置的cookie会附加在浏览器的request中一起提交，服务器在接收request时，会验证附加的cookie是否正确（每个用户与服务器的通讯连接只有一个唯一的cookie，连接中断后，下次连接时服务器会向浏览器设置新的cookie），只有cookie验证通过才能下发正确的response，验证失败会有“403”错误码下发。
1 # --------------Django服务器部分代码--------------
2 # -*- coding:utf-8 -*-
3 from django.shortcuts import render 4 from django.http import HttpResponse, HttpResponseRedirect, JsonResponse 5
6 # Create your views here.
7
8
9 def index(request): 10
11 context = {'contents': 'hello world'} 12 # return HttpResponse("ok")
13 response= render(request, 'booktest/index.html', context) 14 return response 15
16
17 def args(request, id1, id2): 18
19 string = '%s--%s' % (id1, id2) 20 return HttpResponse(string) 21
22
23 def get1(request): 24
25 mode = request.encoding 26 dict = request.GET 27 a = dict.get('a') 28 b = dict.get('b') 29 c = dict.get('c') 30 string = 'method:%s--%s--%s--%s' % (mode, a, b, c) 31 return HttpResponse(string) 32
33
34 def get2(request): 35
36 dict = request.GET 37 a = dict.getlist('a') 38 b = dict.get('b') 39 c = dict.get('c') 40 d = dict.get('d', 'have no') 41 string = '%s--%s--%s--%s' % (a, b, c, d) 42 return HttpResponse(string) 43
44
45 def post(requst): 46
47 str_data = '---%s---%s' % (requst.method, requst.POST.get('uname')) 48
49 return HttpResponse(str_data) 50
51
52 def get3(request): 53
54 dict = request.GET 55 a = dict.get('a') 56 b = dict.get('b') 57 c = dict.get('c') 58 context = {'1': a, '2': b, '3': c} 59 # return HttpResponse("ok")
60 return HttpResponse(context) 61 # return render(request, 'booktest/get1.html', context)
62
63
64 def get4(request): 65
66 return HttpResponseRedirect('/admin/') 67
68
69 def ajax(request): 70
71 # return HttpResponse('ok')
72 return render(request, 'booktest/ajax.html/') 73
74
75 def json(request): 76
77 data1 = request.POST.get('csrfmiddlewaretoken') 78 data2 = request.POST.get('data') 79 print('------------%s------------%s---' % (data1, data2)) 80 a = {'h1': 'hello', 'h2': 'world', 'method': request.method, 'csrf': data1, 'data': data2} 81
82 return JsonResponse(a) 83
84
85 def cookie_set(request): 86 print('123') 87 cookie_value = 'hello'
88
89 response = HttpResponse("<h1>设置Cookie，请查看响应报文头</h1>") 90 # response = HttpResponse("hello")
91 # Cookie中设置汉字键值对失败
92 response.set_cookie('h1', cookie_value) 93 # return HttpResponse('ok')
94 return response 95
96
97 def cookie_get(request): 98
99 response = HttpResponse('<h1>读取Cookie，数据如下：<br>') 100 cookies = request.COOKIES 101 if cookies.get('h1'): 102 response.write('<h1>'+cookies['h1']+'</h1>') 103
104 return response
1 <--Django服务器template部分的index.html代码-->
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="utf-8">
7 <title>index</title>
8 </head>
9 <body>
10 {# <input type="button" value="返回">#} 11 <a href="/">返回主页</a>
12
13 <hr>
14 <h1>参数</h1>
15 <a href="/get1/?a=1&b=2&c=3">get一键传一值</a>
16 <br>
17 <a href="/get2/?a=1&b=2&c=3&a=5">get一键传多值</a>
18 <br><br>
19 <form method="post" action="/post/">
20
21 {% csrf_token %} 22
23 姓名：<input type="text" name="uname"/><br>
24 密码：<input type="password" name="upwd"/><br>
25 性别：<input type="radio" name="ugender" value="1"/>男 26 <input type="radio" name="ugender" value="0"/>女<br>
27 爱好：<input type="checkbox" name="uhobby" value="胸口碎大石"/>胸口碎大石 28 <input type="checkbox" name="uhobby" value="脚踩电灯炮"/>脚踩电灯炮 29 <input type="checkbox" name="uhobby" value="口吐火"/>口吐火<br>
30 <input type="submit" value="提交"/>
31 </form>
32
33 <hr>
34 <h1>GET属性</h1>
35 <a href="/get3/?a=1&b=2&c=3">一键传一值</a>
36 <br>
37 <a href="/get4/?a=1&b=2&c=3&a=5">一键传多值</a>
38
39 <hr>
40 <h1>JsonResponse</h1>
41 <a href="/ajax/">ajax</a>
42
43 <hr>
44 <h1>Cookie</h1>
45 <a href="/cookie_set/">设置Cookie</a>
46 <br>
47 <a href="/get_Cookie/">获取Cookie</a>
48 </body>
49 </html>
1 <--Django服务器ajax.html代码-->
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <title>ajax</title>
8
9 <script src="/static/js/jquery-1.12.4.min.js"></script>
10 <script>
11 $(function () { 12 data1 = $('input[name="csrfmiddlewaretoken"]').prop('value'); 13 $('#btnjson').click(function () { 14 $.post('/json/', {'csrfmiddlewaretoken':data1,'data':'Hi Hellow'}, function (data) { 15 ul = $('#jsonlist'); 16 ul.append('<li>' + data['h1'] + '</li>'); 17 ul.append('<li>' + data['h2'] + '</li>'); 18 ul.append('<li>' + data['method'] + '</li>'); 19 ul.append('<li>' + data['csrf'] + '</li>'); 20 ul.append('<li>' + data['data'] + '</li>'); 21 }) 22 }); 23 }) 24 </script>
25 </head>
26 <body>
27 <div>hello world!</div>
28 {% csrf_token %} 29 <input type="button" id="btnjson" value="获取json数据">
30 <ul id="jsonlist"></ul>
31 </body>
32 </html>
1 <--JS搭建的服务器首页代码-->
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="utf-8">
7 <title>index</title>
8
9
10 <script src="/js/jquery-1.12.4.min.js"></script>
11 <script>
12 $(function () { 13 data1 = $('input[name="csrfmiddlewaretoken"]').prop('value'); 14 $('#btnjson').click(function () { 15 $.get('http://192.168.27.128:8000/json/', {'csrfmiddlewaretoken':data1,'data':'HiHellow'}, function (data) { 16 ul = $('#jsonlist'); 17 ul.append('<li>' + data['h1'] + '</li>'); 18 ul.append('<li>' + data['h2'] + '</li>'); 19 ul.append('<li>' + data['method'] + '</li>'); 20 ul.append('<li>' + data['csrf'] + '</li>'); 21 ul.append('<li>' + data['data'] + '</li>'); 22 }) 23 }); 24 }) 25 </script>
26
27
28 </head>
29 <body>
30 {# <input type="button" value="返回">#} 31 <a href="/">返回主页</a>
32
33 <hr>
34 <h1>参数</h1>
35 <a href="/get1/?a=1&b=2&c=3">get一键传一值</a>
36 <br>
37 <a href="/get2/?a=1&b=2&c=3&a=5">get一键传多值</a>
38 <br><br>
39 <form method="post" action="http://192.168.27.128:8000/post/">
40
41 {% csrf_token %} 42
43 姓名：<input type="text" name="uname"/><br>
44 密码：<input type="password" name="upwd"/><br>
45 性别：<input type="radio" name="ugender" value="1"/>男 46 <input type="radio" name="ugender" value="0"/>女<br>
47 爱好：<input type="checkbox" name="uhobby" value="胸口碎大石"/>胸口碎大石 48 <input type="checkbox" name="uhobby" value="脚踩电灯炮"/>脚踩电灯炮 49 <input type="checkbox" name="uhobby" value="口吐火"/>口吐火<br>
50 <input type="submit" value="提交"/>
51 </form>
52
53 <hr>
54 <h1>GET属性</h1>
55 <a href="/get3/?a=1&b=2&c=3">一键传一值</a>
56 <br>
57 <a href="/get4/?a=1&b=2&c=3&a=5">一键传多值</a>
58
59 <hr>
60 <h1>JsonResponse</h1>
61 <a href="/ajax/">ajax</a>
62
63 <hr>
64 <h1>Cookie</h1>
65 <a href="/cookie_set/">设置Cookie</a>
66 <br>
67 <a href="/get_Cookie/">获取Cookie</a>
68
69 <hr>
70 <div>hello world!</div>
71 {% csrf_token %} 72 <input type="button" id="btnjson" value="获取json数据">
73 <ul id="jsonlist"></ul>
74 </body>
75 </html>