前端培訓-中級階段（13、15）- web網絡攻擊、CSP內容安全策略（2019-08-29期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

拖更小夥又來了，今天我們來聊聊 web網絡攻擊。

1. XSS (跨站腳本攻擊)
2. CSRF (跨站請求僞造)

3. 劫持

   1. 運營商劫持
   2. 中間人攻擊
4. XFF (僞造XFF頭繞過服務器IP過濾)
5. 文件上傳

6. 風控

   1. 刷優惠券
   2. 拉新套現
   3. 撞庫、暴力破解
   4. 短信轟炸、郵件轟炸
7. CSP (內容安全策略)

XSS 跨站腳本攻擊

XSS 應該是前端遇到次數最多的問題。通過一些手段，注入一段文字，實現攻擊。

xss 攻擊場景

1. 評論區，<input>標籤 輸入，<div>標籤 輸出
   <input value="xss"> 本意是輸入一段文字，結果顯示成了輸入框
2. 個人資料編輯，<input>標籤 輸入，<input>標籤 輸出
   "><script>alert()</scrpit> 本意是編輯文本，結果因爲拼接導致字符串被異常隔開。
3. 富文本
   比較複雜，需要用白名單過濾，不在白名單中的都轉義
4. url 填寫處，a 鏈接或者 img 圖片
   https://lilnong.top " onclick="alert(1)" 判斷url合法，防止拼接異常

xss 防禦方法

1. 富文本使用白名單區分。

2. 輸出，使用插值或轉義

   1. 插值 innerText setAttribute()
   2. 轉義 <變成<、"變成"等

3. url處理，插值或過濾

   1. 推薦使用插值
   2. encodeURI

CSRF 跨站請求僞造

XSS 是通過把代碼注入，在其他客戶端機器上執行。CSRF 是通過誘導用戶，在其他站上，觸發請求。

CSRF 攻擊場景

1. 直播送禮，調用接口 sendGift(liveid, anchorid, giftid)，服務端驗證 cookie。
   突然，QQ 收到一個鏈接，禮物免費領。你打開，這個網頁背後默默的調用了sendGift(liveid, anchorid, giftid)，只不過他傳的liveid、anchorid 都是他自己的。但是因爲 cookie 的機制，會默認帶上，導致服務端認爲這是你主動觸發的一次操作。
2. 修改密碼，有的修改密碼不需要檢驗舊密碼。誘導網頁後臺直接修改密碼。

CSRF 防護

1. Referrer 校驗
2. token 令牌。
   比如阿里雲，將令牌直接輸出到網頁中，如果要進行敏感操作，需要傳過去令牌。令牌一次有效，最新有效。
   因爲有跨域限制，不同源網頁之間無法獲取內容。

劫持攻擊&中間人攻擊

運營商劫持

http 移動端比較多。

1. 不良運營商，非法植入廣告。
2. 公共wifi，非法劫持。

中間人攻擊

中間人也可以理解爲僞裝的運營商，只不過運營商屬於公衆，不會太過分。實施中間人攻擊時，攻擊者常考慮的方式是ARP欺騙或DNS欺騙等

1. 信息篡改
   當主機A、和主機B通信時，都由主機C來爲其“轉發”。而A、B之間並沒有真正意思上的直接通信，他們之間的信息傳遞同C作爲中介來完成，但是A、B卻不會意識到，而以爲它們之間是在直接通信。這樣攻擊主機在中間成爲了一個轉發器，C可以不僅竊聽A、B的通信還可以對信息進行篡改再傳給對方，C便可以將惡意信息傳遞給A、B以達到自己的目的。
2. 信息竊取
   代理服務器。當A、B通信時，C不主動去爲其“轉發”，只是把他們的傳輸的數據備份，以獲取用戶網絡的活動，包括賬戶、密碼等敏感信息。

XFF (僞造XFF頭繞過服務器IP過濾)

1. 刷票
2. 爬蟲

當然，他會有真實的ip，只需要按真實ip過濾即可。
同樣，又出現大量的代理。a請求代理，代理請求服務端，這樣只能做個池子過濾了。

文件上傳

有時候，我們需要做一個富文本編輯器，其中就有上傳的功能，我們一般來說是先把他所有實例代碼部署。之後先看看是否符合要求。最後接入修改。
問題就出現在了這裏。有時一些代碼未刪除，或者漏刪。這個時候就有問題了，因爲是測試代碼，未限制類型。比如攻擊者上傳jsp代碼。

防護方案

1. 限制可上傳類型，比如只可以上傳圖片類型，視頻類型。儘量避免可執行代碼。
2. 上傳目錄控制，儘量使用新的存儲。防止走模板引擎
3. 後綴名防護，html替換爲txt
4. 上cdn。前端跨域，相對來說可以避免很多問題（跨域也會引起問題，比如圖片合成，源會被污染）。

風控

風控屬於一個持續工程。屬於一個可以分層封禁的。

1. 刷優惠券、拉新套現

   1. 限制賬戶（微信賬戶，手機號）
   2. 限制ip（）
   3. 限制設備（機器碼，客戶端能獲取）

2. 撞庫、暴力破解、短信轟炸、郵件轟炸

   1. 限制頻率（同一地址每天10次）

說說破解方案。

1. 人力刷，無敵。只能說拉來的不是有效用戶。所以要結合業務，轉爲有效用戶或者限制個數。

2. 機刷

   1. ip限制。代理池
   2. 賬號限制。和多號，阿里小號，等等一些平臺，低價賬號，然後養號。

說到底，還是要結合業務。找到具體的控制線。
比如說，根據用戶等級，確定用戶活躍度，30級以下 10個名額，30級以上 20個名額，80級以上 30個名額，心悅8 40個名額。

CSP (內容安全策略)

掘金使用的是這個方案。它可以禁止使用不安全來源的資源。

內容安全策略 (CSP) 是一個額外的安全層，用於檢測並削弱某些特定類型的攻擊，包括跨站腳本 (XSS) 和數據注入攻擊等。無論是數據盜取、網站內容污染還是散發惡意軟件，這些攻擊都是主要的手段。
CSP通過指定有效域——即瀏覽器認可的可執行腳本的有效來源——使服務器管理者有能力減少或消除XSS攻擊所依賴的載體。一個CSP兼容的瀏覽器將會僅執行從白名單域獲取到的腳本文件，忽略所有的其他腳本 (包括內聯腳本和HTML的事件處理屬性)。
作爲一種終極防護形式，始終不允許執行腳本的站點可以選擇全面禁止腳本執行。

有兩種設置方式

1. 服務端返回 Content-Security-Policy HTTP頭部
2. 網頁中設置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

CSP 限制

1. default-src 默認，給所有配置項設置。
2. child-src WebWorker 和 <frame> <iframe>嵌套瀏覽上下文。

3. connect-src 腳本接口加載的鏈接地址

   1. ping
   2. Fetch
   3. XMLHttpRequest
   4. WebSocket
   5. EventSource
4. font-src 加載的字體的有效源@font-face。
5. frame-src <frame> 和 <iframe>的有效源。
6. img-src 圖像和圖標的有效來源。
7. manifest-src manifest有效源
8. media-src 媒體來源有效<audio>，<video>和<track>元素。
9. object-src <object>，<embed>和<applet>元素。
10. script-src JavaScript的有效源。可以限制行內無效
11. style-src 樣式表的有效源。
12. worker-src 指定有效來源Worker，SharedWorker或ServiceWorker腳本。

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. 內容安全策略( CSP ) - HTTP | MDN