javascript - reCAPTCHA自定义表单参数名称

  显示原文与译文双语对照的内容
0 0

是可以定制的表单参数( reCAPTCHA recaptcha_challenge_fieldrecaptcha_response_field ),以便它被称为不一样呢?

基本上我的形式参数 recaptcha_challenge_field 调用 captchaIdrecaptcha_response_field 调用 captchaUserResponse

我要打重新命名,以便我能抽象人机识别系统实现的- - 当请求到达

posT /mysite/userSignup

我不希望干扰验证码实现( reCaptcha或其他能源相比,今后) 提取正确的参数正确的验证码实现,我想统一这些参数名称。

我现在请求形式如下

POST /mysite/userSignup HTTP/1.1
Host: localhost:80
Connection: keep-alive
Content-Length: 416
Cache-Control: max-age=0
Origin: http://localhost:80
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost:8080/mysite/signup/form.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,hr;q=0.6
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
email:testUser%40gmail.com
username:testUser
password:test
password2:test
forename:Test
surname:User
recaptcha_challenge_field:<google generated challange>
recaptcha_response_field:<user typed captcha answer>
submit:Submit

但我想让它看起来像这样:

POST /mysite/userSignup HTTP/1.1
Host: localhost:80
Connection: keep-alive
Content-Length: 416
Cache-Control: max-age=0
Origin: http://localhost:80
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost:8080/mysite/signup/form.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,hr;q=0.6
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
email:testUser%40gmail.com
username:testUser
password:test
password2:test
forename:Test
surname:User
captchaId:<google generated challange>
captchaUserResponse:<user typed captcha answer>
submit:Submit

一个优雅的方法是指定这些表单参数名称,如下所示:

<script>
   var RecaptchaOptions = {
      recaptcha_challenge_field_formparam_name : 'captchaId',
      recaptcha_response_field_formparam_name: 'captchaUserResponse'
   };
</script>

解决方法如果无法做到这一点,那你说该怎么办?

时间:原作者:7个回答

0 0

应该是不可能的。 可能的解决方案,afaiu,最重要的是增加新的DOM的内容复制了原来的计划,在执行完表单提交的值,例如:

<!-- the HTML part -->
<input type="hidden" id="captchaId">
<input type="hidden" id="captchaUserResponse">
// the JavaScript (jQuery) part
$('form').submit(function(){
  $('input#captchaId').
    val($('input#recaptcha_response_field').val());
  $('input#captchaUserResponse').
    val($('input#recaptcha_challenge_field').val());
  return true;
})
原作者:
0 0

钱给你,我就是跟你在同样的情况下,我们就是做了一个:

Short版本:
在这里,将此属性添加到窗体,只需要这样的查询:

EDIT2添加纯Javascript代码

纯Javascript方法
测试在IE8,ff12和Chrome :

onsubmit="javascript:(function(p){var a=p.getElementsByTagName('input');var attr='';var toAttr='';for (var i in a){try {attr=a[i].getAttribute('name')} catch(e) {continue;}switch(attr){case 'recaptcha_challenge_field':{toAttr='captchaId';break;}case 'recaptcha_response_field':{toAttr='captchaUserResponse';break;}}a[i].setAttribute('name',toAttr);}p.submit();})(this)"

JQuery方法:

onsubmit="javascript:(function(p){var f=$(p);$('input[name=recaptcha_challenge_field]',f).attr('name','captchaId');$('input[name=recaptcha_response_field]',f).attr('name','captchaUserResponse');f.submit();})(this)"

e .g:

<form method="post" action="verify.php" onsubmit="javascript:(function(p){var f=$(p);$('input[name=recaptcha_challenge_field]',f).attr('name','captchaId');$('input[name=recaptcha_response_field]',f).attr('name','captchaUserResponse');f.submit();})(this)">
    <?php
    require_once('recaptchalib.php');
    $publickey = "your_public_key"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
    ?>
    <input type="submit" />
</form>

Long版本:
这就是我所做的:

1 这是实际的java script函数,该函数负责替换输入的名称,没有什么特别的导航:

function(param){
    var form = $(param);
    $('input[name=recaptcha_challenge_field]',form).attr('name','captchaId');
    $('input[name=recaptcha_response_field]',form).attr('name','captchaUserResponse');
    form.submit();
}

2 我会让函数,匿名函数所以我提到可以通过内联HTML称之为事件( onsubmit事件) :

(function(param){...function code...})(this)
  • 注意到, (this)? 处于我们匿名函数? 由此,我可以将我们的窗体的句柄传递给该函数。

3 由于需要尽可能少客户端修改( 或干预你说- 1 ),我将把这个匿名函数从HTML内联事件处理程序。 在我们的例子中,最好的处理程序 onsubmit.

嗯,老实说,我喜欢这个解决方案自己走进去,希望它对你也有用:D

EDIT1:

顺便说一下,我还没注意到你的意见,如果要做到这样:

<form><!--blah blah--></form>
<script type="text/js" src="somewhere"></script>

这些是缺点:

  1. 要添加一个额外HTTP请求了 ! 为什么?
  2. 你这样就异步从form的load complete事件令它不准确
  3. 你就没想过自己也许你的web服务器,在该特定时间,拒绝客户端的请求? 而事实是怎样的呢? 这也让你的服务器端脚本 !
  4. 如果打印表单,服务器端,为什么你不进行这些更改,服务器端?
原作者:
0 0

因为OP还没有接受什么答案,我提供这个。 正如文章中的确切的是OP是找评论时: 答案之一。

创建PHP脚本并把它放到别的地方。 我猜的URI创建的页面 DESIRED_URI. 将此代码放置在该文件中:

