這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言：我們知道同源策略可以隔離各個站點之間的 DOM 互動、頁面資料和網路通信，雖然嚴格的同源策略會帶來更多的安全，但是也束縛了 Web，這就需要在安全和自由之間找到一個平衡點，所以我們默認頁面中可以參考任意第三方資源，然后又引入 CSP 策略來加以限制；默認 XMLHttpRequest 和 Fetch 不能跨站請求資源，然后又通過 CORS 策略來支持其跨域，
不過支持頁面中的第三方資源參考和 CORS 也帶來了很多安全問題，其中最典型的就是 XSS 攻擊，
什么是 XSS 攻擊
XSS 全稱是 Cross Site Scripting，為了與“CSS”區分開來，故簡稱 XSS，翻譯過來就是“跨站腳本”，XSS 攻擊是指黑客往 HTML 檔案中或者 DOM 中注入惡意腳本，從而在用戶瀏覽頁面時利用注入的惡意腳本對用戶實施攻擊的一種手段，
最開始的時候，這種攻擊是通過跨域來實作的，所以叫“跨域腳本”，但是發展到現在，往 HTML 檔案中注入惡意代碼的方式越來越多了，所以是否跨域注入腳本已經不是唯一的注入手段了，但是 XSS 這個名字卻一直保留至今，
當頁面被注入了惡意 JavaScript 腳本時，瀏覽器無法區分這些腳本是被惡意注入的還是正常的頁面內容，所以惡意注入 JavaScript 腳本也擁有所有的腳本權限，下面我們就來看看，如果頁面被注入了惡意 JavaScript 腳本，惡意腳本都能做哪些事情，
- 可以竊取 Cookie 資訊，惡意 JavaScript 可以通過“document.cookie”獲取 Cookie 資訊，然后通過 XMLHttpRequest 或者 Fetch 加上 CORS 功能將資料發送給惡意服務器；惡意服務器拿到用戶的 Cookie 資訊之后，就可以在其他電腦上模擬用戶的登錄，然后進行轉賬等操作，
- 可以監聽用戶行為，惡意 JavaScript 可以使用“addEventListener”介面來監聽鍵盤事件，比如可以獲取用戶輸入的信用卡等資訊，將其發送到惡意服務器，黑客掌握了這些資訊之后，又可以做很多違法的事情，
- 可以通過修改 DOM偽造假的登錄視窗，用來欺騙用戶輸入用戶名和密碼等資訊，
- 還可以在頁面內生成浮窗廣告，這些廣告會嚴重地影響用戶體驗，
惡意腳本是怎么注入的
現在我們知道了頁面中被注入惡意的 JavaScript 腳本是一件非常危險的事情，所以網站開發者會盡可能地避免頁面中被注入惡意腳本，要想避免站點被注入惡意腳本，就要知道有哪些常見的注入方式，通常情況下，主要有存盤型 XSS 攻擊、反射型 XSS 攻擊和基于 DOM 的 XSS 攻擊三種方式來注入惡意腳本，
1. 存盤型 XSS 攻擊
我們先來看看存盤型 XSS 攻擊是怎么向 HTML 檔案中注入惡意腳本的，你可以參考下圖：
通過上圖，我們可以看出存盤型 XSS 攻擊大致需要經過如下步驟：
- 首先黑客利用站點漏洞將一段惡意 JavaScript 代碼提交到網站的資料庫中；
- 然后用戶向網站請求包含了惡意 JavaScript 腳本的頁面；
- 當用戶瀏覽該頁面的時候，惡意腳本就會將用戶的 Cookie 資訊等資料上傳到服務器，
下面我們來看個例子，2015 年喜馬拉雅就被曝出了存盤型 XSS 漏洞，起因是在用戶設定專輯名稱時，服務器對關鍵字過濾不嚴格，比如可以將專輯名稱設定為一段 JavaScript，如下圖所示：
當黑客將專輯名稱設定為一段 JavaScript 代碼并提交時，喜馬拉雅的服務器會保存該段 JavaScript 代碼到資料庫中，然后當用戶打開黑客設定的專輯時，這段代碼就會在用戶的頁面里執行，這樣就可以獲取用戶的 Cookie 等資料資訊，
當用戶打開黑客設定的專輯頁面時，服務器也會將這段惡意 JavaScript 代碼回傳給用戶，因此這段惡意腳本就在用戶的頁面中執行了，惡意腳本可以通過 XMLHttpRequest 或者 Fetch 將用戶的 Cookie 資料上傳到黑客的服務器，
2. 反射型 XSS 攻擊
在一個反射型 XSS 攻擊程序中，惡意 JavaScript 腳本屬于用戶發送給網站請求中的一部分，隨后網站又把惡意 JavaScript 腳本回傳給用戶，當惡意 JavaScript 腳本在用戶頁面中被執行時，黑客就可以利用該腳本做一些惡意操作，
這樣講有點抽象，下面我們結合一個簡單的 Node 服務程式來看看什么是反射型 XSS，首先我們使用 Node 來搭建一個簡單的頁面環境，搭建好的服務代碼如下所示：
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express',xss:req.query.xss });
});
module.exports = router;
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='https://www.cnblogs.com/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <div> <%- xss %> </div> </body> </html>
上面這兩段代碼，第一段是路由，第二段是視圖，作用是將 URL 中 xss 引數的內容顯示在頁面，我們可以在本地演示下，比如打開http://localhost:3000/?xss=123這個鏈接，這樣在頁面中展示就是“123”了（如下圖），是正常的，沒有問題的，
但當打開http://localhost:3000/?xss=<script>alert('你被xss攻擊了')</script>這段 URL 時，我們會發現用戶將一段含有惡意代碼的請求提交給 Web 服務器，Web 服務器接收到請求時，又將惡意代碼反射給了瀏覽器端，這就是反射型 XSS 攻擊，在現實生活中，黑客經常會通過 QQ 群或者郵件等渠道誘導用戶去點擊這些惡意鏈接，所以對于一些鏈接我們一定要慎之又慎，
另外需要注意的是，Web 服務器不會存盤反射型 XSS 攻擊的惡意腳本，這是和存盤型 XSS 攻擊不同的地方，
3. 基于 DOM 的 XSS 攻擊
基于 DOM 的 XSS 攻擊是不牽涉到頁面 Web 服務器的，具體來講，黑客通過各種手段將惡意腳本注入用戶的頁面中，比如通過網路劫持在頁面傳輸程序中修改 HTML 頁面的內容，這種劫持型別很多，有通過 WiFi 路由器劫持的，有通過本地惡意軟體來劫持的，它們的共同點是在 Web 資源傳輸程序或者在用戶使用頁面的程序中修改 Web 頁面的資料，
如何阻止 XSS 攻擊
我們知道存盤型 XSS 攻擊和反射型 XSS 攻擊都是需要經過 Web 服務器來處理的，因此可以認為這兩種型別的漏洞是服務端的安全漏洞，而基于 DOM 的 XSS 攻擊全部都是在瀏覽器端完成的，因此基于 DOM 的 XSS 攻擊是屬于前端的安全漏洞，
但無論是何種型別的 XSS 攻擊，它們都有一個共同點，那就是首先往瀏覽器中注入惡意腳本，然后再通過惡意腳本將用戶資訊發送至黑客部署的惡意服務器上，
所以要阻止 XSS 攻擊，我們可以通過阻止惡意 JavaScript 腳本的注入和惡意訊息的發送來實作，
接下來我們就來看看一些常用的阻止 XSS 攻擊的策略，
1. 服務器對輸入腳本進行過濾或轉碼
不管是反射型還是存盤型 XSS 攻擊，我們都可以在服務器端將一些關鍵的字符進行轉碼，比如最典型的：
code:<script>alert('你被 xss 攻擊了')</script>
// 過濾后
code:
這樣，當用戶再次請求該頁面時，由于<script>標簽的內容都被過濾了，所以這段腳本在客戶端是不可能被執行的，
除了過濾之外，服務器還可以對這些內容進行轉碼，還是上面那段代碼，經過轉碼之后，效果如下所示：
code:<script>alert(' 你被 xss 攻擊了 ')</script>
經過轉碼之后的內容，如<script>標簽被轉換為<script>，因此即使這段腳本回傳給頁面，頁面也不會執行這段腳本，
2. 充分利用 CSP
雖然在服務器端執行過濾或者轉碼可以阻止 XSS 攻擊的發生，但完全依靠服務器端依然是不夠的，我們還需要把 CSP 等策略充分地利用起來，以降低 XSS 攻擊帶來的風險和后果，
實施嚴格的 CSP 可以有效地防范 XSS 攻擊，具體來講 CSP 有如下幾個功能：
- 限制加載其他域下的資源檔案，這樣即使黑客插入了一個 JavaScript 檔案，這個 JavaScript 檔案也是無法被加載的；
- 禁止向第三方域提交資料，這樣用戶資料也不會外泄；
- 禁止執行行內腳本和未授權的腳本；
- 還提供了上報機制，這樣可以幫助我們盡快發現有哪些 XSS 攻擊，以便盡快修復問題，
因此，利用好 CSP 能夠有效降低 XSS 攻擊的概率，
3. 使用 HttpOnly 屬性
由于很多 XSS 攻擊都是來盜用 Cookie 的，因此還可以通過使用 HttpOnly 屬性來保護我們 Cookie 的安全，
通常服務器可以將某些 Cookie 設定為 HttpOnly 標志，HttpOnly 是服務器通過 HTTP 回應頭來設定的，
由于 JavaScript 無法讀取設定了 HttpOnly 的 Cookie 資料，所以即使頁面被注入了惡意 JavaScript 腳本，也是無法獲取到設定了 HttpOnly 的資料，因此一些比較重要的資料我們建議設定 HttpOnly 標志，
總結
好了，就介紹到這里，下面總結下本文的主要內容，
XSS 攻擊就是黑客往頁面中注入惡意腳本，然后將頁面的一些重要資料上傳到惡意服務器，常見的三種 XSS 攻擊模式是存盤型 XSS 攻擊、反射型 XSS 攻擊和基于 DOM 的 XSS 攻擊，
這三種攻擊方式的共同點是都需要往用戶的頁面中注入惡意腳本，然后再通過惡意腳本將用戶資料上傳到黑客的惡意服務器上，而三者的不同點在于注入的方式不一樣，有通過服務器漏洞來進行注入的，還有在客戶端直接注入的，
針對這些 XSS 攻擊，主要有三種防范策略，第一種是通過服務器對輸入的內容進行過濾或者轉碼，第二種是充分利用好 CSP，第三種是使用 HttpOnly 來保護重要的 Cookie 資訊，
當然除了以上策略之外，我們還可以通過添加驗證碼防止腳本冒充用戶提交危險操作，而對于一些不受信任的輸入，還可以限制其輸入長度，這樣可以增大 XSS 攻擊的難度，
本文轉載于:
https://juejin.cn/post/7146867780308959262
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555005.html
標籤：Html/Css
上一篇：前端vue 宮格組件提供常見九宮格選單組件，擴充性好，可切換九宮格 十二宮格 十五宮格
下一篇：返回列表