CODEWITHSUNDEEP
phpwordpresscachingcloudflare
Dagmar
Dagmar

Reputation: 3281

How do you create a dynamic page in Wordpress and not encounter issues with caching?

I am running a RoR website with a Wordpress blog and I have just implemented a logged in / logged out header in Wordpress using cookies that are set by the main (RoR) site when a user logs in.

Everything works fine except that when a user logs in or logs out (of the RoR site) I need to do a hard refresh on the wordpress site to see the modified header. I need to fix that.

My question is - is this a problem with my caching settings, or should I have implemented the solution differently?

My solution

My RoR website creates a cookie called 'login' when the user logs in and deletes that cookie when they log out.

I edited my child theme's header.php to insert this code:

<?php if(isset($_COOKIE['login'])) : ?>
  <!-- logged in header -->
<?php else : ?>
  <!-- not logged in header -->
<?php endif; ?>

Caching

I am using quite a few caching/optimisation plugins/services/settings including:

Firstly, I disabled WP Super Cache because it appears its primary function is to cache HTML and PHP, and with the plugin active I need to delete the cache before the header will update with a hard refresh.

Then I unchecked the Autoptimze settings to disable cache of HTML.

Then I checked my Cloudflare settings - I am using Standard caching, using existing headers, and not doing any minification.

Finally my Apache config seems correct:

  <IfModule mod_headers.c>
 ...
     <FilesMatch "\.(html|htm|php|pdf)$">
       Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
     </FilesMatch>
  </IfModule>

As an additional test, I accessed the website directly (via the IP address) and this seems to work fine. I also ran some tests with "disable cache" ticked on the Network tab of the Chrome developer tools, and that also worked great.

Therefore I think the issue is now with Chrome.

When I look at the HTTP request headers, after returning to the Wordpress site after logging out or in, I see this:

Status Code: 200  (from disk cache)

And when I click the browser refresh button, the page refreshes and the header is correct.

Here are the HTTP response headers when the incorrect header is shown:

cache-control: private, must-revalidate
cf-cache-status: DYNAMIC
cf-ray: 593e0b2e0cc706c5-LHR
cf-request-id: 02baa550c6000006c5e7912200000001
content-encoding: br
content-type: text/html; charset=UTF-8
date: Fri, 15 May 2020 15:55:31 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Fri, 15 May 2020 16:05:30 GMT
link: <https://www.example.com/blog/wp-json/>; rel="https://api.w.org/"
server: cloudflare
status: 200
vary: Accept-Encoding,User-Agent

Here are the HTTP response headers when I press the browser refresh button:

Request URL: https://www.example.com/blog/
Request Method: GET
Status Code: 200 
Remote Address: 104.27.165.96:443
Referrer Policy: no-referrer-when-downgrade
cache-control: private, must-revalidate
cf-cache-status: DYNAMIC
cf-ray: 593e10d669ca06c5-LHR
cf-request-id: 02baa8da04000006c5e7896200000001
content-encoding: br
content-type: text/html; charset=UTF-8
date: Fri, 15 May 2020 15:59:22 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Fri, 15 May 2020 16:09:22 GMT
link: <https://www.example.com/blog/wp-json/>; rel="https://api.w.org/"
server: cloudflare
status: 200
vary: Accept-Encoding,User-Agent
:authority: www.example.com
:method: GET
:path: /blog/
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: en-ZA,en-GB;q=0.9,en-US;q=0.8,en;q=0.7,fr;q=0.6
cache-control: max-age=0
cookie: wordpress_test_cookie=WP%20Cookie%20check; __cfduid=dc19950d1c3d6d8e54fefd2b87c81a1e71589464189; _ga=GA1.2.1235735685.1589464190; _gid=GA1.2.1339832334.1589464190; _hjid=3f0fe3a6-cb06-4d37-886f-0358763f067e; _omappvp=Mhy6L4AKmb5TVpPhcNdtRDjwoZyTAfz7srbL1nfNUhhH7T6zyUjp3DYhWoOTp3vaiLL7tFM8xPRzCSb3KKuxM0xkiNhsOfS1; _fbp=fb.1.1589464195337.1508307578; intercom-id-qe94ii0z=b3b88868-e461-4624-a6aa-9c4b0ef77e76; _hjIncludedInSample=1; om-700710=true; editing=viewed; _gaexp=GAX1.2.R8_xwTncQfCHf-7lseMIpQ.18441.1!I2ThxUMmSpOQ2bSwIUXW-g.18445.0; _hjAbsoluteSessionInProgress=1; intercom-session-qe94ii0z=S1dLWUcvTUdEdldSeEJXOEdJOURZVW02cDBkdWROZ2tEMWZPekZxV2llSTJRSTlxQVNhVW5BODdCMUFuK2NwSC0tM1o2QTdDbHFxMklja0l4TTFpOXlMZz09--29bdb35de1443e4d7dbe4c5f56289131b74e2b36; _gat=1; _example_session=BAh7CUkiD3Nlc3Npb25faWQGOgZFVEkiJWJkYmJlMTM4NmE3ODg0YmY5ZjdlYTZjM2E2Y2M1ZWY4BjsAVEkiCmZsYXNoBjsAVHsHSSIMZGlzY2FyZAY7AFRbBkkiCmFsZXJ0BjsARkkiDGZsYXNoZXMGOwBUewZADEkiNllvdSBuZWVkIHRvIHNpZ24gaW4gb3Igc2lnbiB1cCBiZWZvcmUgY29udGludWluZy4GOwBUSSIQX2NzcmZfdG9rZW4GOwBGSSIxU2tRY1N6LzFSMGx2RGFlQ1BNMzgzZHBCQ1FIL3AxK2prd0NobmZaZ1Z1dz0GOwBGSSITdXNlcl9yZXR1cm5fdG8GOwBUIhUvZGFzaGJvYXJkL2luZGV4--242e9a815510fe910d3372b5b9e2ef8bc8f800e4
referer: https://www.example.com/users/sign_in
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

