拦截浏览器的图片加载请求

Question

我想知道是否有办法拦截浏览器的图片加载请求，并添加一些服务器期望的请求头。

实际场景是这样的：Web应用程序向服务器发送XHR并完成身份验证握手。所有后续请求都必须包含 auth 标头。由于浏览器未发送图像请求的标头，图像已损坏。

Answer 1

这个问题本身很奇怪，我觉得你总体上使用了错误的方法。

但是如果有人仍然好奇，现在这可以通过 Service Workers 来完成。

以下是我们的做法

// Register the service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register("/sw.js").then((registration) => {
    // Registration was successful
  }).catch((error) => {
    // Registration failed
  });
}

这是我们的服务人员

self.addEventListener('fetch',(event) => {
  if (/\.jpg$|.png$/.test(event.request.url)) {
    console.log("Image request: ", event.request.url);
  }
});

基本上，这种方法允许拦截任何请求。

Service Workers 无法直接与您的页面脚本通信，因为它们单独运行且相互隔离。但您可以使用

postMessage

进行交流。

Answer 2

您可以使用带有适当标头的 AJAX 来请求图像。然后你必须对图像二进制进行base64编码并通过设置将其插入到DOM中

<img src="data:image/png;base64,[base64 encoded image]" />

Answer 3

有一种方法可以在浏览器中拦截图像请求：查看 Mobify.js 中的 Capturing API： https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web /

Answer 4

不，没有办法做到这一点，但这也是一件非常好的事情。

（嗯，无法从你的代码中做到这一点。当然，浏览器所有者可以安装一个工具来更改请求，如果他们愿意的话。）

浏览器以自己严格的方式发出对脚本和图像的 HTTP 请求，这意味着使用 XHR 的站点可以通过让服务器拒绝某些不包含某些请求的请求来防止某些类型的 CSRF 攻击（跨站点请求伪造）网站自己的 XHR 代码添加的特殊标头。

您也无法准确控制浏览器对表单帖子标题的操作。