初探 XSS

前言：最近因爲阮老師blog 被攻擊，對前端安全起了興趣，還有迫於小組分享，就認(大)真(概)的研究了下 Xss

XSS

• xss表示Cross Site Scripting(跨站腳本攻擊)，它與SQL注入攻擊相似， SQL注入攻擊中以SQL語句做爲用戶輸入，從而達到查詢/修改/刪除數據 的目的，而在xss攻擊中，經過插入惡意腳本，實現對用戶遊覽器的控制。

一、分類

• 反射型(非持久型)

  • Url 造成一個攻擊的連接。

• 儲存型(持久型)

  • 存儲爲服務器端，論壇留言(等等)

二、看一個栗子🌰

2.1 demo1

• http://www.insecurelabs.org/
• 進入上面的網站，這是一個有缺陷的沒有進行 xss 篩選的頁面。

1. 進入網頁，選中 Agenda 看到有 serach
2. 而後咱們在搜索框中輸入具備攻擊的信息

測試一下網站的安全

• https://translate.google.cn/#zh-CN/en/
• google 翻譯是咱們經常使用的一個網站，咱們來試試

<script>alert(123)</script>

複製代碼

看看網頁的反應。彈出了 123

這就是一個簡單的 XSS 攻擊。

2.2 demo2(Google 翻譯)

• 進入咱們經常使用的 google 翻譯

1. 進入網站 輸入兩個 哈哈 進行翻譯

2.咱們能夠看到 url 上面顯示了咱們輸入的 哈哈，說明這裏能夠注入內容。 那咱們來注入一些友(壞)善(壞)的腳本吧。

https://translate.google.cn/#zh-CN/en/哈哈
//替代爲
https://translate.google.cn/#zh-CN/en/<script>alert(123)</script>
複製代碼

3.回車肯定後，會發現瀏覽器幫我作了處理，

• 看看狀況

• 能夠看到參數 q 沒錯，可是瀏覽器作了 xss 的篩選

咱們看到這個，X-XSS-Protection 這個就是咱們今天的主題了。

4.咱們用 firefox 從新試試上面的 demo(固然你能夠在 MDN 直接輸入x-xss-protection)

• 如圖點擊這個 ? 號，進入 MDN 看看狀況

• MDN 這麼解釋

HTTP X-XSS-Protection響應頭是Internet Explorer，Chrome和Safari的一個功能，當檢測到跨站腳本攻擊 (XSS)時，瀏覽器將中止加載頁面。雖然這些保護在現代瀏覽器中基本上是沒必要要的，當網站實施一個強大的Content-Security-Policy來禁用內聯的JavaScript ('unsafe-inline')時, 他們仍然能夠爲尚不支持 CSP 的舊版瀏覽器的用戶提供保護。

• 其中 xss 語法能夠看到
• 語法

X-XSS-Protection: 0
// 這一條表明關閉 XSS 保護
X-XSS-Protection: 1
X-XSS-Protection: 1; mode=block
// 這一條是咱們看到的，表明啓用了 xss 保護
X-XSS-Protection: 1; report=<reporting-uri>
複製代碼

• 其中涉及一個重要的概念就是 CSP
• MDN 是這麼解釋的

HTTP 響應頭 Content-Security-Policy 容許站點管理者在指定的頁面控制用戶代理的資源。除了少數例外，這條政策將極大地指定服務源 以及腳本端點。這將幫助防止跨站腳本攻擊（Cross-Site Script） (XSS).

• 固然上面都是九牛一毛，須要你們本身詳細的看看 MDN 的解釋

• 怎麼啓用 CSP ?

  • 一、http 頭信息 的 Content Security Policy

  • 二、用 另一種是經過網頁的 標籤

// header
Content-Security-Policy: default-src https:

// meta tag
<meta 
http-equiv="Content-Security-Policy" 
content="default-src https:">
複製代碼

三、搭建一個簡單的 node-express 環境

3.1 搭建環境

• 1/搭建環境：(固然咱們默認你安裝了 node express npm )

mkdir demo 
// 新建一個 demo 文件夾
cd demo 
express -e ./ 
// 搭建 express 腳手架，ejs 和模板引擎
npm install
// 安裝依賴包
複製代碼

3.2 修改代碼

• 2/設置路由 routes/index.js

router.get("/", function(req, res, next) {
    res.set("X-XSS-Protection", 0);
    //關掉瀏覽器對XSS的檢測
    res.render("index", {title: "Express", xss: req.query.xss});
}); //query是express獲取search的字段
複製代碼

• 3/在 view/index.ejs 中添加

<div class="">
	<%- xss %><!--'-'表示容許輸入html，不須要轉義--> </div>
複製代碼

• 4/看下路由設置一些端口 在 bin/www

//找到這一行
var port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

// 咱們改爲
var port = normalizePort(process.env.PORT || "6060");
console.log("listen on port:6060");
app.set("port", port);
複製代碼

固然這個端口號無所謂，將來不衝突，因此選個吉利的數字，console 是爲了在控制檯看到本身成功 start 了

• 5/ 開啓服務

npm start
複製代碼

• 6/ 在http://localhost:6060/後輸入

?xss=<iframe src="//baidu.com/h.html"></iframe>或者?xss=<img src="null" onerror="alert("1")">或者?xss=<p onclick="alert("1")">點我點我</p>

• 進行模仿 XSS 的放射型攻擊。第一個效果以下圖：

• 7/打開你的瀏覽器的控制檯，咱們來看看狀況,看到 ELments 中，查看在 url 中輸入的連接是否成功的入侵到咱們的 div 中了。

---

其實 XSS 雖然咱們平時在開發的時候沒有特別注意，

下一篇文章

• 我會搭建一個存儲型的 node-express-xss 環境

• 此次咱們建立一個複雜的 demo
• 經過構建 Node 服務和創建一個評論功能，使用 ajax 實例演示 XSS 的攻擊和預防

主要由服務器端轉義，客戶端反轉義，再DomParse，再過濾,使用encode.js和 domparse.js第三方庫對文本進行解碼和DOM parse操做

參考

• imooc (https://www.imooc.com/)
• MDN (https://developer.mozilla.org)
• CSP 圖解（google 圖片）