WordPress, Pantheon and cookies
Posted by Souptik Datta on 2024-04-14 @ 00:04:42
Firstly have a cookie - 🍪!
Suppose you are writing a plugin, in which you want to set a cookie from the backend suppose something like this. To set the context, let's think of something like there is a phone number input field in the front-end and when you fill that field and submit, it hides the phone number field and instead displays your phone number over there (it's a stupid example, but just for demonstration purpose) -
setcookie( 'phone_number', 'cookie_value', 0, '/' );And then in another place maybe rather using this cookie like -
$phone_number = $_COOKIE['phone_number'] ?? '';
// Some logic using cookie to maybe display something special to the user..And your plugin is working perfectly locally!
But now you use this plugin on a site deployed on Pantheon. And now suddenly the plugin stops working. Even if the cookie is set, the user is not able to see its phone number on the front-end and still see the input box. So, why is this happening?
It is because of "Pantheon's Global CDN" or edge cache - https://docs.pantheon.io/guides/global-cdn.
So, in simple words, the concept is that whenever anyone visits a page Pantheon caches it in its CDNs and anyone else requests that cache is served from their nearest CDN.
Just FYI - Now you might think then, when we publish the page how do we see the new content on the front-end? So, the answer is that whenever you update a page its CDN cache is also flushed and all these are seamlessly handled by "Pantheon Advanced Page Cache" plugin, which is present by default.
Now I think it has slowly started to make sense why our plugin was not working! So, when we visit the page for the first time, it gets cached in the CDN and from next time we just get the page served from that CDN, and the request doesn't even the server. So, does this always happen is there no way to bypass this CDN cache? Yes, there is! You can set a cookie named -
setcookie('NO_CACHE', '1', 0, '/');But wouldn't this disable page cache in all pages? Yes, that's right, and we don't want that! We want cache 🚀!
So, one way is to set this
NO_CACHE header only for this page. That's a solution, but not very good, here are two reasons why -- Firstly this will disable the cache on this page always i.e irrespective the user is using that phone number feature or not.
- There might be other complex scenarios, where we need to dynamically disable cache on multiple pages and not just one page which we know, unlike this scenario.
So, let's reframe our problem statement -
We want to bypass the cache when we are dealing with this header and have usual caching in place at other times.Lucky for us - Pantheon provides certain cookie patterns, which if present in the request, then the cache will be bypassed and directly sent to the server.
Here is a list of all those cookies -
NO_CACHE
S+ESS[a-z0-9]+
fbs[a-z0-9_]+
SimpleSAML[A-Za-z]+
PHPSESSID
wordpress[A-Za-z0-9_]*
wp-[A-Za-z0-9_]+
comment_author_[a-z0-9_]+
duo_wordpress_auth_cookie
duo_secure_wordpress_auth_cookie
bp_completed_create_steps # BuddyPress cookie used when creating groups
bp_new_group_id # BuddyPress cookie used when creating groups
wp-resetpass-[A-Za-z0-9_]+
(wp_)?woocommerce[A-Za-z0-9_-]+
amazon_Login_[A-Za-z0-9_]+As you can see
NO_CACHE is also one of them! 😄So, the simple solution here is to prepend our cookie name with just
wp- as we can see from the above list and it will work out-of-the-box!By the way, the above list provided above is the content of the Pantheon's Varnish Cache configuration file.
Here are the modified codes -
setcookie( 'wp-phone_number', 'cookie_value', 0, '/' );And here is the usage part -
$phone_number = $_COOKIE['wp-phone_number'] ?? '';
// Some logic using cookie to maybe display something special to the user..That's it!
Here you can read about it in detail on Pantheon's official documentation. In one of the next blogs, we will see about
Cache-varying Cookies which play an important role in personalization!Thank you! 👋