Recaptcha - 脚本标记注入偶尔失败 [英] Recaptcha - Script tag injection failing sporadically

问题描述

我有一个使用reCAPTCHA的表单。由于某种原因，当用户以不正确的重新获取值提交此表单时，当页面被重新呈现时，重新捕获将无法呈现。

它看起来像什么发生的是重新尝试注入脚本标签，并且零星地（并且仅在某些浏览器中，某些环境中，并且在某些情况下），则无法将该脚本标记添加到DOM。

它发生如下：

1）表单中嵌入了一些内嵌的JavaScript，如下所示：

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

2）该脚本正确执行并返回以下内容：

  var RecaptchaState = {
 site：< some value> 
 challenge：< challenge key> 
 is_incorrect：false， 
 programming_error：''，
 error_message：''，
 server：'https://www.google.com/recaptcha/api/'，
超时：18000 
}; 
 
 document.write（'< scr'+'ipt type =text / javascripts'+'rc ='+ RecaptchaState.server +'js / recaptcha.js>< ; / SCR '+' IPT>'）; 
  

3）之后，通常会发生脚本标记注入页面，recaptcha。 js被加载，并且它将读取RecaptchaState以调用recaptcha来获取图像呈现。

然而，在某些情况下，由于某些原因，脚本应该添加的标签2）从来没有似乎添加到DOM，所以recaptcha.js从来没有加载，所以recaptcha永远不会渲染！在页面呈现之后，我可以在控制台中看到RecaptchaState存在并且具有正确的值，只是没有脚本标签。

所以这是发生了什么，我真的很想念为什么。我只能在Firefox中重现这一点，奇怪的是，它只发生在某些条件下。例如，如果我通过提示程序路由请求，它将每次都工作，永远不会失败。如果我在提交请求之前清除缓存，它将每次都工作。有时候，当我期待它失败时，它的工作，反之亦然。所以这是非常零星的。

所以我的想法是，这可能与js加载的时间有关，这干扰了document.write语句。也许一些其他的JavaScript正在干扰它或类似的东西。只是寻找一些一般的想法，我如何尝试解决这个问题，我可以运行的测试，我可以寻找的东西，或任何想法都是真的。

感谢提前

更新

仍然没有运气弄清楚这一点。有一个想法我有...我们看到firebug控制台中没有错误信息，这表明任何事情都会发生错误，尽管事情显而易见。有没有什么实用程序可以用来仔细看看Firefox中正在发生什么？我正在考虑Chrome的Speed-Tracer，这给你一个非常详细的事件时间表。这里唯一的问题是我们无法在Chrome中复制
。

解决方案

事实证明，我们也是包括通过名为 Ensighten 的标签管理服务的一些脚本。其中一个脚本暂时hi acking了document.write功能，并将其改为调用另一个功能。但是，在其他一些事情发生之后，他们设置了一个回调方法，这将重置document.write函数到其通常的状态。

但是，如果脚本评估发生正确，所以我们的recaptcha JavaScript被评估，而document.write函数处于更改状态...它没有将我们后续的recaptcha js注入页面。

就是说，似乎这可能被认为是侵犯了ensighten代码，以这种方式修改documnet.write，特别是对于第三方的js文件。所以我问他们是否有办法避免在代码中这样做。

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.

解决方案

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.

这篇关于Recaptcha - 脚本标记注入偶尔失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！