使用 JavaScript 添加自定义 HTTP 标头答案

【问题标题】：Adding custom HTTP headers using JavaScript使用 JavaScript 添加自定义 HTTP 标头
【发布时间】：2010-10-09 13:04:21
【问题描述】：

在 HTML 页面上，单击图像（“img”）或锚点（“a”）标签的链接时，我想为 GET 请求添加自定义标头。这些链接通常用于下载动态内容。这些标头可以是 SAML 标头或自定义应用程序特定标头。

是否可以通过 JavaScript 添加这些自定义标头？或者如果我通过XMLHttpRequest添加这些，如何实现下载功能？

此要求仅适用于 IE6 或 7。

【问题讨论】：

我也想做同样的事情，例如，如果您想从需要在 GET 请求中进行身份验证标头的服务获取图像。

标签： javascript http-headers

【解决方案1】：

如果您使用的是XHR，那么setRequestHeader 应该可以工作，例如

xhr.setRequestHeader('custom-header', 'value');

附：您应该使用 Hijax 来修改锚点的行为，以便在由于某种原因 AJAX 无法为您的客户工作（例如页面上其他地方的脚本被破坏）时它可以工作。

【讨论】：

【解决方案2】：

我认为最简单的方法是使用查询字符串而不是 HTTP 标头。

【讨论】：

+1。即使使用 XMLHttpRequest，设置标头也不是完全可靠的。寻找参数。
如果你使用 SSL 并且你发送的信息是敏感的，你不应该把它放在查询字符串中，因为它不会被加密。只有 http 消息体被加密，因此在 header 中更安全
@JamesReategui 这不正确：URL 在传输过程中被加密。潜在的安全问题是端点（在日志或书签或历史记录中）中的秘密 URL 的持久性，而不是在传输中。
抱歉，没有仔细检查。但是，是的，正如您提到的，这是一个潜在的安全问题。此外，不符合 OWASP。
详细说明。请

【解决方案3】：

从浏览器内部向请求添加标头的唯一方法是使用 XmlHttpRequest setRequestHeader 方法。

将此与“GET”请求一起使用将下载资源。诀窍就是以预期的方式访问资源。从表面上看，您应该能够允许 GET 响应在短时间内缓存，因此导航到新 URL 或使用 src url 创建 IMG 标记应该使用来自先前“GET”的缓存响应。然而，这很可能会失败，尤其是在 IE 中，这在涉及缓存的情况下可能有点自成一格。

最后我同意 Mehrdad，使用查询字符串是最简单和最可靠的方法。

另一个古怪的选择是使用 XHR 向 URL 发出请求，表明您打算访问资源。它可以使用会话 cookie 进行响应，该会话 cookie 将由后续对图像或链接的请求携带。

【讨论】：

【解决方案4】：

如前所述，最简单的方法是使用查询字符串。

但如果您不能，出于安全原因，您应该考虑使用 cookie。

【讨论】：

您能否解释或指出有关如何使用 cookie 来实现此目的的资源？

【解决方案5】：

在 2021 年，这可以通过 Service Workers 完成。

首先，您必须在您的页面上注册一个 Service Worker。

// index.html
window.addEventListener('load', function () {
    navigator
        .serviceWorker
        .register('/service-worker.js');
});

在 Service Worker 中，通过调用 WindowOrWorkerGlobalScope.fetch() 方法捕获、修改和转发请求。

// service-worker.js
self.addEventListener('fetch', function (event) {
    event.respondWith(async function () {
        let headers = new Headers()
        headers.append("X-Custom-Header", "Random value")
        return fetch(event.request, {headers: headers})
    }());
});

请注意，某些网络浏览器不会在开发者控制台中显示修改后的请求。在这种情况下，可以使用 tcpdump、Wireshark 等工具或在服务器日志中观察请求。

【讨论】：