安全簡史
Web1.0 服務端動態指令碼的安全問題，比如將一個可執行指令碼上傳到伺服器上，從而獲得許可權。
Web2.0 Web攻擊思路從伺服器端轉向客戶端，轉向了瀏覽器和使用者，例如XSS、CSRF攻擊
瀏覽器安全
瀏覽器是網際網路的重要入口，在安全攻防中，瀏覽器的作用不可忽視
同源策略
同源策略是一種約定，它是瀏覽器最核心也是最基礎的安全功能。
同源指的是指URL的協議、域名、埠相同
舉個例子：當前URLhttp://www.example.com/index.html
| URL | 結果 |
|---|---|
http://www.example.com/detail/page.html |
同源 |
https://www.example.com/detail/page.html |
不同源，協議不同 |
https://en.example.com/detail/page.html |
不同源，域名不同 |
https://www.example.com:8080/detail/page.html |
不同源，埠不同 |
同源具體可以體現在兩個方面：
- DOM同源策略：禁止對不同源的頁面DOM進行操作
- XmlHttpRequest同源策略：禁止使用XHR物件向不同源的伺服器地址發起HTTP請求。
同源策略會導致跨域問題，下面列出幾種解決方法
- CORS Access-Control-Allow-Origin
- JSONP 通過動態建立script標籤，然後利用src屬性進行跨域
- 伺服器代理
- document.domain來跨子域
- postMessage。
瀏覽器沙箱
現代瀏覽器採用多程式架構。 如Chrome的主要程式分為：瀏覽器程式、渲染程式、外掛程式、擴充套件程式。
惡意網站攔截
原理：一般都是瀏覽器週期性地從伺服器端獲取一份最新的惡意網址黑名單，如果使用者上網時訪問的網址存在此黑名單中，瀏覽器就會彈出一個警告頁面。
惡意網址只要有兩類：
- 掛馬網站，網站由惡意程式碼通過瀏覽器漏洞執行shellcode，植入木馬
- 釣魚網站，模仿知名網站欺騙使用者
常見的攻擊方式
跨站指令碼攻擊XSS
惡意攻擊者往Web頁面裡插入惡意Script程式碼，當使用者瀏覽該頁之時，嵌入其中Web裡面的Script程式碼會被執行，從而達到惡意攻擊使用者的目的。
XSS產生的原因：過於信任客戶端提交的資料
XSS的分類:
- 反射型
把使用者的輸入“反射”到瀏覽器上，通常攻擊者需要誘使使用者點選一個惡意連結，才能攻擊成功。 - 儲存型
把使用者輸入的資料“儲存在伺服器端”，常見情景就是攻擊者發表了一篇含有惡意程式碼的部落格，當其他人瀏覽時，惡意程式碼就會被執行。 - DOM Based
這個型別並不是以資料是否有儲存到服務來分類，因為此類攻擊形成原因比較特殊，是修改頁面的DOM節點形成XSS，所以會把它單獨列為一個分類
例子1
正常傳送訊息：http://www.test.com/message.html?send=Hello,World！接收者將會接收資訊並顯示Hello,Word
非正常傳送訊息： http://www.test.com/message.html?send=<script>alert(‘foolish!’)</script>！接收者接收訊息顯示的時候將會彈出警告視窗，攻擊者也就是誘使他人點選此連結來發起進攻
例子2
頁面後臺有個能修改使用者提交的input元素<input type="text" value="">
正常情況：使用者輸入123，後臺標籤<input type="text" value="123"/>
非正常情況： 使用者輸入" onclick="alert(1)，後臺標籤<input type="text" value="" onclick="alert(1)" />當管理者點選標籤是就會彈出警告視窗
XSS危害：
- 竊取使用者cookies資料，從而獲取使用者隱私資訊
- 劫持使用者瀏覽器會話，從而執行任意操作，例如進行非法轉賬、強制發表日誌、傳送電子郵件等
XSS防禦：
- 對輸入輸出進行過濾，內容編碼
- HttpOnly 禁止js操作cookie
跨站點請求偽造CSRF
攻擊者盜用了你的身份，以你的名義傳送惡意請求，對伺服器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作。
CSRF 產生原因：重要請求操作的引數都是可以被攻擊者猜測到的，攻擊者繞過同源策略限制將偽造請求傳送出去，而相關的身份資訊在cookie中也隨之傳送。
例子1
銀行轉賬
1、使用者登入某銀行網站，銀行轉賬請求url為
http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory
2、此時使用者訪問惡意網站
3、惡意網址中有
<img src="http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory "/>
使用img標籤繞過了同源策略向銀行伺服器發起請求，cookie中身份資訊也隨請求傳送出去，完成了攻擊。
CSRF防禦
- Referer Check 檢查請求中的referer頭，如果不是合法網站發起請求就拒絕服務。但是不足之處是伺服器並非什麼時候都能獲取到Referer。
- Anti CSRF Token 在請求的url或者請求頭中加入Token，攻擊者在不知道Token的情況下就無法攻擊成功
點選劫持ClickJacking
原理：利用了視覺欺騙
攻擊方式：
-
攻擊者使用一個透明的iframe，覆蓋在一個網頁上，然後誘使使用者在該頁面上進行操作，此時使用者將在不知情的情況下操作的都是透明的iframe頁面，而不是顯示的頁面
-
攻擊者使用一張圖片覆蓋在網頁，遮擋網頁原有位置的含義
一個簡單的例子
例子中用iframe載入了antd-design頁面，然後用一個a標籤蓋住了頁面的logo，點選logo時就會跳到a標籤指向的頁面
防禦:
X-FRAME-OPTIONS是微軟提出的一個http頭，專門用來防禦利用iframe巢狀的點選劫持攻擊。
- DENY // 拒絕任何域載入
- SAMEORIGIN // 允許同源域下載入
- ALLOW-FROM // 可以定義允許frame載入的頁面地址
參考材料：
- 《Web 前端黑客技術與揭祕》
- 《白帽子講Web安全》
- 瀏覽器工作工作原理與XSS-HTML編碼
- 跨域的那些事兒
- 關於跨域，你想知道的全在這裡