說明
瀏覽器作業原理與實踐專欄學習筆記
前言
支持頁面中的第三方資源參考和 CORS 也帶來了很多安全問題，其中最典型的就是 XSS 攻擊，
什么是 XSS 攻擊
XSS 全稱是 Cross Site Scripting，為了與“CSS”區分開來，故簡稱 XSS，翻譯過來就是“跨站腳本”，XSS 攻擊是指黑客往 HTML 檔案中或者 DOM 中注入惡意腳本，從而在用戶瀏覽頁面時利用注入的惡意腳本對用戶實施攻擊的一種手段，
惡意腳本能做的事情：
- 竊取 Cookie 資訊
- 監聽用戶行為
- 修改 DOM
- 在頁面內生成浮窗廣告
- …
注入惡意腳本的三種方式
通常情況下，主要有存儲型 XSS 攻擊、反射型 XSS 攻擊和基于 DOM 的 XSS 攻擊三種方式來注入惡意腳本，
1. 存盤型 XSS 攻擊
存盤型 XSS 攻擊是怎么向 HTML 檔案中注入惡意腳本的：
- 黑客利用站點漏洞將一段惡意 JavaScript 代碼提交到網站的資料庫中
- 用戶向網站請求包含了惡意 JavaScript 腳本的頁面
- 當用戶瀏覽該頁面的時候，惡意腳本就會將用戶的 Cookie 資訊等資料上傳到服務器
典型例子：喜馬拉雅存盤性 XSS 漏洞
烏云網（由于某些原因被關停了）在 2015 年曝出來的，參見：https://bugs.shuimugan.com/bug/view?bug_no=138479
- 起因是在用戶設定專輯名稱時，服務器對關鍵字過濾不嚴格，導致黑客將惡意代碼存盤到漏洞服務器上，
- 然后用戶打開了含有惡意腳本的頁面，這段代碼就會在用戶的頁面里執行，這樣就可以竊取 Cookie 等資料資訊，
- 惡意腳本可以通過 XMLHttpRequest 或者 Fetch 將用戶的 Cookie 資料上傳到黑客的服務器
- 黑客利用 Cookie 資訊登錄用戶賬戶
2. 反射型 XSS 攻擊
在一個反射型 XSS 攻擊程序中，惡意 JavaScript 腳本屬于用戶發送給網站請求中的一部分，隨后網站又把惡意 JavaScript 腳本回傳給用戶，當惡意 JavaScript 腳本在用戶頁面中被執行時，黑客就可以利用該腳本做一些惡意操作，
接下來我們搭建一個簡單的 Node 服務程式來看看什么是反射型 XSS
- 在一個新的檔案夾里打開控制臺輸入下面兩個命令進行初始化操作，以及依賴安裝
npm init
npm i express ejs
- 測驗代碼撰寫
路由代碼：index.js
var express = require('express');
var app = express();
var ejs = require('ejs');
// 設定html引擎
app.engine('html', ejs.renderFile);
app.set('views', __dirname + '/');
// 設定視圖引擎
app.set('view engine', 'html');
app.get('/', function(req, res, next) {
console.log('進入首頁：哈哈哈哈');
res.render('index', {
title: '凱小默的 xss 測驗頁面',
xss: req.query.xss
});
});
app.listen(3000, () => {
console.log('服務啟動成功！！！');
console.log("server listen on localhost:3000");
});
視圖代碼：index.html
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div>
<!-- 將 URL 中 xss 引數的內容顯示在頁面 -->
<%- xss %>
</div>
</body>
</html>
- 啟動服務，然后我們訪問：
http://localhost:3000/?xss=kaimo666
node index.js
- 頁面效果：xss引數被渲染到了頁面
- 改變引數的值換成
http://localhost:3000/?xss=<script>alert('你被xss攻擊了')</script>
- 看一下dom，發現惡意腳本插入到頁面中了，
總結：從上面的例子我們可以看出，用戶將一段含有惡意代碼的請求提交給 Web 服務器，Web 服務器接收到請求時，又將惡意代碼反射給了瀏覽器端，這就是反射型 XSS 攻擊，
注意：Web 服務器不會存盤反射型 XSS 攻擊的惡意腳本，這是和存盤型 XSS 攻擊不同的地方，
3. 基于 DOM 的 XSS 攻擊
基于 DOM 的 XSS 攻擊是不牽涉到頁面 Web 服務器的，主要是在 Web 資源傳輸程序或者在用戶使用頁面的程序中修改 Web 頁面的資料，
比如：
- 通過 WiFi 路由器劫持的
- 通過本地惡意軟體來劫持的
如何阻止 XSS 攻擊
- 存盤型 XSS 攻擊和反射型 XSS 攻擊都是需要經過 Web 服務器來處理，屬于服務端的安全漏洞
- 基于 DOM 的 XSS 攻擊是在瀏覽器端完成的，屬于前端的安全漏洞
不同 XSS 攻擊的共同點：首先往瀏覽器中注入惡意腳本，然后再通過惡意腳本將用戶資訊發送至黑客部署的惡意服務器上，
阻止 XSS 攻擊的本質：通過阻止惡意 JavaScript 腳本的注入和惡意訊息的發送來實作，
1. 服務器對輸入腳本進行過濾或轉碼
比如：
code:<script>alert('你被xss攻擊了')</script>
過濾：
code:
轉碼：
code:<script>alert('你被xss攻擊了')</script>
2. 充分利用 CSP
CSP 功能：
- 限制加載其他域下的資源檔案，這樣即使黑客插入了一個 JavaScript 檔案，這個 JavaScript 檔案也是無法被加載的；
- 禁止向第三方域提交資料，這樣用戶資料也不會外泄；
- 禁止執行行內腳本和未授權的腳本；
- 還提供了上報機制，這樣可以幫助我們盡快發現有哪些 XSS 攻擊，以便盡快修復問題，
3. 使用 HttpOnly 屬性
由于很多 XSS 攻擊都是來盜用 Cookie 的，因此還可以通過使用 HttpOnly 屬性來保護我們 Cookie 的安全，
通常服務器可以將某些 Cookie 設定為 HttpOnly 標志，HttpOnly 是服務器通過 HTTP 回應頭來設定的，
比如：下面是打開 Google 時，HTTP 回應頭中的一段：set-cookie 屬性值最后使用了 HttpOnly 來標記該 Cookie，
set-cookie: NID=189=M8q2FtWbsR8RlcldPVt7qkrqR38LmFY9jUxkKo3-4Bi6Qu_ocNOat7nkYZUTzolHjFnwBw0izgsATSI7TZyiiiaV94qGh-BzEYsNVa7TZmjAYTxYTOM9L_-0CN9ipL6cXi8l6-z41asXtm2uEwcOC5oh9djkffOMhWqQrlnCtOI; expires=Sat, 18-Apr-2020 06:52:22 GMT; path=/; domain=.google.com; HttpOnly
使用 HttpOnly 標記的 Cookie 只能使用在 HTTP 請求程序中，所以無法通過 JavaScript 來讀取這段 Cookie，
通過 Chrome 開發者工具來查看哪些 Cookie 被標記了 HttpOnly：比如下圖里的 UserInfo 這個 Cookie 的 HttpOlny 屬性是被勾選上的，所以 UserInfo 的內容是無法通過 document.cookie 是來讀取的，
可以自己在控制臺測驗一下，輸入 document.cookie ，然后 ctrl + f 去搜索 UserInfo 是找不到的，
因此一些比較重要的資料建議設定 HttpOnly 標志，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287105.html
標籤：其他
上一篇：面試題打卡——第七天