Version 5.4 incompatible with caching?

Where can we see the website in question?

Sure, just one example: https://mieterbefreiung.org/ (contact form in the footer). The website uses the Cache Enabler plugin for the page cache in combination with Autoptimize (configured to exclude wp-includes/js/dist). If you bypass the cache by appending a query string to the URI, the contact form works fine, if the cached page is served it does not work (errors in the console, no submission).

You are also getting 403 Forbidden responses on REST API requests. Are they caused by the cache plugins, too?

This is getting ridiculous, I have exact same issues, on dozens of websites.

Clearning cache fixes problem for few hours, then I have to clear cache again for forms to work.

Time to say bye to CF7 after all the years I guess…

It’s been days now, without a fix. And this forum is just “spammed” with errors and help requests.

All the best nonetheless. Was great while it lasted.

The REST API is enabled. This can be checked by appending ?rest_route=/ to the website address.

When clearing the cache or bypassing the cache by appending a query string such as ?test123 to the address, contact form submission is successful for some time. After some time submission fails (nothing happens, errors in the console).

I guess that the problem might be caused by the nonce that is emitted by the CF7 plugin to the page’s HTML code. Possibly submission fails after the nonce has expired.

Which contact form on the site are you saying about? Seemingly none of your forms emits nonce.

@takayukister

Here’s a sample clean website in development, with only default WP Theme, Classic Editor, CF7, Autoptimize & Rapid Cache plugins Installed and active – https://www.wmbn.abbott-dev.com/

This particular website form was working fine for two days without clearing cache, today it has stopped.

Any ideas?

There is only one contact form in the page footer, direcly on the start page.

I assume that the code below (taken from the cached page’s HTML code) is generated by the plugin, as it is not generated when using CF7 prior to version 5.4 (I replaced the nonce with “NONCE” and the domain name with “…”:

<script type='text/javascript' id='wp-api-fetch-js-after'>wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( ".../wp-json/" ) );
wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "NONCE" );
wp.apiFetch.use( wp.apiFetch.nonceMiddleware );
wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );
wp.apiFetch.nonceEndpoint = ".../wp-admin/admin-ajax.php?action=rest-nonce";</script> <script type='text/javascript' id='contact-form-7-js-extra'>var wpcf7 = {"cached":"1"};</script>

Submission of the contact form fails some time after the cached version of the page was generated. The console shows these errors when the page is loaded and when the form is submitted:

Error HTTP 403 for .../wp-json/contact-form-7/v1/contact-forms/199/refill?_locale=user, the JSON response says rest_cookie_invalid_nonce.

Error HTTP 404 for .../wp-admin/admin-ajax.php?action=rest-nonce, supposedly due to the invalid nonce.

Yes, I discovered the exact same problem.

Disabling WP-Rocket the option “Combine JavaScript files” fixed my sliders but the form is now broken. Disabling WP-Rocket entirely fixes the forms but that’s obviously not a solution. CF7 clearly has an issue with being cached/combined. Now I’ll need to figure out how to exclude it from the cache in way that doesn’t kill performance.

@takayukister

“Which contact form on the site are you saying about? Seemingly none of your forms emits nonce.”

Was this a requirement before CF7 5.4?

As I understand it, a nonce would have to regenerated after every so many hours, which means re-caching the website to keep it current and degrading performance.

I recached the website. Now when I submit a form it sends the email but the animation never completes are gives a confirmation.

Wow, what a mess. CF7 clearly has issues with caching plugins that it didn’t have before.

@takayukister

RESOLVED?

I believe I’ve now identified the issue. Caching CF7 JavaScript can break the functionality of the form, animations and other things site wide. I’m using Enfold v5.8 and CF7 5.4 and WP-Rocket v3.8.5. – all the latest versions.

In WP-Rocket under FILE OPTIMIZATIONS I had to disable the following options:

1. Combine JavaScript files
2. Load JavaScript deferred

I assume similar settings in other caching programs will resolve the issue.

I can exclude CF7 files from being combined or deferred but I don’t know which files those are. Could you tell me what CF7 JavaSCript files to exclude?

NOTE: I’m still confused about the nonce requirement or if it affects me. I will followup and test again after 12 and 24 hours.

• This reply was modified 3 years, 9 months ago by pca2014.
• This reply was modified 3 years, 9 months ago by pca2014.
• This reply was modified 3 years, 9 months ago by pca2014.

Now it makes sense. Thanks for the clarification.

The WP nonce lives 24 hours by default, so when you use it with some kind of cache, you should set the cache refreshing interval to less than 24 hours.

The error about admin-ajax.php requests is unlikely to be relating to Contact Form 7, but maybe it will also be resolved by shortening the cache lifetime.

I’ll look further into this issue, and if possible, I’ll take some measures in the next release.

The call to admin-ajax.php is used as the nonce endpoint (nonceEndpoint) and is only emitted if CF 5.4 is active, see the snippet from the page’s HTML in my post #post-14130462 above.

Is it safe that multiple visitors use the same nonce because the same cached version of the page is served to them by the server?

Having to set a cache refreshing interval poses a huge problem:

We use Cache Enabler’s advanced configuration. This bypassses PHP completely, therefore also bypassing checks for expiry of a certain cached version of a page. It might work by clearing the entire cache via a cronjob, but unfortunately this feature is not available on all of our servers (shared hosting). More information on Cache Enabler’s advanced configuration: https://www.keycdn.com/support/wordpress-cache-enabler-plugin#will-cached-page-expiration-still-work-if-the-advanced-configuration-is-used

In addition, most of our sites are low-traffic sites which generate the cached version when a user visits the page and it’s not yet in the cache. In other words, the page cache gets filled over time. Therefore the speed benefit of serving a cached version to subsequent users would be lost for most users if the cache is cleared every X hours.

• This reply was modified 3 years, 9 months ago by codifex.

@takayukister

1. CF7 5.4 is incompatible with caching, specifically combining and deferring JavaScript files, which will cause a performance hit.

2. The use of “nonces” means a website has to be re-caches every 12 or 24-hours, I think? This will obviously cause a performance hit when using CloudFlare since all of the files have to be re-cache and with something like CloudFlare ARGO where the cache is distributed almost all of the benefit will be lost.

The bottomline is that this is a hassle and bad for performance.

Please make “nonces” optional and find a way to make CF7 compatible with caching.

I have already rolled back to the previous version.

Thanks!

• This reply was modified 3 years, 9 months ago by pca2014.
• This reply was modified 3 years, 9 months ago by pca2014.