1 阻斷服務攻擊（DOS）

• 阻斷服務攻擊，想辦法目標網絡資源用盡
• 變種：分布式阻斷服務攻擊

影響：

1. 寬帶消耗性（消耗目標的帶寬）
2. 資源消耗型（消耗目標的計算資源）

解決方案：

1. 防火墻
2. 交換機（路由器）
3. 流量清洗

1.2 跨站腳本攻擊（xss）

• 原理：將跨站腳本注入到被攻擊的網頁上，用戶打開網頁會執行跨站腳本。

解決方案： 1. 輸入過濾（轉義） 2. 輸出過濾（轉義）

1.3 SQL注入

‘;update user set money=99999 where id=10025’

select *from user where user_name=';update user set money=99999 where id=10025'

解決方案： 輸入過濾（轉義） 數據庫安全策略

1.4 跨站請求偽造（csrf）

假如你剛登錄銀行網站不久，cookie還沒過期，黑客利用小廣告之類讓你點擊，然后請求在程序中請求轉賬接口

解決方案：

1. 驗證referer字段
2. 在請求地址添加token并驗證

1.5 HTTPS 中間人攻擊

黑客在電腦上安裝偽造的證書，攔截客戶端的請求

2 同源策略

2.1 定義

• 禁止一個源（origin）的腳本&文檔和另一個源的腳本&文檔交互
  • 兩個URL的protocol，port和host相同，那么同源
  • 思考：如果兩個源產生過多交換有什么問題？

  • 思考：

  • 為什么不禁用不同源的js？

  • 因為有時候需要把js放到cdn上，那么可能就不同源了，所以行不通。

  • 應不應該允許不同源的js修改dom？

  • 允許

  • 應不應該允許網站提交數據到不同源的的服務器？

  • 不允許

  • 應不應該允許網站提交cookie到不同源的服務器？

  • 不允許

    2.2 跨域的N種方法

    1.JSONP

  • 利用不限制跨越腳本執行的特點

  •  // 服務端數據（data.js）jsonp("example",{a:1,b:2})// index.htmlfunction jsonp () {console.log(topic,data)}// 加載跨域數據腳本var script = document.createElement('script')script.setAttribute('src','data.js')document.getElementdByTagName('head')[0].appendChild(script)
    

    思考

  • jsonp可以用來提交數據嗎？

  • 可以在url上，但只能get請求；服務端可以通過判斷返回不同的腳本

  • 嘗試為fetch函數擴展jsonp功能

  • fetch(<jsonp-url>,{method: 'jsonp'}).then(data=>{console.log(data)})
    

    2. 跨域資源共用?重要

  • 跨域資源共用（Cross-Origin Resource Sharing）使用額外HTTP頭允許指定的源和另一個源進行交互 服務端設置 Access-control-Allow-Origin:https://a.com
  • get、post我們稱之為簡單請求，簡單請求在同源策略中會簡單的處理,如果b.com返回了這個頭Access-control-Allow-Origin:https://a.com，那么我們認為 這個請求是可以通過的。

  • 預檢

    但是還有復雜一點的請求，我們需要先發OPTIONS請求，a.com想請求b.com它需要發一個自定義的Headers：X-ABC和content-type，這個時候就不是簡單請求了， a.com要給b.com 發一個options請求，它其實在問b.com我用post行不行，還想在Headers中帶X-ABC和content-type；并不是所有的headers都發這個OPTIONS請求，因為X-ABC是自定義的，所以需要發；b.com看到OPTIONS請求，先不會返回數據，先檢查自己的策略，看看能不能支持這次請求，如果支持就返回200。

    OPTIONS請求返回以下報文

    HTTP/2.0 20 OK
    Access-Control-Allow-Origin:https://a.com
    Access-Control-Allow-Methods:POST,GET,OPTIONS
    Access-Control-Allow-Headers:X-ABC,Content-TypeAccess-Control-Max-Age:86400 // 告訴瀏覽器這個策略生效時間為一個小時，在一個小時之內發送類似的請求，不用在問服務端了，相當于緩存了
    

    瀏覽器收到了OPTIONS的返回，會在發一次，這一次才是真正的請求數據，這次headers會帶上X-ABC、contentType。

    整體的過程cors將請求分為2種，簡單請求和復雜請求，需不需要發送OPTIONS瀏覽器說的算，瀏覽器判斷是簡單請求還是復雜請求，cors是非常廣泛的跨域手段 這里的缺點是OPTIONS請求也是一次請求，消耗帶寬，真正的請求也會延遲。

    3.反向代理?重要

  • 因為跨越是瀏覽器的限制，所以可以用同源的服務器去代理請求，代理服務使鏈路變的更長。

    3 實戰-CORS（fetch+node.js）

  • 觀察node.js在服務端的實現CORS跨域
  • 觀察瀏覽器器fetch的使用方法
  • 觀察OPTIONS預檢請求

  • 項目地址：/examples/computerNetwork/3.2

  • 用express起2個服務

  • const express = require('express');
    const app1 = express();app1.get('/',function(req,res){res.send('hello')
    })app1.listen(3000)const app2 = express()
    app2.get('/api',function(req,res){res.send('go')
    })app2.post('/api',function(req,res){res.send('go')
    })
    app2.listen(3001)
    

    啟動node服務 nodeman cors.js

  • 用whislte做代理

  •     npm i whistle -g # 下載，mac電腦：sudo npm i whistle -g whistle start # 啟動http://localhost:8899/ # 瀏覽器查看SwitchOmega # 谷歌代理插件，可以配置127.0.0.1:8899的服務上
    

    配置whislte進行代理的域名

  • 谷歌代理插件SwitchOmega，配置代理服務器127.0.0.1:8899的服務