Geek Answers Handbook

Caching images using different query strings (S3-signed URLs)

I am trying to figure out if I can force browsers to cache images with signed URLs.

I want to create a new signed URL for each request (the same image, but with an updated signature), but the browser will not reload it every time.

So, assuming the headers associated with the cache are set correctly and the whole URL is the same except for the query string, is there any way to make the browser cache it?

The urls look something like this:

http://example.s3.amazonaws.com/magic.jpg?WSAccessKeyId=stuff&Signature=stuff&Expires=1276297463 http://example.s3.amazonaws.com/magic.jpg?WSAccessKeyId=stuff&Signature=stuff&Expires=1276297500

We plan to install e-tags as md5sum, since this will at least display this same image at this point?

My other option is to track when the last one gave out the URL, and then start issuing new ones before the old ones expire, but I would prefer not to deal with the session information.

+6
caching amazon-s3
source share
3 answers

The browser will use the entire URL for caching purposes, including request parameters. Therefore, if you change the request parameter, it will effectively represent a new "key" in the cache and will always load a new copy of this image. This is a popular method in the advertising world - you add a random number (or current timestamp) to the end of the URL as a parameter, so that the browser always returns to the server to create a new request.

The only way to get this to work is to make a static url i.e. using the Apache rewrite rules or some proxy server.

+4
source share

I had the same issue with S3 signed URLs. The only solution I came up with is that the URLs expire on the same day. This is not ideal, but at least it will provide caching for some time.

For example, all URLs signed in April I expire on May 10th. All URLs signed in June, I will expire on July 10th. This means that the signed URLs will be the same throughout the month.

+3
source share

Just stumbled upon this problem and found a way to solve it. Here is what you need to do:

  • Save the first line of url (e.g. localStorage );
  • When you get the img URL next time, just check if their main URLs str1.split('?')[0] === str2.split('?')[0] )
  • If so, use the first as the img src attribute.

Hope this helps someone.

+1
source share

More articles:


All Articles