web-dev-qa-db-ja.com

Google reCAPTCHA V2 JavaScriptサイトでreCAPTCHAソリューションが検証されていないことが検出されました

エラーメッセージサイトがreCAPTCHAソリューションを検証していないことを検出しました。これは、サイトでreCAPTCHAを適切に使用するために必要です。詳細については、開発者向けサイトをご覧ください。このreCaptchaコードを作成しましたが、うまく機能しますが、どのように検証すればよいのかわかりません。関数grecaptcha.getResponse();ですが、そうではありませんでした。どうやらrecaptchaはウェブサイトでうまく機能しましたが、私はGoogle管理者に次のメッセージを見ました： enter image description here

要件：1.フォームで_action="file.php"_を使用しないでください。フォームではJavaScript関数のみを使用してください。

_     <!DOCTYPE>
<html>
<head >
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">
        function get_action() {
            var v = grecaptcha.getResponse();
            console.log("Resp" + v );
            if (v == '') {
                document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
                return false;
            }
            else {
                document.getElementById('captcha').innerHTML = "Captcha completed";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" onsubmit="return get_action();">
    <div>
    <div class="g-recaptcha" data-sitekey="6LdNIlAUAAAAADS_uVMUayu5Z8C0tw_jspdntbYl"></div>
    </div>
   <input type="submit" value="Button" />
   
    <div id="captcha"></div>
    </form>
</body>
</html>_

手伝ってくれませんか。 _action="file.php"_の代わりにJavaScript関数onsubmit="return get_action();"を使用する必要があるので、どのように検証すればよいですか？

javascriptphpajaxrecaptchainvisible-recaptcha
5
jeirueda

grecaptcha.getResponse()関数はユーザー応答トークンのみを提供します。このトークンは、Google reCAPTCHAサーバーで_HTTP POST_呼び出しを使用して検証する必要があります。

AJAXリクエストを使用してトークンを検証できますが、これらの検証は常にサーバー側で行う必要があります。セキュリティ上の理由-JavaScriptは常にユーザーによって操作され、だまされてreCAPTCHAの検証が成功したと信じ込まされている可能性があります。

Google reCAPTCHA docs ：

応答トークンを取得したら、次のAPIを使用してreCAPTCHAでトークンを検証し、トークンが有効であることを確認する必要があります。

したがって、必要なのは、reCAPTCHAシークレット（reCAPTCHA管理ページで生成された2番目のキー）とユーザー応答トークン（grecaptcha.getResponse()関数から受け取ったもの）をreCAPTCHA APIに送信することです。 reCAPTCHA docs 。

PHPでは、次のように考えます。

_$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
    'secret'   => YOUR_RECAPTCHA_SECRET,
    'response' => USER_RESPONSE_TOKEN,
]));

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$data = curl_exec($ch);

curl_close($ch);

$response = @json_decode($data);

if ($response && $response->success)
{
    // validation succeeded, user input is correct
}
else
{
    // response is invalid for some reason
    // you can find more in $data->{"error-codes"}
}
_
3
TheKronnY

これが私が提案することです...

1.）クエリ文字列をreCPATCHAスクリプトに追加します。また、パフォーマンスを向上させ、レンダリングのブロッキングを防ぐために、_async defer_属性を_<script ...>_に追加できます。そして、正確さのために、スクリプトをDOMの_<form>_の後に移動する必要があります。 _...</form> <script src='https://www.google.com/recaptcha/api.js?onload=recaptchaRender' async defer></script>_。

2.）recaptchaRender()という新しい関数を追加します。 Googleへの検証を処理し、コールバック_get_action_への応答をオフロードします。 _RECAPTCHA_SITE_KEY_をGoogleサイトキーに置き換えます。

_function recaptchaRender{
    grecaptcha.render( 'reCaptchSubmit', {
        'sitekey': 'RECAPTCHA_SITE_KEY',
        'callback': get_action
    });
}
_

3.）送信ボタンに_id="reCaptchSubmit"_を追加します。

4.）フォーム要素からonsubmit="return get_action();"を削除します。

基本的に、スクリプトとGoogleの間の認証がありませんでした。これはフォームの検証を処理しませんが、少なくともレンダーコールバックget_action()にアクセスできます。ここで、検証を処理できます-より関連性の高いものに名前を変更したい場合があります。つまり、validateForm()など

0
Lawless