HTTP Cache : Last-Modified, cache-busting

En résumé : forcez un cache court ou faites du cache-busting

Préambule : recharger une page ?

Bouton ↻

Firefox : revalidations de chaque ressource (request headers "Cache-control: max-age=0" + If-Modified-Since + If-None-Match)
sauf le CSS depuis 2020 !! (depuis Firefox 79, et c'est un effet de bord, pas un choix)
⇒ pour éviter le reload des ressources, utilisez "Cache-Control: immutable, ..." (doc, raison)
Chromium : revalidation de la page html principale (ce changement de comportement date de 2017 : résumé et liens, annonce officielle, détails par Facebook, issue à propos de "immutable").
⇒ pas de revalidation des images/CSS/JS !!

Force-reload

ignore le cache (request header "Cache-Control: no-cache")
uniquement accessible via un raccourci clavier : Ctrl-Shift-R ou Ctrl-F5 (aussi Shift-F5 sur Chrome)
Firefox perd la position du scroll en cours

NB : les requêtes asynchrones (notamment Ajax) sont toujours prises en cache.

Cache HTTP

Avec Cache-Control, c'est globalement clair (NB : remplace Pragma et Expires) :

Cache-Control: max-age=3600 : mettre en cache 1h
Cache-Control: no-store, no-cache : ne pas mettre en cache

... mais en l'absence de Cache-Control (et de Expires) ?

si Last-Modified, heuristique 10% (détails) (avec un max à 7 jours pour Firefox : explications, upstream issue)
sinon pas de mise en cache (ou plutôt mise en cache... avec expiration immédiate, sauf XHR avec MSIE, issue)

Contenu dynamique

PHP : cache désactivé dès que session_start (ref)
Node.js Express : aucun header de cache par défaut
Java Servlet : aucun header de cache par défaut
- Spring Web MVC : rien par défaut, configurable
- Spring Security : désactive le cache

Possibilité bien sûr d'ajouter des headers Cache-Control.

Last-Modified et heuristique 10% par l'exemple

Renater utilise le logo «

» sur son site principal. Il peut aussi l'utiliser sur d'autres sites pour espérer centraliser cette resource.

le navigateur fait une requête :

GET https://www.renater.fr/sites/default/files/inline-images/logo_RENATER-2.svg
HTTP/1.1 200 OK
Date: Mon, 29 Nov 2021 16:18:18 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Thu, 29 Nov 2018 14:53:24 GMT

⇒ le fichier est vieux de 3 ans
⇒ le navigateur va mettre en cache 10% de 3 ans = ~3 mois.

mi-décembre, Renater modifie le fichier.
⚠ les requêtes vers cette URL vont renvoyer le fichier en cache.

Solutions :

demandez à vos utilisateurs de faire un Ctrl-Shift-R 🤪
modifiez l'URL dans les pages Web : mettre logo_RENATER-2.svg?v=3 🥱
abandonnez, mais s'assurer de forcer un temps de mise en cache pour la prochaine fois 😷

Fichiers statiques

Dans la majorité des cas, Last-Modified est renvoyé, sans permettre de configurer un temps de cache 😢

Apache (cf default_handler() > ap_set_last_modified() )
⚠ mais aussi avec mod_auth_cas/mod_shib ⇒ mis en cache (navigateur, proxies...)
Nginx (cf ngx_http_header_filter() qui renvoie "last_modified_time" set par ngx_http_static_handler())
Java Tomcat (doc, code)
Python Django (déconseillé de l'utiliser en prod, code)
Rappel : PHP & Python utilisent Apache/Nginx pour les fichiers statiques (mais peuvent aussi les servir dynamiquement)

Certains font des choix par défaut intéressant

Java Vaadin : code

D'autres framework laissent le programmeur choisir

Node.js Express.js : API
Spring Web MVC : API

Forcez une durée de mise en cache !

⚠ avec les directives "expires" de Nginx/Apache, il y a le risque de forcer le cache pour une réponse qui ne serait pas caché sans cela.

solution générique Apache

Header setifempty Cache-Control "max-age=3600" "expr=-n resp('Last-Modified') && -z resp('Expires')"

solution générique Nginx

header_filter_by_lua_block {
    if (not ngx.header["Cache-Control"] and not ngx.header["Expires"] and ngx.header["Last-Modified"]) then
        ngx.header["Cache-Control"] = "max-age=3600"
    end
}

Faites du cache-busting !

Exemples

logo_RENATER-2.svg?v=3
/js/GlobalUi.js?version=1.15.3-SNAPSHOT
/webjars/pdfjs-dist/2.9.359/build/pdf.js
/assets/index.dd791d5c.js

Solutions techniques

à la main : Esup-Pod, esup-signature (html, js) moodle (css, js, combo)
spring-webmvc : mécanisme de cache-buster, notamment avec JSP ou thymeleaf (exemple, utilisé dans CAS)

webpack/vite/... : cache-buster + bundler + minify, phase de compilation

exemple le index.html suivant :

<link rel="stylesheet" href="./src/assets/lib.css">
<link rel="stylesheet" href="./src/assets/app.css">
...
<script type="module" src="/src/main.js"></script>

devient

<script type="module" crossorigin src="/assets/index.dd791d5c.js"></script>
<link rel="modulepreload" href="/assets/vendor.00faadaa.js">
<link rel="stylesheet" href="/assets/index.0c658012.css">

vaadin : css géré spécifiquement avec cache-buster (thème)

Détails

Divers

Cache serveur

Apache/Nginx/HAProxy/Træfik/Envoy/... permettent la mise en cache.

Cela fonctionne facilement... si le header Cache-Control est bien positionné.
Dans le cas inverse, il est possible de forcer des choses, mais c'est relativement compliqué (ex pour Nginx)

Pas évoqué

rev-proxy caching, notamment avec Vary
- https://jakearchibald.com/2014/browser-cache-vary-broken/
- difficile sur drupal car "Cache-control: max-age=1800, private" et "Vary: Cookie,Accept-Encoding"
"Clear-Site-Data: cache" bof comme solution! (et ne marche pas sur Safari)

Réfs :

Conclusion

Forcez une durée de mise en cache

Faites du cache-busting