摘要：攻擊實驗攻擊涉及用戶受害者受信任的網站和惡意網站。攻擊包括一系列步驟，如下受害者用戶使用他她的用戶名和密碼登錄到可信站點從而創建一個新的會話。瀏覽器將自動連接會話，因為它是惡意的要求針對可信站點。

CSRF攻擊涉及用戶受害者,受信任的網站和惡意網站。當受害者與受信任的站點擁有一個活躍的會話同時，如果訪問惡意網站，惡意網站會注入一個HTTP請求到為受信任的站點，從而破話用戶的信息。

CSRF 攻擊總是涉及到三個角色:信賴的網站（Collabtive）、受害者的 session 或 cookie 以及一個惡意網站。受害者會同時訪問惡意網站與受信任的站點會話的時候。攻擊包括一系列步驟，如下:

受害者用戶使用他/她的用戶名和密碼登錄到可信站點,從而創建一個新的會話。

受信任站點存儲受害者會話的 cookie 或 session 在受害者用戶的 web 瀏覽器端。

受害者用戶在不退出信任網站時就去訪問惡意網站。

惡意網站的網頁發送一個請求到受害者的受信任的站點用戶的瀏覽器。

web 瀏覽器將自動連接會話 cookie，因為它是惡意的要求針對可信站點。

受信任的站點如果受到 CSRF 攻擊，攻擊者的一些惡意的請求會被攻擊者發送給信任站點。

惡意網站可以建立HTTP GET或POST請求到受信任的站點。一些HTML標簽,比如img iframe,框架,形式沒有限制的URL,可以在他們的使用屬性中。

我使用的是koa框架作為后端框架搭建的服務器，順便也算是學習一下koa框架，之前沒有學過，由于是初學，搭建過程有點漫長

話不多說上代碼：

  // app.js
  const Koa = require("koa");
  const app = new Koa();
  const server = require("koa-static");
  const router = require("koa-router")();
  const PouchDB = require("pouchdb");
  const db = new PouchDB("http://localhost:5984/csrf");

  app.use(async (ctx, next) => {
      console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
      await next();
  });

  // add url-route:
  router.post("/login", async (ctx, next) => {
    let postData = await parsePostData( ctx );
    try {
      let response = await db.get(`id_${postData.name}`);
      let exp = new Date();
      ctx.cookies.set(
        "id", 
        `id_${postData.name}`,
        {
          domain: "localhost",  // 寫cookie所在的域名
          path: "/userInfo.html",       // 寫cookie所在的路徑
          maxAge: 24*60*60*1000, // cookie有效時長
          expires: exp.setTime(exp.getTime() + 24*60*60*1000),  // cookie失效時間
          httpOnly: false,  // 是否只用于http請求中獲取
          overwrite: false  // 是否允許重寫
        }
      )
      if(response.password === postData.password) ctx.redirect("userInfo.html")
    } catch (err) {
      ctx.body = "
登錄失敗，點擊這里返回
";
    }
  });

  router.post("/regist", async (ctx, next) => {
    let postData = await parsePostData( ctx );
    
    postData._id = `id_${postData.name}`;
    try {
      let response = await db.put(postData);
      ctx.body = "
注冊成功，點擊這里返回至登錄界面
";
    } catch (err) {
      ctx.body = "
用戶名已存在，點擊這里返回
";
    }
  });


  router.post("/getUserInfo", async (ctx, next) => {
    let postData = await parsePostDataFromAjax( ctx );
    let _id = {};
    _id[postData.split(":")[0]] = postData.split(":")[1];
    try {
      let doc = await db.get(_id.id);
      ctx.body = doc;
    } catch (err) {
      ctx.body = "發生錯誤";
    }
  });

  router.post("/change", async (ctx, next) => {
    let postData = await parsePostData( ctx );
    console.log(postData);
    try {
      let doc = await db.get(postData.id);
      let response = await db.put({
        _id: doc._id,
        _rev: doc._rev,
        name: postData.name,
        password: doc.password,
        sex: postData.sex,
        desc: postData.desc
      });
      ctx.body = "
修改成功，點擊這里返回至登錄界面
";
    } catch (err) {
      console.log(err);
    }
  });

  app.use(router.routes());
  app.use(server(__dirname + "/"));
  app.listen(3001);
  /**
  * 
  * 對于POST請求的處理，koa2沒有封裝獲取參數的方法，
  * 需要通過解析上下文context中的原生node.js請求
  * 對象req，將POST表單數據解析成query string（例
  * 如：a=1&b=2&c=3），再將query string 解析成
  * JSON格式（例如：{"a":"1", "b":"2", "c":"3"}）
  */
  // 解析上下文里node原生請求的POST參數，這個是處理表單form傳入參數
  function parsePostData( ctx ) {
    return new Promise((resolve, reject) => {
      try {
        let postdata = "";
        ctx.req.addListener("data", (data) => {
          postdata += data
        })
        ctx.req.addListener("end",function(){
          let parseData = parseQueryStr( postdata )
          
          resolve( parseData )
        })
      } catch ( err ) {
        reject(err)
      }
    })
  }
  // 解析上下文里node原生請求的POST參數，這個是處理Ajax傳入參數
  function parsePostDataFromAjax( ctx ) {
    return new Promise((resolve, reject) => {
      try {
        let postdata = "";
        ctx.req.addListener("data", (data) => {
          postdata += data
        })
        ctx.req.addListener("end",function(){
        resolve( postdata )
        })
      } catch ( err ) {
        reject(err)
      }
    })
  }

  // 將POST請求參數字符串解析成JSON
  function parseQueryStr( queryStr ) {
    let queryData = {}
    let queryStrList = queryStr.split("&");
    for (  let [ index, queryStr ] of queryStrList.entries()  ) {
      let itemList = queryStr.split("=")
      queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
    }
    return queryData
  }

