Using your browser as a dev tool to test HEAD requests

A HEAD requests check to see if the resource exists, and what kind of data it might provide.  The key to a HEAD requests is the response contains no data, headers only.

I’ve been noticing HEAD requests resolving as 404 errors in one of my application log files. I think these are coming from sites like Facebook, when a user posts a link to a page in the app, FB will initiate a HEAD request before doing a GET. FB is pretty clever about pulling in the contents of a linked page and showing the title, summary, and a mini gallery.

To fix these issues, what I do is go into the route file and add the proper responses.  Here is an example using the PHP FatFree framework. Note the HEAD statement in the first part of the route:

F3::route('HEAD /page/@name', function() {
  // Call a function that does:
  // 1. Validate URL.
  // 2. If /page/@name is okay, you're done, send back no data.
  // 3. But, if /page/@name would normally throw a 404 
  //    then the HEAD response should also throw a 404.
}

At this point, how do I test that the HEAD route is working?

Well, it turns out you can use your browser as the testing tool.  This uses the XMLHttpRequest() object, so it will only work if you are already at the local dev URL, but it works perfect for me for what I’m trying to do.

Paste this into your JavaScript developer console:

testHEAD = function(url) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("HEAD", url, true); 
  xmlhttp.onreadystatechange=function() {
     if(xmlhttp.readyState==4) { 
       console.log(xmlhttp.getAllResponseHeaders());
     }
  }
  xmlhttp.send(null); 
}

Then run:

testHEAD('page/123');
// sub in whatever URL you really want to test

For more information, HTTP 1.1 Method Definitions Here:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

“The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response. The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.”

Note the keyword ‘SHOULD’ there, which means the content length header is not required – whew! That would be a lot of work for the server just to generate a page and toss it.

This technique has actually been around for a long time in browsers like Chrome and Firefox. I was inspired by Chris T’s response to this StackOverflow question:

http://stackoverflow.com/questions/1976442/how-do-i-send-a-head-request-manually-using-firefox