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

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

这是我们的 Service Worker

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

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

Service Worker 无法直接与页面脚本通信，因为它们单独运行且相互隔离。但您可以使用 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 的站点可以通过让服务器拒绝某些不包含站点自己的 XHR 代码添加的特殊标头的请求来防止某些类型的 CSRF 攻击（跨站点请求伪造）。

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