瀏覽器安全:什麼是XSS攻擊?

語言: CN / TW / HK

theme: nico

本文正在參加「金石計劃 . 瓜分6萬現金大獎」 

關於瀏覽器安全主要分為web頁面安全瀏覽器網路安全瀏覽器系統安全,今天我們主要聊一聊web頁面安全裡面的XSS(Cross Site Scripting)跨站指令碼攻擊

同源策略

協議號 - 域名 - 埠號 ,只有當這三個條件同時滿足相同時,我們就稱之為符合同源策略,同源策略也可以看做是一個協議。

https:// www.baidu.com :8080 /test 協議號 域名 埠號 路徑 複製程式碼

通常我們導航的url都是由這四部分組成的。

如果兩個 URL 的協議、域名和埠都相同,我們就稱這兩個 URL 同源

https://www.baidu.com:8080/test1 https://www.baidu.com:8080/test2

瀏覽器預設兩個相同的源之間是可以相互訪問資源和操作 DOM的。兩個不同的源之間若想要相互訪問資源或者操作 DOM,那麼會有一套基礎的安全策略的制約,我們把這稱為同源策略

同源策略主要表現在三個方面: 1) DOM、 2) Web資料、 3) 網路

DOM

同源策略限制了來自不同源的 JavaScript 指令碼對當前 DOM 物件讀和寫的操作。

Web資料

同源策略限制了不同源的站點讀取當前站點的 CookieIndexDBLocalStorage 等資料。

網路

同源策略限制了通過 XMLHttpRequest 等方式將站點的資料傳送給不同源的站點。

我們瞭解了同源策略會隔離不同源的 DOM、頁面資料和網路通訊,進而實現 Web 頁面的安全性。

不過安全性和便利性是相互對立的,讓不同的源之間絕對隔離,無疑是最安全的措施,但這也會使得 Web 專案難以開發和使用。因此我們就要在這之間做出權衡,讓出一些安全性來滿足靈活性;而出讓安全性又帶來了很多安全問題,最典型的是 XSS 攻擊和 CSRF 攻擊,這篇文章我們主要聊一聊 XSS 攻擊

XSS(Cross Site Scripting)

跨站指令碼攻擊指的是自己的網站運行了別的網站裡面的程式碼,攻擊原理是原本需要接受資料但是一段指令碼放置在了資料中: (黑客向html檔案中或者DOM中注入惡意指令碼,從而使用者在瀏覽頁面時注入的指令碼對使用者實施攻擊)

image.png

XSS攻擊影響

  1. 修改DOM,偽造頁面,欺騙使用者,獲取賬號密碼等私密資訊;
  2. 在內面內生成浮窗廣告;
  3. 可以監聽使用者的行為,比如addEventListener('keydown') // 監聽使用者的鍵盤敲擊事件
  4. 竊取cookie資訊
  5. 獲取頁面資料等
  6. ...

#### XSS攻擊方式

  1. 儲存型XSS攻擊:儲存到DB後讀取時注入惡意指令碼,比如在一些評論區或者個性簽名等可以自由編寫的地方,在評論的時候寫一段script指令碼,這樣資料就會被儲存到資料庫,當別人訪問時,載入這段評論時,瀏覽器就會識別為一段javascript指令碼程式碼來執行,並且只要不刪除,就一直在,危害較大。
  2. 反射型XSS攻擊:是通過URL引數直接注入,一般是使用alert來探測站點是否防禦,直接攻擊的使用src來引入自己的指令碼。

我們來看一下效果,使用node藉助express開啟一個後端服務,模擬 一個伺服器端

index.js

``` const express = require('express') const path = require('path') const app = express()

app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html');

app.get('/', function(req, res, next) { res.render('index', { title: 'Express', xss: req.query.xss }) })

app.listen(3000,() => { console.log('服務已在3000埠啟動'); })

```

image.png

當我們在訪問3000埠時在後面直接接一段script程式碼,看看會是什麼效果呢?

image.png

可以看到,我們直接被彈出的提示框,這就是反射型XSS攻擊

  1. 基於DOM的XSS攻擊 --- 網路劫持,修改頁面後,再讓使用者看到。

XSS防禦方式

  1. 在服務端將script標籤轉義掉,( 伺服器對輸入的指令碼進行過濾或轉碼);

``` function changeCode(str) { return str.replace('<', '&lt'); } // 在返回資料給到瀏覽器去渲染的時候,我們先將資料交給轉義函式處理一下資料

res.render('index', { title: 'Express', xss: changeCode(req.query.xss) }) ```

那我們上面的例子來看一下效果

image.png

image.png 這樣就不會把它識別為一段惡意指令碼程式碼了。

  1. 充分使用 CSP (限制載入其他域下的資原始檔、禁止向第三方提交資料)

內容安全策略 (CSP) 是一個額外的安全層,用於檢測並削弱某些特定型別的攻擊,包括跨站指令碼 (XSS) 和資料注入攻擊等。

  1. cookie設定 - HttpOnly (設定這個屬性之後cookie無法通過js去document.cookie讀取)