David Cilley's AJAX Imaging Blog

Setting the Cacheability of images in the WebImageViewer

Today I was asked a rather interesting question:
How do you set the HTTP Cache-Control header on images grabbed by the WebImageViewer control?

There isn't a configurable option in the WebImageViewer control for this, (maybe there should be) so we will have to try to tackle this problem from outside the methods that serve the image to the client.

At first, I thought that I could use the HTTP Headers section in the IIS Properties.  When I checked "Enable Content Expiration" and set it to "Expire Immediately", all normal images had the expiration header, but images served from a querystring still had the default: "private".  It doesn't look like this method would work for us here.

Since all image requests from the WebImageViewer go through the parent page using a querystring, we could set the headers in the parent page.  There is a problem with this though, Response.Clear() will clear out the headers too, (as it should) so we'll need to execute some code after the Response stream is cleared, or we'll lose all our changes when the image is served.

I went through the WebImageViewer's control execution lifecycle and tried to find a spot where I could insert a snippet of code after the Response stream was cleared.  A while back we added an event called StreamViewImage to fire when the viewable image area is grabbed from the server.  It was originally implemented so that you could add a watermark to the outbound image before it was sent.  It also turns out that this is the perfect spot to make this header change.  Here's how I did it:

In the property grid, I set the WebImageViewer's EnableClientEvents property to true.  This basically moves the execution of the image grab from Init to Load, allowing us to use predefined event handlers and other objects on the Page.

Next, I created an event handler that added the header that I wanted to the parent page:
private void Add_Header(object sender, System.EventArgs e)
{
   this.Page.Response.Cache.SetCacheability(HttpCacheability.NoCache);
}

The last thing I needed to do was add that event handler to the WebImageViewer's StreamViewImage event.

After I was finished, I scrolled around an image using the WebImageViewer control.  When I looked in the browser's cache, the images weren't there.  I then used Fiddler to check the HTTP headers, and here's what they read: