初探 XSS

Pandaaa發表於2018-05-15

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

XSS

  • xss表示Cross Site Scripting(跨站指令碼攻擊)，它與SQL隱碼攻擊類似， SQL隱碼攻擊中以SQL語句作為使用者輸入，從而達到查詢/修改/刪除資料 的目的，而在xss攻擊中，通過插入惡意指令碼，實現對使用者遊覽器的控制。

1、分類

  • 反射型(非持久型)

    • Url 形成一個攻擊的連結。

  • 儲存型(持久型)

    • 儲存為伺服器端，論壇留言(等等)

2、看一個栗子?

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

iamge

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

2.2 demo2(Google 翻譯)

  • 進入我們常用的 google 翻譯
  1. 進入網站 輸入兩個 哈哈 進行翻譯

image

2.我們可以看到 url 上面顯示了我們輸入的 哈哈，說明這裡可以注入內容。 那我們來注入一些友(壞)善(壞)的指令碼吧。

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

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

  • 看看情況

image

  • 可以看到引數 q 沒錯，但是瀏覽器做了 xss 的篩選

image

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

4.我們用 firefox 重新試試上面的 demo(當然你可以在 MDN 直接輸入x-xss-protection)

  • 如圖點選這個 ? 號，進入 MDN 看看情況

image

  • 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 ?

    • 1、http 頭資訊 的 Content Security Policy

    • 2、用 另外一種是通過網頁的 標籤

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

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

3、搭建一個簡單的 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 的放射型攻擊。第一個效果如下圖：

image

  • 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 圖片）

相關文章