Recaptcha - Script tag injection failing sporadically

Question

I have a form which uses reCAPTCHA. For some reason, when a user submits this form with an incorrect recapture value, when the page is re-rendered, the recapture fails to render.

What it looks like it happening is that recapture attempts to inject a "script" tag, and sporadically (and only in certain browsers, certain environments, and in certain scenarios), it is failing to add that "script" tag to the DOM.

It happens like this:

1) There is some inline javascript embedded in the form that looks like this:

https://www.google.com/recaptcha/api/challenge?k=<our public key>

2) That script executes correctly and returns the following:

var RecaptchaState = {
 site : <some value>,
 challenge : <challenge key>,
 is_incorrect : false,
 programming_error : '',
 error_message : '',
 server : 'https://www.google.com/recaptcha/api/',
 timeout : 18000
};

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

3) What typically happens after that, is that the script tag is injected into the page, recaptcha.js is loaded, and it will read RecaptchaState to make a call out to recaptcha to get the image to render.

However, in certain cases, for some reason, the script tag that should be added in 2) never appears to be added to the DOM, so recaptcha.js is never loaded, so the recaptcha is never rendered! I can see in the console after the page is rendered that the "RecaptchaState" exists and has the correct value, just no script tag to go with it.

So that's what is happening and I am really stumped as to why. I am only able to reproduce this in Firefox, and oddly enough, it only happens under certain conditions. For instance, if I am routing requests through fiddler, it will work every time, never fails. If I clear my cache before I submit the request, it will work every time. Sometimes, when I'm expecting it to fail, it works, and vice versa. So it's very sporadic.

So my thought is that maybe it is has something to do with the timing of the js loading which is interfering with the "document.write" statement. Maybe some other javascript is interfering with it or something like that. Just looking for some general ideas as to how I might attempt to figure this out, tests I can run, things I can look for, or any ideas as all really.

Thanks in advance

Update

Still no luck figuring this out. One thought I had ... we see no error messages in the firebug console which would indicate that anything is going awry, although something obviously is. Are there any utilities we could use to get a closer look at exactly what is going on in Firefox? I'm thinking of something like "Speed-Tracer" for Chrome, which gives you a very detailed timeline of events. The only problem here is that we cannot reproduce it in Chrome.

Answer 1

As it turns out, we are also including some scripts through a tag management service called Ensighten. One of those scripts was temporarily hi-jacking the "document.write" function and changing it to call another function. They were, however, setting a callback method after some other things happened which would reset the "document.write" function to its usual state.

However, if the timing of script evaluation happened just right so that our recaptcha javascript was evaluated while the document.write function was in its altered state ... it was failing to inject our subsequent recaptcha js to the page.

That being said, it seems like that could be considered intrusive of the ensighten code to modify documnet.write in such a way, especially for a third-party js file. So I've asked them if there is anyway they could avoid doing that in their code.