Can Javascript be used to detect a redirected image SRC (in any popular browser)?

Question

I\'m guessing nope, but you never know.

1. Browser loads
2. example.net redirects lolca

Answer 1

With pure javascript, it's impossible. But with help of server side script (such PHP), it can be easily done. I've made my own free service at http://finalurl.web44.net, useful to resolve simple URL redirection.

To use it, include finalURL.js from within HEAD section, i.e.

<script src="http://finalurl.web44.net/finalURL.js"></script>

To use it, call finalURL( url_to_resolve ); function, i.e.

var actualURL = finalURL( 'http://dummy.com/beforeRedirectURL.jpg' );

If you want to host the back-end PHP code by yourself, check following post: Find redirected img source

Answer 2

the answer to your question Can Javascript be used to detect a redirected image SRC (in any popular browser)? is simple as you said , nope! because http doesnt have any option for identifying the redirection. This is similar to detecting url redirection, which is simply a limitation for javascript.

Answer 3

example .net redirects lolcat.png to http://static.example.net/bandwidth-exceeded.gif

What is lolcat.png? I'm guessing its a Handler and essentially it just does this:

<% Response.Redirect("bandwidth-exceeded.gif?redirect=true") %>

If so, have your tried Helicon's ISAPI URL Rewrite, create a regex rule to append a query string param onto the end of the image's URL

Answer 4

I don't believe it's possible to detect a redirect with JavaScript without some previous knowledge of the image properties. The src property of the current DOM will remain the same regardless of any redirect, so that option is out.

I would suggest that you create a proxy script on your server that acts as a go between. For example, your image tag would look something like (with suitable URL encoding, of course):

<img src='/proxy?src=http://example.com/image.png' />

Your proxy script would inspect the headers for redirects before serving the image. It isn't fool proof - but it could allow you to, for example, cache the image on first load so you don't get bandwidth limit errors from the other machine.

If it is just for your own purposes, you might be able to use an ActiveXObject within Internet Explorer to inspect the image in more detail. Can't help you on the specifics though.

I assume that you're permitted to hotlink/cache the image with the permission of the other party.

Answer 5

I checked with the following code:

var a=new Image(); a.src='http://example.com/image.png';
alert( a.width );

which in this case returns 0 since the image doesn't exist.

On link text I found quite a few properties that might be worth checking out. And if that fails you might want to look into jQuery and AJAX.

Edit:
_{tested on firefox firebug}

var a=new Image(); 
a.src='http://l.yimg.com/g/images/photo_unavailable_m.gif';
console.log(a.width); // the image exists and returns 240

var b=new Image(); 
b.src='http://farm3.static.flickr.com/2560/4098180849_729ef4f6ef_m.jpg';
console.log(b.width); // the image does not exist (re-direct) and returns 0