- XHR/Fetch是什么？
- 所引发的安全问题
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强制实施和安全标头设置
- 测试速率限制和防自动化攻击机制