Tampermonkey中GM_xmlhttpRequest与fetch请求差异分析

背景介绍

Tampermonkey作为一款流行的用户脚本管理器，提供了GM_xmlhttpRequest API来实现跨域请求功能。然而，在实际使用中，开发者可能会发现GM_xmlhttpRequest与原生fetch API在某些场景下表现不一致，特别是在处理POST请求时。

问题现象

在Unsplash.com网站的实际案例中，开发者发现使用GM_xmlhttpRequest发送POST请求时返回403错误，而使用原生fetch API却能正常工作。经过深入排查，发现主要差异在于请求头中的Referer字段。

技术分析

1. Referer头字段的重要性

Referer是HTTP请求中的一个重要头字段，它指示了请求来源页面的URL。许多网站会利用这个字段进行安全验证，防止CSRF攻击或确保请求来自预期的页面。

2. GM_xmlhttpRequest的默认行为

Tampermonkey的GM_xmlhttpRequest在设计上出于安全考虑，默认不会自动添加Referer头字段。这是因为：

• 脚本可能在任何页面运行，无法确定合适的Referer值
• 避免意外泄露用户浏览历史
• 提供更可控的请求环境

3. fetch API的默认行为

相比之下，原生fetch API会自动添加Referer头字段，其值为当前页面的URL。这种行为更符合常规网页请求的模式，但可能带来隐私和安全方面的考虑。

解决方案

当需要在Tampermonkey脚本中模拟浏览器原生行为时，可以手动添加Referer头：

GM_xmlhttpRequest({
  method: "POST",
  url: "https://example.com/api",
  headers: {
    "Referer": location.href,
    "Content-Type": "application/json"
  },
  data: JSON.stringify({key: "value"}),
  onload: function(response) {
    console.log(response);
  }
});

最佳实践建议

1. 明确设置必要头字段：特别是Content-Type和Referer等关键头字段
2. 保持与目标API的一致性：观察浏览器原生请求的头字段设置
3. 考虑安全因素：谨慎处理可能包含敏感信息的头字段
4. 测试验证：使用开发者工具比较请求差异
5. 错误处理：对403等状态码进行专门处理

总结

Tampermonkey的GM_xmlhttpRequest与原生fetch API在设计理念上存在差异，这导致了它们在头字段处理上的不同行为。理解这些差异有助于开发者编写更健壮的用户脚本。在实际开发中，应根据目标API的要求和安全性考虑，合理配置请求参数，确保脚本的可靠运行。