How to prevent popping up a login dialogue using a malicious hotlinked image and HTTP Basic Auth header?

I think I know what's happening with you. Actually, that's exactly what I do with the image in my "about me" section in my StackExchange profiles. It's a .php file that grabs some information about the visitor (IP address, browser type, whether the visitor made the smiley happy or not, etc.). I simply rewrote the URL to show two different images that are in fact the same .php file.

If you allow people to hotlink files (especially ones automatically requested by the browser, such as images), then there's nothing you can do about this. The user's browser will connect to the other server (on which the image is hosted) and it will request the image from there. To the browser, the link genuinely points to a .png image. It cannot tell the difference, neither can your server/site.

This is a social engineering attack in which the attacker hopes that the user uses a browser that pops out an authentication dialogue for mixed contents. Sadly, Firefox is one of those browser. In a lot of the cases, if the user is presented with a login dialogue on site A that is actually requested for content loaded from site B, the user will very likely enter site A's credentials (your site) and have his account stolen.

The solution: You'll have to disallow hotlinking contents of such sort and re-upload any hotlinked images to your server and then serve them in your website from there.

(As of March 2018, Firefox is no longer affected by this issue and like Chrome will only show the popup of the loaded resources is on the same domain)

This is called a 403 phishing attack, and the only way you can prevent it is to prevent user-generated-content from containing links to external resources that are rendered on your pages, like images. Fortunately, it's not a particularly common attack, but it can be concerning, particularly if the credentials users use on your site are more likely than average to be of high value.

You may be able to find a middle ground, like white-listed known external sources that an attacker can't control like imgur or flickr, for instance. If you want to allow resources to be sourced from arbitrary domains however, then you will always be vulnerable to this attack, at least until the browser manufacturers give us some new options for controlling different origin HTTP authentication challenges.