reCaptcha v3 cross browser

问题

For a captcha on a contact form I used the reCaptcha v3 with the Google library.

index.php
  |
  +- [phpmailer]
  |    +- mailer.php
  |
  +- [recaptcha-v3]
  |    +- [ReCaptcha] = library folder https://github.com/google/recaptcha
  |    +- autoload.php & recaptcha-v3-request.js & recaptcha-v3-verify.php

"index.php"

<body>
<form id="contactform" method="post" action="phpmailer/mailer.php">
  <input type="hidden" id="grecdata" name="grecdata" value="">
  <input type="text"   id="yourname" name="yourname" value="">
  <input type="submit" id="sendform" name="sendform" value="Send">
</form>
<script src="recaptcha-v3/recaptcha-v3-request.js"></script>
</body>

"autoload.php"

<?php
spl_autoload_register(function ($class) {
  // Exit if class is not under "ReCaptcha" namespace
  if (substr($class, 0, 10) !== 'ReCaptcha\\') {
    return;
  }
  // Load $class.php from the current directory
  $class = str_replace('\\', '/', $class);
  $path = dirname(__FILE__).'/'.$class.'.php';
  if (is_readable($path)) {
    require_once $path;
    return;
  }
});

"recaptcha-v3-request.js"

// CONFIG: id of the <form id="..."> element, example: "contactform"
var gFormID = "contactform";
// CONFIG: reCaptcha v3 sitekey, see https://www.google.com/recaptcha
var gSiteKey = "HERE_YOUR_SITEKEY";
// CONFIG: reCaptcha v3 action, example: "myshop/contact"
var gAction = "mysite/contact";
// CONFIG: url of your verify file, example: "https://www.example.com/recaptcha-v3/recaptcha-v3-verify.php"
var gVerify = "recaptcha-v3/recaptcha-v3-verify.php";
// reCaptcha API
var gScript  = document.createElement("script");
gScript.type = "text/javascript";
gScript.src  = "https://www.google.com/recaptcha/api.js?render=" + gSiteKey;
document.getElementsByTagName('head')[0].appendChild(gScript);
// execute on form.submit
var gForm = document.getElementById(gFormID);
gForm.addEventListener("submit", function(event) {
  event.preventDefault()
  grecaptcha.ready(function() {
    grecaptcha.execute(gSiteKey, {action: gAction}).then(function(token) {
      fetch(gVerify+'?action='+gAction+'&token='+token).then(function(response) {
        response.json().then(function(data) {
          console.log(data);
          gForm.grecdata.value = String(data.success+','+data.hostname+',' + data.challenge_ts + ',' + data.score + ',' + data.action + ',');
          gForm.submit();
        });
      });
    });
  });
});

"recaptcha-v3-verify.php"

<?php
// CONFIG: reCaptcha v3 secret key
$secret = "HERE_YOUR_SECRET_KEY";
// CONFIG: reCaptcha v3 treshold (set between 0.0 [bot] and 1.0 [human])
$treshold = 0.6;
if (isset($_GET['action']) && !empty($_GET['action']) &&  isset($_GET['token']) && !empty($_GET['token'])) {
  // Register ReCaptcha\Foo classes as autoload
  require_once __DIR__ . '/autoload.php';
  // API endpoint: accept token, verify it, return result to page
  $recaptcha = new \ReCaptcha\ReCaptcha($secret);
  $resp = $recaptcha->setExpectedHostname($_SERVER['SERVER_NAME'])
                    ->setExpectedAction($_GET['action'])
                    ->setScoreThreshold($treshold)
                    ->verify($_GET['token'], $_SERVER['REMOTE_ADDR']);
  header('Content-type:application/json');
  echo json_encode($resp->toArray());
}

"mailer.php" (response for validation)

<body>
<?php
if (isset($_POST["yourname"]) && !empty($_POST["yourname"])) {
  echo $_POST["yourname"] . "<br>";
}
if (isset($_POST["grecdata"]) && !empty($_POST["grecdata"])) {
  $arr = explode(",", $_POST["grecdata"]);
  if ($arr[0] == "true") {
    echo "<br>success = " . $arr[0];
    echo "<br>hostname = " . $arr[1];
    echo "<br>challenge_ts = " . $arr[2];
    echo "<br>score = " . $arr[3];
    echo "<br>action = " . $arr[4];
  }
}
?>
</body>

My question: It seems that it is not full cross-browser. In Chrome and Edge this works fine, but in Internet Explorer 11 the form is not submitted. Any suggestions?

Thanx in advance. Ronald

来源：https://stackoverflow.com/questions/53582439/recaptcha-v3-cross-browser

标签

javascript

php

cross-browser

recaptcha

recaptcha-v3