How to completely prevent image caching for a resource served via HTTP

Question

In a project, client-side in the browser, i dynamically create an <img>-tag and set the source to an image. It is served from apache2 on the host.

The user can then make changes and i sometimes need to reload the image (as the source on the server has changed). I do that by changing the src-attribute to the new image.

The problem is, the old (first) image remains in the cache and no further changes are ever reflected.

I did of course try to prevent caching by the regular means:

I change the URL of the source image on every reload, by adding a parameter to the url and setting its value to the current time. I checked to confirm and yes, every load actually requests a different URL from the server, but the image is still served as a cached version.

I'm returning a variety of headers to prevent caching. Here is what the response headers look like:

Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Cache-control: no-cache, no-store, must-revalidate
Connection: Keep-Alive
Content-Length: 48503
Content-Type: image/png
Date: Wed, 05 Sep 2018 15:51:08 GMT
Expires: 0
Keep-Alive: timeout=5, max=100
Pragma: no-cache
Server: Apache/2.4.25 (Debian)
Set-Cookie: locale=de; Domain=c.test; Path=/; Expires=Mon, 04 Mar 2019 15:51:08 GMT
Set-Cookie: session_id=563bbb7d216d4edf7aed7e38427e15aec584414a605df6d2481223f840bf13f7; Domain=c.test; Path=/

A requested URL looks like this:

/event/590c713b5fd3197a0a16c851/reg/data/streamThumbnail?file=93c180702fd9926d40f77dd19ae48cee.crop.jpg&t=0478533001536162394&dimensions=130x181

Unfortunately i am out of options. I tried debugging this by loading the image src directly in a new tab, making changes on the server and then reloading, but the image remains the same, even though it doesn't exist on the server anymore at all.

Can anyone point me in the right direction here? Does anyone know what is going on or what i've been missing?

I'm sorry i cannot provide any testing outlet for this, so i guess this one's up to the ones who have encountered this problem themselves.

Thank you.

Have you cleared your browser cache and checked that the latest image is displayed? If the image doesn't change, that would confirm that server side caching is the problem. Are you sure Apache isn't configured to cache files in memory? Have you tried completely disabling caching in Apache? — DisappointedByUnaccountableMod, Sep 05 '18 at 16:28
Actually, no. Not in apache. Is that done via VirtualHost config? — SquareCat, Sep 05 '18 at 16:48

score 0 · Answer 1 · answered Sep 07 '18 at 20:14

Tried this? Should work in both .htaccess, httpd.conf and in a VirtualHost

<filesMatch "\.(html|htm|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>

And optionally add the extension for the template files you are retrieving if you are using an extension other than .html for those.

stldoug · Answer 2 · 2018-09-07T20:15:30.933

You can do this easily client side, with adding a url query. i.e.

<img src="folder/my-image.jpg?cache=1">

Every time you want to refresh the image, increase the number on your cache variable. i.e. make it ?cache=2. A lot of people will use a date/time variable in this field to never allow caching.

EDIT: Okay, sorry, just realized you tried this. Another option is to use data-uri's. If you have the ability to read the image as source, you can use a data-uri in the image tag as a base64 hex string:

<img src="data:image/gif;base64,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">

I believe there's a size limit on some older versions of Internet Explorer.

EDIT 2: If you are truly looking for a HTTP HEADER option, did you also try the "Expires" value. If I recall, you have to use a negative value, i.e. Expires: -1. There's also a few other cache controls you can play with, like Cache-Control: max-age=0 or Cache-Control: must-revalidate.

EDIT 3: Ok, you did try the Expires as well, BUT you are using ZERO. You need to change this to -1. Full explanation here:

HTTP Expires header values "0" and "-1"

Sheesh... not sure where my mind is at. Hopefully something here works for you. — stldoug, Sep 07 '18 at 20:18

How to completely prevent image caching for a resource served via HTTP

2 Answers2