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.

Thanks in advance.

Answer 1

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

Answer 2

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/