How to update the browser cache on log in / log out? - php

Question

I am using browser caching to speed up my PHP website. If a user visits a page before logging in and comes back to the page again after logging in, the page doesn't get updated with the contents that are only visible to the logged-in users.
i.e. The "Log in" link on the header menu doesn't change to the "Log out" link if the user visited the page before logging in. And if they visited a new page after logging in, the "Log out" link on the header menu doesn't change to the "Log in" link even after log out.
Here is a sample code
<h2>Contact Form</h2>
<form method="post" action="" onsubmit="">
<?php
if (logged_in() === false) {
?>
Name*
<input type="text" name="name" required />
Email*
<input type="email" name="email" required />
<?php
}
?>
Message*
<textarea name="message" rows="12"></textarea>
<input type="submit" name="contact" value="Send Message" />
</form>
It would be a huge help for me if someone could help me on this issue.
Thanks in advance!

Answer 1

I'll formulate the answer based on the comments we had together.
Check the HTTP headers sent to the browser
The HTTP headers sent by PHP, Apache, NGINX or whatever is running on your server or even passing through (such as reverse proxies like Varnish) will inform the browser what to do with the response.
If you have an Expire or Cache-Control HTTP header that says the page can be cached then effectively the browser won't retrieve the page again once you're logged in.
If you don't want your dynamic pages to be cached you have to set the HTTP header in adequation, ex: Cache-Control: no-cache, no-store, private
This could be done in PHP:
header('Cache-Control: no-cache, no-store, private');
It can also be done later in your web server config for page requests handled by PHP.
By the way, the web server can override what PHP says, so you have to check the output yourself with the browser. Even some other layers such as proxies could alter the HTTP headers.
The Vary HTTP header
If your server responds for a given URL in different ways then it has to inform that the response can vary depending on something. Typically, almost all assets should be compressed to gzip or brotli to save bandwidth. But not all browsers handle brotli compression. So when they do the request, they say what they can handle, ex: accept-encoding: gzip, deflate, br. Here, the browser can handle br = brotli.
The response will then be compressed with brotli to reduce the size. But if a reverse proxy caches it and someone else comes with a browser that doesn't handle brotli then we'll be in trouble. This is why the server should inform all caching layers that the response varies depending on the Accept-Encoding header by returning Vary: Accept-Encoding.
It's also common to have a language detection script for the homepage URL (if you hit the domain without a language path). In this case, we have to send Vary: Accept-Encoding, Accept-Language
For the HTML generated by PHP, it would also be important to say that the response can vary depending on the Cookie header. This is because a page for a specific user could be allowed for caching in private mode, let's say for a minute or more but it should not be messed up with another user's page.
So in PHP, you could do:
header('Vary: Accept-Language, Accept-Encoding, Cookie');
Caching static files and re-deploying them
In terms of performance, it's important to cache static data. So typically this should be done for all assets such as CSS, JS, images, favicons, fonts, etc. They are not dynamic so they can be stored for ages. This can be done by setting Cache-Control: max-age=31536000 for these static files.
If you change a CSS rule, the CSS file won't be re-downloaded by a visitor that already came before. But it's not a problem because your HTML can point to a new URL for this same static file. This can be done by adding a query parameter in the URL of this asset:
<?php
// Increment the version when you change your CSS.
// This can even be done automatically during deployment.
// You could also use the file timestamp or an hash instead.
$css_version = 3;
echo "<link rel=\"stylesheet\" media=\"all\" href=\"/css/theme.css?version=$css_version\" />\n";
Apache config for compressed static files
The idea to have a performance improvement is to compress all CSS and JS files. This can be done by minifying, aggregating and then compressing.
I use NodeJS and made some NPM scripts to do that. There's plenty of info about that on the web
Then you need to add a few rules in your .htaccess file:
RewriteEngine On
# Redirect to HTTPS if we are not in HTTPS:
RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# Redirect to www.example.com if it's example.com without the www. prefix:
RewriteCond %{HTTP_HOST} !^www\. [NC]
# But don't do it if it's on the local development machine (ex: example.com.local).
RewriteCond %{HTTP_HOST} !\.local$ [NC]
RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# If the URL looks like only having the language in the path, such as
# https://www.example.com/de or https://www.example.com/EN then rewrite it
# to index.php?lang=XX where XX is the captured language.
# It's case insensitive with [NC] because PHP makes it to lowercase after.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(en|de|fr|es|it)$ index.php?lang=$1 [NC]
# Serve brotli compressed assets if they exist.
RewriteCond %{HTTP:Accept-Encoding} br
RewriteCond %{REQUEST_FILENAME}.br -f
RewriteRule (.*\.(?:css|js|svg|ico))(?:$|\?) $1.br [NC,L]
# Serve gzipped compressed assets if they exist.
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*\.(?:css|js|svg|ico))(?:$|\?) $1.gz [NC,L]
# Set MIME types and avoid double compression done by some Apache modules.
RewriteRule \.css\.(gz|br) - [NC,E=no-gzip:1,E=no-brotli:1,T=text/css]
RewriteRule \.js\.(gz|br) - [NC,E=no-gzip:1,E=no-brotli:1,T=application/javascript]
RewriteRule \.svg\.(gz|br) - [NC,E=no-gzip:1,E=no-brotli:1,T=image/svg+xml]
RewriteRule \.ico\.(gz|br) - [NC,E=no-gzip:1,E=no-brotli:1,T=image/x-icon]
# Tell proxies to cache files separately depending on the Accept-Encoding header
# value sent by the browser. This is because we respond with different content
# encodings (none, brotli, gzip) for the same requested URL. We'll only do that
# for the static files. For pages, we'll let the PHP app set the Vary header.
<FilesMatch "\.(?i:css|js|svg|ico)(?:\.(?:gz|br))?$">
Header append Vary Accept-Encoding
</FilesMatch>
# Send the correct encoding header for *.gz files served instead of the original.
<FilesMatch "\.(?i:css|js|svg|ico)\.gz$">
Header set Content-Encoding gzip
</FilesMatch>
# Send the correct encoding header for *.br files served instead of the original.
<FilesMatch "\.(?i:css|js|svg|ico)\.br$">
Header set Content-Encoding br
</FilesMatch>
# Set a long cache age of 2 years for all static files.
# You have to change the URL if you update the file. Be aware
# that if you upload documents to your website you might have
# to disable this rule in the uploaded folder.
<FilesMatch "\.(?i:br|css|gif|gz|ico|jpe?g|js|png|svg)$">
Header set Cache-Control "max-age=63072000, public"
</FilesMatch>
# PHP can be configured to compress automatically the output if the browser
# accepts gzip compression. According to the documentation it is more effective
# this way than using ob_start('ob_gzhandler') in the PHP code.
# If output_compression is enabled then it will automatically set the
# "Vary: Accept-Encoding" HTTP header.
php_flag zlib.output_compression On
php_value zlib.output_compression_level 9
# Hide PHP's X-Powered-By HTTP header if php.ini doesn't already do it.
Header unset X-Powered-By
Compress PHP's output with gzip
As you see in the Apache config above, we can enable the
zlib.output_compression functionnality of PHP, which will
compress the output if the browser handles it and the Vary
HTTP header will also be automatically set.
But if you cannot enable it via Apache or php.ini then you
can still do the compression yourself in the PHP code with the
output buffering. Just put this piece of code in your PHP before
outputing any text:
// If zlib.output_compression=On then the output will be automatically compressed
// and the "Vary: Accept-Encoding" header will be set too. But if it's not enabled
// then we could compress the page ourselves with PHP's output buffering.
if (preg_match('/^(Off|0)$/i', ini_get('zlib.output_compression'))) {
// If the browser accepts gzip then compress with PHP's output buffering.
if (preg_match('/\bgzip\b/', $_SERVER['HTTP_ACCEPT_ENCODING'])) {
// No need to set the "Vary: Accept-Encoding" header because this is
// already done by ob_gzhandler() called below.
ob_start('ob_gzhandler');
}
}
// Hide the X-Powered-By HTTP header if expose_php=Off cannot be set.
if (function_exists('header_remove')) {
header_remove('X-Powered-By');
} else {
// We cannot remove it but we can set it to empty.
header('X-Powered-By:');
// We'll also try to remove it in the .htaccess file.
}