前端安全之初識XSS

文章首發於個人博客：查看原文

文章是學習了慕課網老師視頻整理，視頻地址：Web安全-XSS

文末有驚喜哦

1、什麼是XSS？

XSS（Cross-site scripting），跨站腳本，一種在web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。這類攻擊一般包含了HTML以及用戶端腳本語言。

2、XSS的攻擊方式

攻擊有什麼用？？=> 一、盜用cookie等，獲取敏感信息；二、 破壞頁面結構；三、其餘～

2.1 反射型

發出請求時，XSS代碼出如今URL中，做爲輸入提交到服務器，服務器端解析後響應，XSS代碼隨響應內容一塊兒返回給瀏覽器，最後瀏覽器解析響應XSS代碼。這個過程像一次反射，因此稱爲反射型XSS。

這裏要注意的有幾個點：

1. XSS代碼出如今URL中；
2. 服務端解析響應
3. 瀏覽器解析代碼

這裏的XSS代碼一般是CSS，javascript或者HTML片斷。

2.2 存儲型

存儲型XSS和反射型XSS的差異在於提交的代碼會存儲在服務端（數據庫、內存、文件系統等），下次請求目標頁面時，無需再次提交XSS代碼。

好比，當你訪問一我的的博客時(不要搞我！)，你去他的文章下面添加一些評論，這些評論通常都會存下來，若是他的博客沒有做什麼處理，那麼，一個簡單的XSS攻擊就算生效了：

2.2.1 插入html片斷：

<img src="null" onerror="alert(「你被攻擊了哦！」)" >

當你在評論中插入了一個 ==img== 標籤，因爲圖片路徑找不到，因此就會執行==onerror==方法，這樣，onerror中的js腳本就被觸發了，每次當用戶訪問到這篇文章，加載到這條評論時，都會觸發這個彈窗。這樣，一次簡單的XSS就算生效了。

<button onclick="alert('你被攻擊了哦！')">點我呀</button>

向頁面中插入一個按鈕，誘導用戶進行操做，進而被攻擊了～

<iframe> <iframe>

向頁面中插入一個iframe(或者frame)，來插入一些小廣告？～。

2.2.2 插入CSS

<style>
    html,body{
        display:none!important;
    }
</style>

<link href= "">

若是向你的頁面中插入上面的代碼，當別人訪問你的頁面時，將會什麼也看不到.

2.2.3 插入js代碼

<script>
window.onload = function (){
    alert('你被攻擊了哦！')
}
</script>

若是向你的頁面中插入上面的代碼，一樣也被攻擊了～。

由此得出一點，慎用==innerHTML==

3、XSS的防範措施

3.1 編碼

對用戶輸入的內容進行HTML Entity編碼（字符轉義），不能進行原樣輸出。

在編寫HTML頁面時，須要用到"<"、">"、"空格"、"&"、"引號"直接輸入這些符號時，會錯誤的把它們與標記混在一塊兒，很是不利於編碼。因此 須要對這些字符進行轉義。

Character	Entity
&	&
<	&lt;

| >
" | "
空格 |  

3.2 過濾

過濾掉用戶輸入的一些不安全的內容

3.2.1 移除用戶上傳的DOM屬性，入onclick，onerror等

3.2.2 移除用戶上傳的style節點，script節點，iframe節點等。

3.3 校訂

3.3.1 避免直接對HTML Entity進行解碼

3.3.2 使用DOM Parse轉換，校訂不配對的DOM標籤

DOMParser: 能夠將存儲在字符串中的 XML 或 HTML 源代碼解析爲一個 DOM Document。

個人博客使用了第三方庫htmlparser2進行過濾和校訂

segmentfault上，這篇文章彷佛被人成功攻擊了，哈哈:
《用大白話談談XSS與CSRF》
打開這個連接，拖到文章最下面，，點擊【顯示更多評論】，有驚喜。。

道路千萬條，安全第一條，做爲前端開發的你對前端開發有一點認識了嗎？

感謝你的閱讀，歡迎留言探討～