就這一個文件，里面包含了很多東西

koa-static是koa的一個中間件，用于獲取靜態文件的

koa-router是koa的一個中間件，用于路由系統

pouchDB是我使用的couchDB的配套使用的框架

我使用的是couchDB數據庫，具體怎么使用看這里，用法很簡單，他的界面是一個網頁

前端頁面總共有三個，分別是index.html,regist.html,userInfo.html，其作用分別是登錄，注冊，展示/修改用戶信息，我這里沒有使用css樣式。。。有點丑

  
  
  
    
    
    
    
  
  
    
登錄
    

      姓名：
      密碼：
    
    登錄
    注冊
  
  
  

  
  
  
    
    
    
    
  
  
    
注冊
    

      姓名：

      密碼：

      性別：男女

      描述：
    
    注冊
    登錄
  
  
  

這個頁面我使用了ajax，所以引入了jQuery

  
  
  
    
    
    
    
    
  
  
    

      
用戶信息
      
姓名：
      
性別：
      
描述：
      
修改信息
      

        
        姓名：

        性別：男女

        描述：
      
      修改
    
  
  
  

最后放上package.json

  {
    "name": "csrf",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
      "start": "node app.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "koa": "^2.2.0",
      "koa-router": "^7.2.1",
      "koa-static": "^3.0.0",
      "pouchdb": "^6.2.0"
    }
  }

命令行執行

  npm install 
  npm start

終于到了關鍵，其實也就那么一剎那，很快我們的步驟如下：

首先我注冊了一個賬戶，然后我登錄這個賬戶查看信息，以及他的cookie參數，在圖中我們發現cookie里面有一個重要信息是ID，這個就是當前用戶的ID

接下來我通過瀏覽器開發者工具查看表單數據以及請求的url以方便我構造假請求

編寫csrf_hack.html

  
    
    
      
      
      
      
    
    
      
這是一個攻擊頁面
    
    
    
```
4. 然后在啟動一個服務，將剛才編寫的csrf_hack.html頁面放進去，然后訪問這個頁面（這里我偷懶，直接把剛才的端口修改了一個，然后另開一個控制臺啟動服務，然后訪問），接下來再次登錄剛才的賬號，發現剛才寫在csrf_hack.html頁面的信息更替上去了

注意事項
1. 如果要使用async,await這兩個node版本需要在7以上