Setup
test.html
Code: Select all
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div style="background-image: url('images/direct.png'); height: 60px;">
<h1>Background image loaded via style attribute!</h1>
</div>
<div class="background-div">
<h1>Background image loaded via CSS!</h1>
</div>
</body>
</html
test.css
Code: Select all
.background-div {
background-image: url('images/css.png');
height: 60px;
}
Put css.png and direct.png under images folder.
Configure mod_headers using following -
Code: Select all
<Location /images/>
<IFModule mod_headers.c>
Header set Cache-Control "no-cache, must-revalidate"
</IFModule>
</Location>
Steps to reproduce
1. Load the page with clean cache
2. Reload the page
3. Update css.png
4. Reload the page
5. Reload the page
Expected results:
After step 4, updated image must be shown by browser.
Observed Results:
After step 4, image is not updated. After step 5, updated image is displayed.
Note that one step 2, browser sends conditional GET and receives status code 304 and does not fetch any content. On step 4 it sends conditional GET and does fetch the data, and does fetch the new content as the response code is 200. Despite having fetched the new contents it does not update the image. On step 5, conditional GET is sent and server sends status code 304 and still the browser now updates the image.