<?php
    header("Content-type: text/javascript");
    /*
    * These are the script parameters
    * You can change them by including desired ones in script's URL (as GET params)
    * challenge_field_original: original name of captcha challenge field
    * response_field_original: original name of captcha response field
    * to_challenge_field: the name of the challenge field you want
    * to_response_field: the name of the response field you want
    */
    $params = array(
        /*
        * Defining the defaults of the parameters
        */
        "challenge_field_original" => "recaptcha_challenge_field",
        "response_field_original" => "recaptcha_response_field",
        "to_challenge_field" => "captchaId",
        "to_response_field" => "captchaUserResponse",
    );
    /*
    * Checking for passed GET params to re-fill the parameters with non-default ones (if any)
    */
    if(isset($_GET['challenge']) && $_GET['challenge'] != "") {
        $params["to_challenge_field"] = $_GET['challenge'];
    }
    if(isset($_GET['response']) && $_GET['response'] != "") {
        $params["to_response_field"] = $_GET['response'];
    }
    if(isset($_GET['challenge_original']) && $_GET['challenge_original'] != "") {
        $params["challenge_field_original"] = $_GET['challenge_original'];
    }
    if(isset($_GET['response_original']) && $_GET['response_original'] != "") {
        $params["response_field_original"] = $_GET['response_original'];
    }
?>
/*
* I'm going to find the index of this script tag in the whole document
* So I can find its previous sibling node (the captcha form node)
*/
var scripts = document.getElementsByTagName( 'script' );
var thisScriptTag = scripts[ scripts.length - 1 ];
//now we have the index, good, I'm going to find its previous sibling node
var targetFormTag = (function(element) {
    if(typeof(element.previousElementSibling) == "undefined") {
        var p = element;
        do p = p.previousSibling;
        while (p && p.nodeType != 1);
        return p;
    } else {
        return element.previousElementSibling;
    }
})(thisScriptTag);
//Changing names...
(function(targetForm) {
    var a = targetForm.getElementsByTagName('input');
    var attr = '';
    var toAttr = '';
    for (var i in a) {
        try {
            attr = a[i].getAttribute('name')
        } catch(e) {
            continue;
        }
        switch(attr) {
            case '<?php echo $params["challenge_field_original"]; ?>':
            {toAttr='<?php echo $params["to_challenge_field"]; ?>';break;}
            case '<?php echo $params["response_field_original"]; ?>':
            {toAttr='<?php echo $params["to_response_field"]; ?>';break;}
        }
        a[i].setAttribute('name',toAttr);
    }
})(targetFormTag)

Usage :

非常简单,包含脚本 的表单之后 ( 了这事很重要了) 。 如下所示:

<form><!--form elements--></form>
<script type="text/javascript" src="DESIRED_URI"></script>

你可以更改字段的名称,过了一会儿,站着,阅读代码的文档。

Side notes:

  • 脚本在越来越跨浏览器( IE5+,chrome,ff,谷歌)
  • 你可以使用此脚本的任何验证码,只需提供的脚本中的原始的输入和所需的名称输入字段的名称。 src.
  • 脚本来更改字段,在失败时,它将不会throw任何错误
原作者:
0 0

没必要用多余的字段。 你只要是IDentify form元素,其中包含一个id并更改它们的相对名称,然后提交。

假设你有以下形式:

<div id="captcha" class="item recaptcha">
...
<textarea id=custom1 name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input id=custom2 name="recaptcha_response_field" value="manual_challenge" type="hidden" />
<input type="submit" name="submit" value="Submit">
</div>

你可以更改名称使用

document.captcha.custom1.name='captchaId'
document.captcha.custom2.name='captchaUserResponse'

这些更改可以包括在提交按钮直接或间接( 使用onclick事件调用另一个方法) 。

所以直接更改你提交为:

<input type="submit" name="submit" value="Submit" onclick="document.captcha.custom1.name='captchaId';document.captcha.custom2.name='captchaUserResponse';return true">
原作者:
0 0

我相信你不能抽象太多验证码实现,因为每个验证码使用它自己的验证函数,无论如何更改验证码字段的名称在客户端方面并不是最好的解决方案,因为如果客户端没有Javascript启用它只是将不起作用。

考虑到这一点,我相信最好的方法是使用抽象的名称字段中的变量后,在服务器端收到的post表单时,可以执行以下操作:

$captchaId = $_POST["recaptcha_challenge_field"];
$captchaUserResponse = $_POST["recaptcha_response_field"];

然后将此向泛型验证函数如下所示:

recaptcha_generic_check ("PrivateKey", $_SERVER["REMOTE_ADDR"], $captchaId, $captchaUserResponse);

在理想情况下,这样你只需要更改的名称字段中收到post ( 和函数当然),每一样都会保持不变。

原作者:
0 0

你想做一个通用的处理captchas,以便沿着这条路如果决定使用以外reCAPTCHA,可以相同的方式处理它。 我觉得你的想法很好,但你是抽象太深。

在理想情况下,你需要一些黑盒,系统,这可不是像它的美臀和验证码验证码插件盒子里面的你不用担心 那么我们只需要离开那个盒子是无论用户输入的是正确的

如果试图将决定使用黑盒黑盒执行此检查,你胡闹 此外,如果你切换到不同的验证码插件,你需要肥料和那一起案件而告终。

因为这些原因,我建议你只抽象出一件事: a is_human_user方法( 或随你们怎么称呼它) 。 所有你需要做的只是实现此方法以获取验证码插件,可以让你决定使用。 对于reCAPTCHA,大概意思是该方法将会返回 recaptcha_challenge_field == recaptcha_response_field. 再一个,无论检查代码就只是调用一下 is_human_user但它无法观察到的实现是什么。

我很抱歉如果这不是就是你期待的答案测试之前一定要退一步提醒自己你为什么下兔子洞。

原作者:
...