瀏覽器安全：什麼是XSS攻擊？

語言: CN / TW / HK
時間 2023-01-06 20:15:05

theme: nico

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

關於瀏覽器安全主要分為web頁面安全、瀏覽器網絡安全和瀏覽器系統安全，今天我們主要聊一聊web頁面安全裏面的XSS(Cross Site Scripting)跨站腳本攻擊

同源策略

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

http:// www.baidu.com :8080 /test 協議號 域名 端口號 路徑 複製代碼

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

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

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

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

同源策略主要表現在三個方面： 1) DOM、 2) Web數據、 3) 網絡

DOM

同源策略限制了來自不同源的 JavaScript 腳本對當前 DOM 對象讀和寫的操作。

Web數據

同源策略限制了不同源的站點讀取當前站點的 Cookie、IndexDB、LocalStorage 等數據。

網絡

同源策略限制了通過 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讀取)
「」
「」