ReCaptcha Not Displaying In IE6

Thursday, January 6, 2011 - 12:17

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:

1
2
3
4
5
6
7
8
9
10
11
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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.

Category: 
philipnorton42's picture

Philip Norton

Phil is the founder and administrator of #! code and is an IT professional working in the North West of the UK.
Google+ | Twitter

Comments

Thanks you for this tricks :)

Thank you very much for this.

I have been pulling my hair out trying to work out what was going on with this internet explorer issue.

Thanks, nipped that problem right in the bud! I'm sure I would have spent multiple hours/days trying to figure this one out...

It's work for me (DRUPAL Module)... thanks

Thanks very much for this awesome snippet of genius. Life saver.

Add new comment