How to Fix the Invalid Site Key Error for CAPTCHA on Your Website
If you are working with CAPTCHA on your website, you may have come across the “Invalid Site Key” error. This issue often occurs when there’s a mismatch or misconfiguration in the integration process. This article will explain how to resolve the “Invalid Site Key” error in both frontend (JavaScript) and backend (PHP), providing you with practical steps and code examples.
What is the “Invalid Site Key” Error?
The “Invalid Site Key” error occurs when the CAPTCHA service (like Google reCAPTCHA) doesn’t recognize the site key embedded in the website’s code. The site key is a unique identifier that connects the CAPTCHA widget on your website to your CAPTCHA provider. This error happens for several reasons, including:
- Mismatched or incorrect site keys between the frontend and backend.
- The site key was not correctly registered or has expired.
- Misconfiguration in the CAPTCHA script or the API request.
Now, let’s walk through how to fix this error in both frontend and backend code.
Fix the Invalid Site Key Error in the Frontend (JavaScript)
- Obtain the Correct Site Key:
If you’re using a service like Google reCAPTCHA, you must ensure that the site key you are using is correct. The site key is obtained when you register your website with the CAPTCHA provider. - Integrate CAPTCHA on the Frontend:
The most common CAPTCHA is Google’s reCAPTCHA. Here’s how you should include it in your frontend code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captcha Example</title>
<!-- Include reCAPTCHA API -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<h2>Contact Us</h2>
<form action="submit.php" method="post">
<!-- Your form fields here -->
<!-- Add the reCAPTCHA widget -->
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Explanation:
- The
<script src="https://www.google.com/recaptcha/api.js" async defer></script>line loads the reCAPTCHA API. - The
data-sitekey="YOUR_SITE_KEY"part embeds the correct site key in the CAPTCHA widget. Make sure you replace"YOUR_SITE_KEY"with the correct one provided by Google or your CAPTCHA provider. - Check the Site Key:
If you still get the “Invalid Site Key” error, make sure:- The site key matches exactly what is registered with the CAPTCHA provider.
- The site key is active and hasn’t expired.
Fix the Invalid Site Key Error in the Backend (PHP)
Once the frontend integration is in place, the CAPTCHA needs to be verified on the backend. The verification involves sending the CAPTCHA response (which is generated when the user submits the form) to the CAPTCHA provider’s server for validation.
Here’s how to resolve the error on the backend in PHP:
- Backend PHP Verification Code:
This is where you validate the CAPTCHA response. You’ll need to verify the CAPTCHA response from the frontend by making an API request to Google’s reCAPTCHA server (or another provider’s API).
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$recaptcha_secret_key = 'YOUR_SECRET_KEY'; // Secret key provided by your CAPTCHA provider
$recaptcha_response = $_POST['g-recaptcha-response']; // User's CAPTCHA response
// Verify the CAPTCHA response with the provider's API
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = [
'secret' => $recaptcha_secret_key,
'response' => $recaptcha_response
];
$options = [
'http' => [
'method' => 'POST',
'header' => "Content-Type: application/x-www-form-urlencoded\r\n",
'content' => http_build_query($data)
]
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$response_keys = json_decode($result, true);
// Check if CAPTCHA is verified successfully
if (intval($response_keys['success']) !== 1) {
echo 'CAPTCHA verification failed. Please try again.';
} else {
echo 'CAPTCHA verified successfully!';
// Process the form submission
}
}
?>
Explanation:
$recaptcha_secret_keyis the secret key provided by your CAPTCHA provider (Google reCAPTCHA or others).- The
$_POST['g-recaptcha-response']contains the CAPTCHA response submitted by the user. - The code sends the CAPTCHA response to the reCAPTCHA API for verification.
- The result from
file_get_contents()contains a success/failure flag. Ifsuccessis 1, the CAPTCHA was solved correctly; otherwise, the “Invalid Site Key” error will show up. - Check Your Secret Key:
- Ensure that the secret key used in your backend PHP code matches the one provided by your CAPTCHA provider.
- Double-check that the secret key is valid and hasn’t expired.
Common Troubleshooting Tips
Here are some common troubleshooting steps if you’re still encountering the “Invalid Site Key” error:
- Verify Site Key Registration:
- Make sure the site key and secret key are correctly registered on your CAPTCHA provider’s platform. Google reCAPTCHA allows you to view and manage your keys from the Google reCAPTCHA Admin Console.
- Ensure Correct Site Domain:
- The site key is typically restricted to specific domains. Ensure that your domain is correctly listed under your CAPTCHA provider’s settings. For example, reCAPTCHA requires you to whitelist your domain to prevent unauthorized use of the keys.
- Clear Cache:
- Sometimes, browser caching or server caching can cause issues. Clear your browser cache and try again, especially if you’ve recently updated your site key.
- Check for Mixed Content:
- If you’re using HTTPS, ensure that all resources (like the reCAPTCHA script) are loaded over HTTPS. Mixed content (loading resources over HTTP on an HTTPS page) may cause the CAPTCHA not to load properly.
Conclusion
The “Invalid Site Key” error for CAPTCHA is a common issue, but it’s easy to fix with the right steps. By verifying the correct site and secret keys in both the frontend and backend, you ensure smooth CAPTCHA functionality. Always double-check your registration details with your CAPTCHA provider and confirm that both your frontend and backend are using the correct, active keys.