Is it possible to handle http-header info at front-end? (using JavaScript)

Question

I searching the way how to detect the img-file was not found(404... or 50x)

so I did figure out what img-file is, like below steps..

1. parse the html and css code, then catch the URL
2. make img tag temporally, assign src=URI
3. check the attribute(width, height), if it is 0 value, it would be not found.

finally, I wanna catch the remote address, if so I can figure out what server has problem !

so I thought that if i can handle http-header at front-end, it could be awesome !

and I also considered using Ajax, but it require additional running time, then can make bad web-performance.....

So ! In short, it is my real question. Is it possible to handle http-header info at front-end? (using JavaScript, not using any tools like chrome-dev-tool, wiresharks and so on..)

![How can I handle this data?(status, remote-address and so on...)][1]

Answer 1

No, it is not possible to retrieve the IP address from the HTTP headers. Reason being, the remote address is not part of the HTTP request or response headers. Your only option is making an ajax request to a DNS resolution API, and use that to resolve the host-name to an IP address. Here is an example using Statdns.com:

function hostToIp(host, callback) {
    function onComplete() {
        var res = JSON.parse(this.responseText);
        var ip = res.answer[0].rdata;
        callback(ip);
    }
    var oReq = new XMLHttpRequest();
    oReq.onload = onComplete;
    oReq.open("GET", "http://api.statdns.com/" + host + "/a", true);
    oReq.send();
}

console.time('resolve ip');
hostToIp('google.com', function(res){
    document.write(res);
    console.timeEnd('resolve ip');
});

As you can see, the request typically resolves in under 300ms, and is non-blocking. So I don't think it will negatively impact performance.