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强制实施和安全标头设置
测试速率限制和防自动化攻击机制

XHR/Fetch请求介绍与安全测试

XHR/Fetch是什么？

所引发的安全问题