瀏覽器安全:什麼是XSS攻擊?
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中注入惡意腳本,從而用户在瀏覽頁面時注入的腳本對用户實施攻擊)
XSS攻擊影響
- 修改DOM,偽造頁面,欺騙用户,獲取賬號密碼等私密信息;
- 在內面內生成浮窗廣告;
- 可以監聽用户的行為,比如addEventListener('keydown') // 監聽用户的鍵盤敲擊事件
- 竊取cookie信息
- 獲取頁面數據等
- ...
#### XSS攻擊方式
存儲型XSS攻擊
:存儲到DB後讀取時注入惡意腳本,比如在一些評論區或者個性簽名等可以自由編寫的地方,在評論的時候寫一段script
腳本,這樣數據就會被保存到數據庫,當別人訪問時,加載這段評論時,瀏覽器就會識別為一段javascrip
t腳本代碼來執行,並且只要不刪除,就一直在,危害較大。反射型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端口啟動'); })
```
當我們在訪問3000端口時在後面直接接一段script代碼,看看會是什麼效果呢?
可以看到,我們直接被彈出的提示框,這就是反射型XSS攻擊
。
基於DOM的XSS攻擊
--- 網絡劫持,修改頁面後,再讓用户看到。
XSS防禦方式
- 在服務端將script標籤轉義掉,(
服務器對輸入的腳本進行過濾或轉碼
);
``` function changeCode(str) { return str.replace('<', '<'); } // 在返回數據給到瀏覽器去渲染的時候,我們先將數據交給轉義函數處理一下數據
res.render('index', { title: 'Express', xss: changeCode(req.query.xss) }) ```
那我們上面的例子來看一下效果
這樣就不會把它識別為一段惡意腳本代碼了。
- 充分使用
CSP
(限制加載其他域下的資源文件、禁止向第三方提交數據)
內容安全策略 (CSP) 是一個額外的安全層,用於檢測並削弱某些特定類型的攻擊,包括跨站腳本 (XSS) 和數據注入攻擊等。
- cookie設置 - HttpOnly (設置這個屬性之後
cookie
無法通過js去document.cookie讀取)