ReCaptcha Not Displaying In IE6

I came across a bit of an issue with ReCaptcha and IE6 today, so I though I would write about it in case anyone else had the same issue (there wasn't a lot of stuff on Google about it) and so I can remember what I did in the future.

The form I was using was a multi stage form and the second part contained a call to the ReCaptcha function recaptcha_get_html(), which was part of the PHP library I was using (1.11 in this case). When users with IE6 came onto this page the ReCaptcha box was missing, but after refreshing the page the box appeared. ReCaptcha works by downloading and running a block of JavaScript from Google. After a little research it looked as though IE6 would not download this JavaScript when redirected to the page via a form post (other exceptions might occur) but would if accessed directly or after a refresh. The snippet below if the code that is returned from the Google on request:

var RecaptchaState = {
 site : 'xxxxxxxxxxxx',
 challenge : 'xxxxxxxxxxx',
 is_incorrect : false,
 programming_error : '',
 error_message : '',
 server : 'http://www.google.com/recaptcha/api/',
 timeout : 18000
};

document.write('<scr'+'ipt type="text/javascript" s'+'rc="' + RecaptchaState.server + 'js/recaptcha.js"></scr'+'ipt>');

The solution was to force download the needed JavaScript above in the recaptcha_get_html() function using the PHP function file_get_contents() and print out the contents inside the script. Here is the original recaptcha_get_html() function, which can be found on line 106 of recaptchalib.php in the ReCaptcha library folder.

function recaptcha_get_html ($pubkey, $error = null, $use_ssl = false)
{
	if ($pubkey == null || $pubkey == '') {
		die ("To use reCAPTCHA you must get an API key from <a href='https://www.google.com/recaptcha/admin/create'>https://www.google.com/recaptcha/admin/create</a>");
	}
	
	if ($use_ssl) {
                $server = RECAPTCHA_API_SECURE_SERVER;
        } else {
                $server = RECAPTCHA_API_SERVER;
        }

        $errorpart = "";
        if ($error) {
           $errorpart = "&amp;error=" . $error;
        }
        return '<script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . $errorpart . '"></script>

	<noscript>
  		<iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript>';
}

Below if the original function with a clause added to check to see if the user was using IE6. If they are then the script is downloaded using file_get_contents() and printed out.

function recaptcha_get_html ($pubkey, $error = null, $use_ssl = false)
{
	if ($pubkey == null || $pubkey == '') {
		die ("To use reCAPTCHA you must get an API key from <a href='https://www.google.com/recaptcha/admin/create'>https://www.google.com/recaptcha/admin/create</a>");
	}
	
	if ($use_ssl) {
                $server = RECAPTCHA_API_SECURE_SERVER;
        } else {
                $server = RECAPTCHA_API_SERVER;
        }

        $errorpart = "";
        if ($error) {
           $errorpart = "&amp;error=" . $error;
        }
        
        // Added clause to force IE6 to work.
        if ((strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0;') !== false)) {
            $javaScriptEmbed = file_get_contents($server . '/challenge?k=' . $pubkey . $errorpart);
            return '<script type="text/javascript">' . $javaScriptEmbed . '</script>

        <noscript>
            <iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript>';
        
        } else {
        
            return '<script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . $errorpart . '"></script>

        <noscript>
            <iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript>';
        }
}

This seemed to fix the issue quite nicely. If you want to check that the code has been loaded then use a call to alert(typeof RecaptchaState); after the call to ReCaptcha. This will print "object" if the RecaptchaState object is present on the page, which should mean that all this has worked.