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

Answer 1

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/

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

Answer 3

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.