XHR/Fetch是什么？
XHR/Fetch 都是瀏覽器與服務器進行數據通信（即 API 調用）的兩種主要技術。屬于前端技術分類。
簡單來說，它們都是用來實現 AJAX（Asynchronous JavaScript and XML）理念的技術，即在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁內容。
XHR和Fetch功能都是一樣的，但Fetch是后來新設計的，作為替代 XHR 的新 Web API 踐行標準。它提供了一種更簡潔、更符合邏輯的方式來發起網絡請求，并使用 Promise 作為處理異步操作的核心，避免了回調地獄。可以理解Fetch就是升級版的XHR。
誤解：AJAX 雖然名字帶了個XML，但是它不光只能交互XML，該技術也常用于交互JSON、Text數據。
XHR長什么樣？
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // true 表示異步
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 請求成功，處理響應數據
var data = JSON.parse(xhr.responseText);
console.log(data);
} else {
// 請求失敗（如 404, 500）
console.error('請求失敗:', xhr.statusText);
}
};
xhr.onerror = function() {
// 網絡錯誤等
console.error('請求發生錯誤');
};
xhr.send();
-
其實就是在JS代碼里建了一個請求接口的函數，通過事件去觸發這個函數的執行。
- 代碼里需要創建一個XMLHttpRequest對象： xhr;
-
當調用xhr.send()時，瀏覽器會在后臺線程中處理網絡請求，而不會阻塞JavaScript主線程。
-
當XHR請求完成時，瀏覽器會將回調函數放入事件隊列，等待JavaScript主線程空閑時執行。
為什么值得被調試工具標記出來？
看到一個請求被歸類為 XHR：
- 意味著這個請求是由 XMLHttpRequest 對象發起的。
- 或者，也可能是由基于 XHR 封裝的庫（如 jQuery 的 $.ajax）發起的。
看到一個請求被歸類為 Fetch：
- 表示這個請求是由現代的 fetch() API 發起的。
為什么工具要區分它們？
-
方便篩選
主要是為了方便開發者調試和篩選。如果你知道你的代碼中使用了 fetch()，你就可以直接在篩選器中點擊 “Fetch” 來快速找到所有相關的請求，而過濾掉圖片、CSS 等無關資源。反之，如果你在用老的項目或庫，可以篩選 “XHR”。 -
了解該站點請求的資源；
所引發的安全問題
XHR (XMLHttpRequest) 和 Fetch API 是現代Web應用中進行異步通信的主要方式，方便了開發者進行站點功能開發，但如果開發者如果使用不慎，它們同時也會引入了多種安全風險。安全測試者需要關注請求中可能存在如下問題：
-
CSRF (跨站請求偽造)
攻擊者誘使用戶在不知情的情況下執行非本意的操作。
風險：用戶數據被修改、權限被濫用 -
XSS (跨站腳本攻擊)
通過注入惡意腳本，在用戶瀏覽器中執行。
風險：會話劫持、敏感信息竊取 -
CORS錯誤配置
跨域資源共享策略配置不當，導致敏感數據泄露。
風險：數據泄露、未授權訪問 -
敏感信息泄露
API響應中包含敏感數據（令牌、個人信息等）。
風險：數據泄露、權限提升 -
不安全的直接對象引用 (IDOR)
未正確驗證用戶對資源的訪問權限。
風險：未授權數據訪問 -
業務邏輯漏洞
應用程序邏輯缺陷，如重復提交、順序繞過等。
風險：業務功能被濫用
Checklist：
- 檢查是否實施了CSRF保護（Token、同源驗證等）
- 驗證輸入輸出過濾，防止XSS攻擊
- 檢查CORS配置是否合理（Origin、Methods、Headers）
- 驗證身份認證和授權機制是否健全
- 檢查是否暴露敏感信息（令牌、密鑰、個人信息）
- 測試參數篡改和IDOR漏洞
- 驗證業務邏輯合理性（重復請求、順序繞過等）
- 檢查錯誤處理是否泄露敏感信息
- 驗證HTTPS強制實施和安全標頭設置
- 測試速率限制和防自動化攻擊機制
浙公網安備 33010602011771號