问题
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.
回答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]" />
回答2:
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.
回答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/
来源：https://stackoverflow.com/questions/6707509/intercepting-image-load-request-of-the-browser