Intercepting image load request of the browser

I would like to know if there is a way to intercept the image loading requests of a browser and add some request headers expected by the server.

The actual scenario is this. The web app sends an XHR to the server and completes an authentication handshake. All the subsequent requests have to include the auth header. 开发者_开发百科The images are broken because the browser does not send the headers for the image requests.

Thanks in advance.

You can request the image using AJAX with the appropriate headers. Then you must base64 encode the image binary and insert it into the DOM by setting

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

There is a way to intercept image requests in the browser: checkout the Capturing API in Mobify.js: https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/

No, there is not a way to do that, and it's a very good thing too.

(Well, there's no way to do it from your code. The browser owner can install a tool that alters requests if they so desire, of course.)

The fact that browsers issue HTTP requests for scripts and images in their own strict ways means that a site using XHR can prevent some kinds of CSRF attacks (cross-site request forgery) by having the server refuse certain requests if they don't include a special header that the site's own XHR code adds.

You can't control exactly what a browser does to the header with form posts, either.

The question itself is strange and I feel you're using the wrong approach in general.

But if anyone is still curious, nowadays this could be accomplished with Service Workers.

Below is how we did this

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

This is our Service Worker

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

Basically, this approach allows for intercepting any requests.

Service Workers can't communicate with your page scripts directly as they run separately and are isolated. But you can use postMessage for communication.