Upvotes: 1

Views: 632

Answers (1)

Dagmar
Dagmar

Reputation: 3281

I was finally able to debug this problem using wget on the server like so:

$ wget https://localhost/blog/ --no-check-certificate --server-response

Once I disabled the two plugins I was using for caching in Wordpress, this command allowed me to bypass Cloudflare and see the headers being set by Apache.

--2020-05-19 13:21:08--  https://localhost/blog/
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:443... connected.
WARNING: cannot verify localhost's certificate, issued by ‘ST=California,L=San Francisco,OU=CloudFlare Origin SSL Certificate Authority,O=CloudFlare\\, Inc.,C=US’:
  Unable to locally verify the issuer's authority.
WARNING: no certificate subject alternative name matches
    requested host name ‘localhost’.
HTTP request sent, awaiting response... 
  HTTP/1.1 200 OK
  Date: Tue, 19 May 2020 12:21:08 GMT
  Server: Apache
  Link: <https://localhost/blog/wp-json/>; rel="https://api.w.org/"
  Cache-Control: private, must-revalidate
  Expires: Tue, 19 May 2020 12:31:08 GMT
  Vary: Accept-Encoding,User-Agent
  Content-Type: text/html; charset=UTF-8
  Keep-Alive: timeout=5, max=100
  Connection: Keep-Alive
  Transfer-Encoding: chunked
Length: unspecified [text/html]
Saving to: ‘index.html’

I noticed that the Cache-Control header was different to the one in my Apache configuration.

Cache-Control: max-age=0, private, no-store, no-cache, must-revalidate

This was because the Cache-Control header was being set in the root domain Apache config but not for the blog (it is being hosted with a reverse proxy).

The solution was to copy all the Expires and Cache-Control header config into my blog Apache configuration file and then voila:

$ wget https://localhost/blog/ --no-check-certificate --server-response--2020-05-19 16:41:19--  https://localhost/blog/
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:443... connected.
WARNING: cannot verify localhost's certificate, issued by ‘ST=California,L=San Francisco,OU=CloudFlare Origin SSL Certificate Authority,O=CloudFlare\\, Inc.,C=US’:
  Unable to locally verify the issuer's authority.
WARNING: no certificate subject alternative name matches
    requested host name ‘localhost’.
HTTP request sent, awaiting response... 
  HTTP/1.1 200 OK
  Date: Tue, 19 May 2020 15:41:20 GMT
  Server: Apache
  Vary: Accept-Encoding,Cookie,User-Agent
  Link: <https://localhost/blog/wp-json/>; rel="https://api.w.org/"
  Cache-Control: private, no-store, no-cache, must-revalidate
  Expires: Tue, 19 May 2020 15:41:20 GMT
  Content-Type: text/html; charset=UTF-8
  Keep-Alive: timeout=5, max=100
  Connection: Keep-Alive
  Transfer-Encoding: chunked
Length: unspecified [text/html]
Saving to: ‘index.html’

For completeness, please see my new Apache config for my blog:

# avoids sending hackers too much info about the server
ServerTokens Prod

<VirtualHost *:8080>
  ServerName www.example.com
  ServerAdmin [email protected]

  ErrorLog /var/log/apache2/blog/error.log
  CustomLog /var/log/apache2/blog/access.log common

  DocumentRoot /var/www/blog
  <Directory /var/www/blog>
    AllowOverride All
    Options -Indexes
  </Directory>

  # Enable Compression
  <IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
    Header append Vary User-Agent
  </IfModule>

  # Enable expires headers
  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg                     "access plus 1 year"
    ExpiresByType image/jpeg                    "access plus 1 year"
    ExpiresByType image/gif                     "access plus 1 year"
    ExpiresByType image/png                     "access plus 1 year"
    ExpiresByType text/css                      "access plus 1 month"
    ExpiresByType application/pdf               "access plus 1 month"
    ExpiresByType text/x-javascript             "access plus 1 month"
    ExpiresByType text/javascript               "access plus 1 month"
    ExpiresByType application/javascript        "access plus 1 month"
    ExpiresByType application/x-javascript      "access plus 1 month"
    ExpiresByType image/x-icon                  "access plus 1 year"
    ExpiresByType text/xml                      "access plus 0 seconds"
    ExpiresByType text/html                     "access plus 0 seconds"
    ExpiresByType text/plain                    "access plus 0 seconds"
    ExpiresByType application/xml               "access plus 0 seconds"
    ExpiresByType application/json              "access plus 0 seconds"
    ExpiresByType application/rss+xml           "access plus 1 hour"
    ExpiresByType application/atom+xml          "access plus 1 hour"
    ExpiresByType text/x-component              "access plus 1 hour"
    ExpiresDefault                              "access plus 0 seconds"
  </IfModule>

  # Enable caching headers
  <IfModule mod_headers.c>
     # Calculate etag on modified time and file size (could be turned off too ?)
     FileETag MTime Size
     # NEVER CACHE - notice the extra directives
     <FilesMatch "\.(html|htm|php)$">
       Header set Cache-Control "private, no-store, no-cache, must-revalidate"
     </FilesMatch>
  </IfModule>

Upvotes: 1

Related Questions