如何通过 JavaScript 访问 HTTP 请求标头字段？

Question

我想在客户端 JavaScript 中捕获 HTTP 请求标头字段，主要是 Referer 和 User-Agent。 我如何访问它们？

---

Google Analytics 设法通过 JavaScript 获取数据并将其嵌入到您的页面中，因此这绝对是可能的。

相关：
在 JavaScript 中访问网页的 HTTP 标头

Answer 1

如果您想访问引荐来源网址和用户代理，这些可用于客户端 JavaScript，但不能直接访问标头。

要检索引荐来源网址，请使用

document.referrer

。
要访问用户代理，请使用

navigator.userAgent

。

正如其他人所指出的，HTTP 标头不可用，但您特别询问了引用者和用户代理，它们可以通过 Javascript 获得。

Answer 2

几乎根据定义，客户端 JavaScript 并不位于 http 请求的接收端，因此它没有可读取的标头。 最常见的是，您的 JavaScript 是 http 响应的结果。 如果您尝试获取生成响应的 http 请求的值，则必须编写服务器端代码以将这些值嵌入到您生成的 JavaScript 中。

让服务器端代码生成客户端代码有点棘手，所以请确保这是您所需要的。例如，如果您想要用户代理信息，您可能会发现获取 JavaScript 为浏览器检测提供的各种值就足够了。 从 navigator.appName 和 navigator.appVersion 开始。

Answer 3

这可以通过 Javascript 访问，因为它是加载文档的属性，而不是其父文档的属性。

这是一个简单的例子：

<script type="text/javascript">
  document.write(document.referrer);
</script>

PHP 中同样的事情是：

<?php echo $_SERVER["HTTP_REFERER"]; ?>

Answer 4

Referer 和 user-agent 是请求头，而不是响应头。

这意味着它们是由浏览器或您的ajax调用（您可以修改值）发送的，并且它们是在您获得HTTP响应之前决定的。

所以基本上你不是要求 HTTP 标头，而是要求浏览器设置。

从 document.referer 和 navigator.userAgent 获取的值可能不是实际的 header，而是浏览器的设置。

Answer 5

从 JavaScript 获取标头的一种方法是使用 WebRequest API，它允许我们访问源自 http 或 websockets 的不同事件，接下来的生命周期是这样的： WebRequest 生命周期

因此，为了访问页面的标题，应该像这样：

    browser.webRequest.onHeadersReceived.addListener(
     (headersDetails)=> {
      console.log("Request: " + headersDetails);
    },
    {urls: ["*://hostName/*"]}
    );`

问题在于，为了使用这个API，它必须从浏览器执行，即浏览器对象指的是浏览器本身（选项卡、图标、配置），并且浏览器确实有权访问所有的Request和任何页面的响应，因此您必须向用户请求权限才能执行此操作（必须在清单中声明权限才能让浏览器执行它们）

并且作为浏览器的一部分，你失去了对页面的控制，也就是说，你不能再操作 DOM（不是直接），因此要再次控制 DOM，可以按如下方式完成：

    browser.webRequest.onHeadersReceived.addListener(
        browser.tabs.executeScript({
        code: 'console.log("Headers success")',
    });
});

或者如果你想运行大量代码

    browser.webRequest.onHeadersReceived.addListener(
        browser.tabs.executeScript({
        file: './headersReveiced.js',
    });
});

此外，通过控制浏览器，我们可以注入 CSS 和图像

文档：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onHeadersReceived

Answer 6

我会想象谷歌会抓取一些服务器端的数据 - 请记住，当一个页面加载到您的浏览器中时，其中包含谷歌分析代码，您的浏览器会向谷歌的服务器发出请求； Google 可以通过这种方式以及通过页面中嵌入的 JavaScript 来获取数据。

Answer 7

在引号内键入您想要的任何其他服务器变量名称。