Caching images with different query strings (S3 signed urls)

I'm trying to figure out if I can get browsers to cache images with signed urls.

What 开发者_Go百科I want is to generate a new signed url for every request (same image, but with an updated signature), but have the browser not re-download it every time.

So, assuming the cache-related headers are set correctly, and all of the URL is the same except for the query string, is there any way to make the browser cache it?

The urls would look something like:

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 set the e-tags to be an md5sum, so will it at least figure out it's the same image at that point?

My other option is to keep track of when last gave out a url, then start giving out new ones slightly before the old ones expire, but I'd prefer not to deal with session info.

The browser will use the entire URL for caching purposes, including request parameters. So if you change a request parameter it will effectively be a new "key" in the cache and will always download a new copy of that image. This is a popular technique in the ad-serving world - you add a random number (or the current timestamp) to the end of the URL as a parameter to ensure the browser always goes back to the server to make a new request.

The only way you might get this to work is if you can make the URL static - i.e. by using Apache rewrite rules or a proxy of some sort.

I've been having exactly the same issue with S3 signed URLs. The only solution I came up with is to have 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 during April I set the expiry on May 10th. All URLs signed in June I set to expire on July 10th. This means the signed URLs will be identical for the whole month.

Just stumbled on this problem and found a way to solve it. Here's what you need to do:

1. Store first url string (in localStorage for example);
2. When you receive img url next time just check if their main urls match (str1.split('?')[0] === str2.split('?')[0])
3. If they do, use the first one as img src attribute.

Hope it helps someone.