前端知識體系之基礎知識 - Web安全與防禦

時間 2019-11-30

標籤前端知識體系基礎 web 安全防禦欄目 HTML 简体版

原文原文鏈接

1. SQL注入

1.1 介紹

例如作一個系統的登陸界面，輸入用戶名和密碼，提交以後，後端直接拿到數據就拼接 SQL 語句去查詢數據庫。若是在輸入時進行了惡意的 SQL 拼裝，那麼最後生成的 SQL 就會有問題。javascript

好比後端拼接的 SQL 字符串是：css

SELECT * FROM user WHERE username = 'user' AND password = 'pwd';
複製代碼

若是不作任何防禦，直接拼接前端的字符，就會出現問題。好比前端傳來的 user 字段是以 '# 結尾，password 隨意：html

SELECT * FROM user WHERE username = 'user'#'AND password = 'pwd'; 複製代碼

密碼驗證部分直接被註釋掉了。前端

1.2 防範

後端應該對於字符串有轉義，能夠藉助成熟的庫的 API 來拼接命令，而不是本身手動拼接。java

2. XSS: 跨站腳本攻擊

2.1 介紹

原理上就是黑客經過某種方式（發佈文章、發佈評論等）將一段特定的 JS 代碼隱蔽地輸入進去。而後別人再看這篇文章或者評論時，以前注入的這段 JS 代碼就執行了。JS 代碼一旦執行，那可就不受控制了，由於它跟網頁原有的 JS 有一樣的權限，例如能夠獲取 server 端數據、能夠獲取 cookie 等。nginx

好比早些年社交網站常常爆出 XSS 蠕蟲，經過發佈的文章內插入 JS，用戶訪問了感染不安全 JS 注入的文章，會自動從新發布新的文章，這樣的文章會經過推薦系統進入到每一個用戶的文章列表面前，很快就會形成大規模的感染。git

2.2 防範

前端對用戶輸入內容進行驗證，若是有風險，就進行替換。例如： & 替換爲 &github

3. CSRF: 跨站請求僞造

3.1 介紹

CSRF 是借用了當前操做者的權限來偷偷地完成某個操做，而不是拿到用戶的信息。好比獲取 cookie、破解 token 加密等等。web

3.2 防範

敏感數據不使用 GET
先後端約定加密方式和密鑰，而且常常更新密鑰
對 IP 限制必定時間內的訪問次數
設置網站白名單

4. 中間人攻擊

4.1 原理和防範

它也被稱爲瀏覽器劫持、web 劫持。能夠往 web 中添加一些第三方廠商的 dom 元素，或者重定向到另外的釣魚站。sql

經常使用手段有 2 種：

網絡報文傳輸過程當中對其截獲、篡改（過程當中）
客戶端發起 http 請求以前或者獲得 response 以後對數據篡改（開頭、結尾）

防範方式就是使用 https 協議，一套在傳輸層 TCP 和應用層 HTTP 之間的 TLS 協議。

4.2 Https交互細節

如下內容摘自：《深刻理解 Web 安全：中間人攻擊》

簡單地說，一次 https 網絡請求在創建開始階段具備如下的一個「握手」流程：

首先，客戶端向服務端發起一個基於 https 協議的網絡請求，這至關於告訴它：「我但願獲得一個安全加密的網頁，你可別直接把明文扔過來！」

服務端接收到這個網絡請求後，瞭解到客戶端的提出的這種加密的訴求，因而先把一個公鑰和網站的 https 證書發送給客戶端。

客戶端隨後要作兩件事，一是驗證證書的合法性與時效性，若是頒發證書的機構客戶端這邊不認可或者證書中標明的過時時間已通過了，這都會致使客戶端瀏覽器報出那個紅叉子，chrome 瀏覽器還會直接攔截掉這個請求，除非用戶點詳情->繼續，不然不會與該網站的服務器進行後續溝通，這至關於一個強交互的提醒，告訴用戶「我拿到的證書有問題，這網站多是個冒牌貨，你要看仔細了！」

若是以上兩步驗證無誤，那麼客戶端會先生成一個隨機祕鑰，利用剛剛拿到的公鑰給本身要訪問的 url+這個隨機祕鑰進行加密，把密文再次發往服務端。

當服務端收到客戶端傳過來的密文以後，會經過本身手裏持有的一個私鑰對密文進行解密。注意，這裏提到的私鑰和剛剛的公鑰是一對兒祕鑰，這是一個典型的非對稱加密，加密和解密分別使用兩把不一樣的鑰匙，這也保證了在此場景下的安全性。

此時，服務端要將真正的 html 網頁文本發給你了，它會利用解密獲得的隨機祕鑰對網頁文本內容進行加密，將密文發給客戶端。

客戶端拿到真正的 html 報文以後，就用本身剛纔生成的那個隨機祕鑰進行解密，而後就獲得了跟普通 http 請求時同樣的一個網頁文本了，在這以後就像往常那樣解析、渲染、加載更多資源……

對於真正要傳輸的 html 文本，其實是使用剛剛提到的這個隨機祕鑰進行了一次對稱加密，由於上鎖和開鎖的鑰匙其實是如出一轍的。

5. DDos

攻擊者在短期內發起大量請求，利用協議的缺點，耗盡服務器的資源，致使網站沒法響應正常的訪問。

防範的措施，或者稱之爲補救措施更合適，有如下建議：

藉助雲廠商 CDN：靜態流量的資源還得本身掏錢
IP 黑/白名單：nginx 和 apache 均可以設置
HTTP 請求信息：根據 UserAgent 等字段的信息
靜態化：博客網站直接掛在 github 等平臺上
備份網站：阮一峯老師的網站被 ddos 的時候就有個備份頁面
其餘：彈性 ip、免費的 DNSpod、國內外分流、高防 ip 等等

6. 點擊劫持

點擊劫持是一種視覺欺騙的攻擊手段。攻擊者經過 iframe 嵌套嵌入被攻擊網頁，誘導用戶點擊。若是用戶以前登錄過被攻擊網頁，那麼瀏覽器可能保存了信息，所以能夠以用戶的身份實現操做。

防範手段：

<head>
  <style id="click-jack"> html { display: none !important; } </style>
  <script> // 判斷當前頁面是不是iframe加載 if (self === top) { const style = document.getElementById("click-jack"); document.body.removeChild(style); } else { top.location = self.location; } </script>
</head>
複製代碼