저는 한동안 웹 개발을 해왔지만 동일 출처 정책과 CSRF 보안 정책에 대해 깊은 이해를 해본 적이 없어서 이해하기 위해 간단한 실험을 해보는 시간을 가졌습니다. 실험 과정은 다음과 같으니, 모두와 공유해 보세요.
실험 목적: 동일 원본 정책과 csrf 보안 정책 간의 관계 및 차이점을 확인합니다.
실험 계획: 1. Linux는 django 프레임워크의 Python 서버를 구축합니다. (a); 간단한 js 서버를 구축합니다. (b) 的 的 2.B의 홈페이지는 다음과 같이 구성됩니다. (1) A 양식으로 제출합니다. (2) Postget 메소드를 통해 (2) Ajax 메소드(postget)에서 데이터를 요구합니다. CSRF 보안 정책을 활성화하지 않으면 b의 홈페이지를 엽니다. b의 페이지는 정상적으로 postget을 통해 a에 양식을 제출하고 응답 페이지를 얻을 수 있지만 ajax의 getpost 메소드를 통해 a의 데이터를 요청할 수 없습니다. a의 로그를 관찰해보면, b의 요청은 a에서 수신할 수 있지만 b의 요청에 첨부된 데이터는 성공적으로 로드되지 않은 것으로 나타났습니다. b의 ajax(getpost) 요청은 a의 응답을 얻을 수 있으며, b. 브라우저에 동일 출처 정책 경고가 표시됩니다.
2. A가 csrf 보안 정책을 열면 b의 홈페이지를 엽니다. b의 페이지는 일반적으로 get 메소드를 통해 a에 양식을 제출하고 응답 페이지를 얻을 수 있지만 post 메소드를 통해서는 제출할 수 없습니다. b의 페이지는 ajax를 통해 제출될 수 있습니다. getpost 메소드는 a의 데이터를 요청할 수 없습니다.
결론: 1. 동일 출처 정책: js 언어는 보안을 고려하여 설계되었으며 동일 출처 액세스만 허용합니다. 원본이 아닌 액세스도 해당 서버에 요청을 보낼 수 있지만 브라우저 요청에 첨부된 모든 데이터는 손실되며 서버는 요청에 대한 응답을 반환할 수 있습니다. 그러나 서버에서 발행한 응답을 브라우저가 구문 분석하는 응답 단계 중에 동일 출처 정책 경고가 표시됩니다. (js 기반 ajax 기술 설명)
2. csrf 보안 정책: 서버를 구축할 때 보안을 고려하여 일반 개발자는 관련 설계를 해야 합니다(프레임워크는 일반적으로 csrf 보안 정책 설계와 함께 제공됩니다). csrf 정책 프로세스는 다음과 같습니다. 서버 페이지를 요청할 때 서버의 응답은 브라우저에 쿠키를 설정합니다. 게시물 양식이 서버에 제출되면 서버에서 설정한 쿠키가 브라우저의 요청에 추가되어 함께 제출됩니다. 요청을 받으면 첨부된 쿠키가 올바른지 확인합니다. (각 사용자와 서버의 통신 연결에는 하나의 고유한 쿠키만 있습니다. 연결이 중단된 후 서버는 다음 연결 시 브라우저에 새 쿠키를 설정합니다. 쿠키 확인이 통과되어야만 올바른 응답을 받을 수 있습니다. 확인에 실패하면 "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.COOKIES101 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?1.1.11"></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?1.1.11"></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>위 내용은 동일 출처 정책 및 CSRF 보안 정책에 대한 지식 포인트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
