瀏覽器安全:什麼是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讀取)