This week it’s a short post, but one we felt worth sharing due to the sheer size of the issue it’s creating! In this blog post we look at fixing the Divi ReCaptcha bug – a bug in Divi affecting homepages with ReCaptcha and how to fix it with one simple line of code.
For some of our WordPress sites one of the tools we use is the professional builder, Divi. In the course of our monthly maintenance and update schedule we noticed that there was a console error being thrown on these sites:
recaptcha__en.js:514 Invalid action name, may only include “A-Za-z/_”. Do not include user-specific information.
A bit of searching turned up nothing useful so debug hat on, sleeves up, and diving into code we established the following:
- This error was only showing on the homepage
- It was only showing when the Divi ReCaptcha component was in use
et_core_api_spam_recaptcha being set as a JSON string with a couple of key/value pairs just before. From the homepage you’ll see this in the page source:
your_site_key is your own Google ReCaptcha api site key from https://www.google.com/recaptcha/admin and the
page_action->action is the page permalink.
Looking again at the error, it’s nicely telling us what the problem is:
Invalid action name, may only include “A-Za-z/_”. Do not include user-specific information.
And we can see that when on the homepage there is no page title from the permalink (which is what populates the action value), and so the domain is populated into the value instead. Since the domain has a ‘.’ character, not one of those allowed, it throws the error in recaptcha.js.
Now we know where it is, how do we go about fixing the Divi ReCaptcha bug?
We find that the Divi file ReCaptcha.php –
/wp-ontent/themes/Divi/core/components/api/spam/ReCaptcha.php – is responsible for populating this value, specifically lines 54-57:
wp_localize_script( 'et-core-api-spam-recaptcha', 'et_core_api_spam_recaptcha', array( 'site_key' => empty( $this->data['site_key'] ) ? '' : $this->data['site_key'], 'page_action' => array( 'action' => str_replace( '-', '', basename( get_the_permalink() ) ) ), ) );
Here we can see that, on line 56, the page permalink is having a dash replaced with an empty string which is great for permalinks like contact-us (which becomes contactus), but doesn’t help with the homepage.
Below is a patch you can apply to fix this error for now. This comes with warnings, however:
THIS FIX IS PATCHING THE DIVI CORE DIRECTLY AND WILL BE OVERWRITTEN BY DIVI UPDATES.
So, this isn’t a permanent fix, but a temporary patch. We’ve been in touch with Divi devs directly and whilst this is on their to-do list, it’s not yet prioritised for development so we have no clue when it’ll be fixed in the core itself. Until then you’ll need to re-patch the file with every Divi release.
Step 1 – make a copy of the ReCaptcha.php file for safety.
Step 2 – just comment out line 56 and replace with a new line as follows:
wp_localize_script( 'et-core-api-spam-recaptcha', 'et_core_api_spam_recaptcha', array( 'site_key' => empty( $this->data['site_key'] ) ? '' : $this->data['site_key'], //'page_action' => array( 'action' => str_replace( '-', '', basename( get_the_permalink() ) ) ), 'page_action' => array( 'action' => str_replace( array('-','.'), '', basename( get_the_permalink() ) ) ) ) );
This then fixes the issue for domain names, since a domain name can only be alphanumeric with the addition of hyphen and dot characters and it should fix for all permalinks, since these are also URLs (and have the same character restrictions).
This line, instead of doing a straight string replacement, employs the fact that PHP can use an array as the needle, and so we can replace multiple characters in one pass.
We’ve deployed this fix on all Divi sites running ReCaptcha and successfully removed the error and restored functionality on the homepage – especially useful when you have a contact CTA or newsletter signup on that page.
We hope you find this useful, and if you need any help fixing this on your site just get in touch in the comments or Contact Us.
We’ll update this post as and when we find that Divi have fixed it in core.