Cybersalt Edge Cache Marker

Cybersalt Edge Cache Marker lets you put a full-page edge cache (a Cloudflare Cache Rule, Varnish, NGINX, Fastly or a similar CDN) in front of a Joomla site without losing front-end editing. When someone in an editing group logs in, the plugin sets a small marker cookie. Your cache rule skips the cache for any request that carries that cookie, so editors always get a fresh page with their edit buttons, and everyone else keeps getting the fast cached copy.

Without it, an edge cache serves editors the same stored page it serves everyone else. That page was rendered for a visitor who isn't logged in, so Joomla's edit icons, module edit buttons and page-builder edit overlays are missing, and changes don't show until the cache expires.

⤢ Click to enlarge

How it works

• On login. When a user logs in, on the site or in the administrator, the plugin checks their user groups. If they belong to one of the groups you've chosen, or to a group nested under one of them, the login response sets the marker cookie. By default that is cs_edit_session=1, for path /, with SameSite=Lax, and Secure when the request came in over HTTPS.
• On logout. Logging out of either the site or the administrator expires the cookie, so the browser drops it.
• Nothing else. The plugin doesn't change your pages, doesn't send cache headers and doesn't talk to your CDN. All it adds is that one cookie at login and its removal at logout.

Who gets the marker

⤢ Click to enlarge

Installing

1. Download the zip (plg_system_csedgecachemarker_v*.zip) from cybersalt.com.
2. In your Joomla admin go to System → Install → Extensions and upload the zip.
3. The plugin enables itself on a new install. The install message shows the cookie name and the Cloudflare expression to add, with a button that opens the plugin's settings.

The plugin registers Cybersalt's update server, so new versions show up under System → Update → Extensions like any other extension. Updating keeps your settings.

⤢ Click to enlarge

Setting up your edge cache

The plugin only sets the cookie. Your cache or CDN has to be told to skip the cache when the cookie is there. Use the snippet for your setup, with your own cookie name and value if you changed them.

Cloudflare

In the Cloudflare dashboard open Caching → Cache Rules, edit the rule that makes your pages eligible for cache, and add this to the end of its expression:

and not (http.cookie contains "cs_edit_session=1")

A complete expression that caches every page except the administrator, the API and editors' requests looks like this (use your own hostname):

(http.host eq "www.example.com"
 and not starts_with(http.request.uri.path, "/administrator")
 and not starts_with(http.request.uri.path, "/api")
 and not (http.cookie contains "cs_edit_session=1"))

Varnish

sub vcl_recv {
    if (req.http.Cookie ~ "cs_edit_session=1") {
        return (pass);
    }
}

NGINX proxy_cache

map $http_cookie $skip_cache {
    default 0;
    "~*cs_edit_session=1" 1;
}

# inside the location block that proxies to Joomla:
proxy_cache_bypass $skip_cache;
proxy_no_cache $skip_cache;

Fastly

In vcl_recv:

if (req.http.Cookie ~ "cs_edit_session=1") {
    return(pass);
}

Other CDNs

Any CDN or reverse proxy that can bypass its cache based on a request cookie will work. Look in its documentation for a "bypass cache on cookie" rule and match the cookie cs_edit_session with the value 1.

After enabling it on a live site

Editors who were already logged in when you installed the plugin don't have the cookie yet. They get it the next time they log in. Until then, a cache-everything rule can still store a page that was rendered for them, edit buttons included. So:

1. Add the rule to your cache or CDN.
2. Ask your editors to log out and log back in.
3. Purge the edge cache once, so any page that was stored while an editor was logged in is thrown away.

Checking it works

1. Log out of your site, open the browser's developer tools (F12) and go to the Network tab. Tick Preserve log.
2. Log in as an editor. Click the login request (the first request in the list) and look at its response headers. You should see Set-Cookie: cs_edit_session=1. You can also find the cookie under Application → Cookies.
3. Reload a page and click its request. On Cloudflare the cf-cache-status header should say DYNAMIC or BYPASS, depending on how your rule is written.
4. Open the same page in a private window, where you're not logged in, and reload it twice. cf-cache-status: HIT means visitors are getting the cached copy.

⤢ Click to enlarge

Settings

Open System → Manage → Plugins and search for Edge Cache Marker to find System - Cybersalt Edge Cache Marker.

⤢ Click to enlarge

Things to know

• The cookie is a hint, not a password. Anyone can add it to their own browser. All it does is skip the cache for that person's requests; it grants no access to anything.
• Sessions that time out. If a Joomla session expires without the user logging out, the cookie stays until the browser is closed (or until its lifetime runs out, if you set one). That browser just gets uncached pages in the meantime.
• HTTPS behind a proxy. The cookie is marked Secure when PHP sees HTTPS, or when the proxy in front sends X-Forwarded-Proto: https (Cloudflare does).
• Joomla's own page cache (the System - Page Cache plugin) never caches pages for logged-in users, so it needs no changes.

Troubleshooting

Getting help

Questions and bug reports are welcome through the Cybersalt support form or GitHub.

Cybersalt Edge Cache Marker is developed by Cybersalt Consulting Ltd. and released under the GNU General Public License v2 or later. Cloudflare, Varnish, NGINX and Fastly are trademarks of their owners; this plugin is not affiliated with or endorsed by any of them.