Intercepting image load request of the browser

Question

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.

Scrimmage

Surely this is what your auth cookie is for? – Oswaldooswalt

You should probably use a cookie instead of these "auth headers" – Barcelona

Answer 1

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.

Dominiquedominium

Answer 2

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]" />

Doorbell

performance goes down, if there are multiple images – Gaggle

Answer 3

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/

Beckiebeckley

Answer 4

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.

Horologist

I don't know if that answer was true in 2011 when it was posted, but now it is definitely possible. You can inject script from an extension into the webpage and monkey patch functions. – Egeria

@Egeria in the answer it clearly says "the browser owner can install a tool that alters requests if they so desire", and that refers to browser extensions. – Horologist