IE6 does not parse the loaded JavaScript file (Recaptcha hosted by Google)

Question

This is a really strange issue, I am trying to use the Recaptcha on one of the website, and it works for all browsers tested except for IE6.

I have made a reference to the google's js: http://www.google.com/recaptcha/api/challenge?k=the_key and it is loaded according to fiddler2 & the 'onreadystatechange' event (which have a readystate == 'loaded')

The normal work flow should be the loaded JS been parsed, and another js been requested, then the image loaded from google. my problem is that the first loaded JS file (content similar to below):

var RecaptchaState = {
    site : 'xxxxxxxxxxxx',
    challenge : 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    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>');

is not parsed. First, the following JS test:

 typeof RecaptchaState == 'undefined'

Secondly, there is no second script request (according to fiddler2), not to say the recaptcha image...

The script tag is put inside the body, after the recaptcha markups, and I have even tried to load the JS dynamically:

function GetJavaScript(url, callback) {
    var script = document.createElement('script');
    script.src = url;
    var head = document.getElementsByTagName('head')[0];
    var done = false;

    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function () {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
            callback();

            // remove the hanlder
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
    };

    head.appendChild(script);
}

which gives same behaviour... what confuses me most is: this issue occurs occasionally only when the page is redirectly from another page. (open the url directly in new browser window or refresh the page always works fine, however refresh page using JavaScript does not work...)

Please help, any advice and/or idea would be appreciated...

Answer 1

Double check that your script's src in the page source isn't api.recaptcha.net (some libraries use that, I know the Java one I was using did). If it is, that gets forwarded to www.google.com/recaptcha/api, and that seems to cause issues with IE6. Once I switched to using www.google.com/recaptcha/api as the actual script src, IE6 was completely happy. Good luck!

Answer 2

I solved this problem by using the https call, as per this thread in reCaptcha's Google Group.

Answer 3

This is not a solve, just an workaround.

Request the first js file: http://www.google.com/recaptcha/api/challenge?k=the_key on the server site, and inject the first part of the script on the page directly:

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

Then, using the GetJavaScript function and/or JQuery.getScript() function to load the second script: http://www.google.com/recaptcha/api/js/recaptcha.js

This solution works for IE6 based on my test, and to make the server less load, I detect the user's browser at server end as well as client end to inject different logic.

I know this is dirty workaround, just in case this might help someone.

Answer 4

NOT ANSWER (or is it?):fo_Ok ie6. Seriously, forget it. Without this attitude ie6 will live forever. It is like ancient evil spirit which will be alive until someone believe in it.