前端培訓-中級階段（1三、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腳本。

微信公衆號：前端linong

資料

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