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();

1. 其实就是在JS代码里建了一个请求接口的函数，通过事件去触发这个函数的执行。

   • 代码里需要创建一个XMLHttpRequest对象： xhr;

2. 当调用xhr.send()时，浏览器会在后台线程中处理网络请求，而不会阻塞JavaScript主线程。

3. 当XHR请求完成时，浏览器会将回调函数放入事件队列，等待JavaScript主线程空闲时执行。

为什么值得被调试工具标记出来？

看到一个请求被归类为 XHR：

• 意味着这个请求是由 XMLHttpRequest 对象发起的。
• 或者，也可能是由基于 XHR 封装的库（如 jQuery 的 $.ajax）发起的。

看到一个请求被归类为 Fetch：

• 表示这个请求是由现代的 fetch() API 发起的。

为什么工具要区分它们？

1. 方便筛选
   主要是为了方便开发者调试和筛选。如果你知道你的代码中使用了 fetch()，你就可以直接在筛选器中点击 “Fetch” 来快速找到所有相关的请求，而过滤掉图片、CSS 等无关资源。反之，如果你在用老的项目或库，可以筛选 “XHR”。

2. 了解该站点请求的资源；

所引发的安全问题

XHR (XMLHttpRequest) 和 Fetch API 是现代Web应用中进行异步通信的主要方式，方便了开发者进行站点功能开发，但如果开发者如果使用不慎，它们同时也会引入了多种安全风险。安全测试者需要关注请求中可能存在如下问题：

1. CSRF (跨站请求伪造)
   攻击者诱使用户在不知情的情况下执行非本意的操作。
   风险：用户数据被修改、权限被滥用

2. XSS (跨站脚本攻击)
   通过注入恶意脚本，在用户浏览器中执行。
   风险：会话劫持、敏感信息窃取

3. CORS错误配置
   跨域资源共享策略配置不当，导致敏感数据泄露。
   风险：数据泄露、未授权访问

4. 敏感信息泄露
   API响应中包含敏感数据（令牌、个人信息等）。
   风险：数据泄露、权限提升

5. 不安全的直接对象引用 (IDOR)
   未正确验证用户对资源的访问权限。
   风险：未授权数据访问

6. 业务逻辑漏洞
   应用程序逻辑缺陷，如重复提交、顺序绕过等。
   风险：业务功能被滥用

Checklist：

• 检查是否实施了CSRF保护（Token、同源验证等）
• 验证输入输出过滤，防止XSS攻击
• 检查CORS配置是否合理（Origin、Methods、Headers）
• 验证身份认证和授权机制是否健全
• 检查是否暴露敏感信息（令牌、密钥、个人信息）
• 测试参数篡改和IDOR漏洞
• 验证业务逻辑合理性（重复请求、顺序绕过等）
• 检查错误处理是否泄露敏感信息
• 验证HTTPS强制实施和安全标头设置
• 测试速率限制和防自动化攻击机制