Help us understand the problem. What is going on with this article?

reCAPTCHAでメール保護

More than 3 years have passed since last update.

メールアドレスを保護する際に皆さんはどうしているでしょうか?

  • 画像化する
  • @マークを別の文字にする
  • その他・・・

いろいろあると思いますが、<a href="mailto:hoge@fuga.com">mail</a>をHTML文中に書けないのは間違いないと思います。
ですがこれだとユーザビリティの低下を招いていると私は思います。

手間は同じかもしれないが、すぐにメールが送れる手段としてはMailhidecaptchas.netがありますが、クライアントとしてみればなぜ外部サイトへわざわざ飛ばされないといけないのかと疑問を持つでしょう。

なら、自分のサイト内で完結するシステムを作りましょう!!

reChaptchaのコードを取得

ウェブサイトにキャプチャを導入する方法【reCAPTCHAの使い方】
上記のサイトのほうが圧倒的に詳しいのでコード取得の説明はこちらにお任せいたします。

まずは基礎となるHTML

jQueryは2.1.4を使用していますが1.11.4でもできることは確認済みです。

test.html
<!DOCTYPE html>
<html>
<head>
<title>メール認証テスト</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script src="https://www.google.com/recaptcha/api.js?hl=ja" async defer></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

function scrCallback(code){
    // data-callbackを呼び出すと自動的に引数には認証コードが入る
    if(code != ''){
        // 引数の認証コードが空でなければ
        jQuery('#send').prop("disabled", false);
        // 「メールをする」の部分を送信可能状態にする
        setTimeout(function() {jQuery('#send').prop("disabled", true);}, 120000);
        // reCaptchaは2分間で認証コードがタイムアウトするので「メールする」部分も再度通信不可に
    }
}

jQuery(function ($) {
    $('#send').prop("disabled", true);
    // リロードされても送信不可にするため

    $('#send').click(function() {
        // 「メールする」を押します
        $.ajax({
            // POSTでajaxします
            type: 'POST',
            url: 'recaptcha.php',
            data: $('#form').serialize(),
            dataType: 'json',
            success: function(data, dataType) {
                $('#send').remove();
                // リロードしないと再取得できないように対策

                if (data.success == true) {
                    var mail = data.mail;
                    $('#insert').append('<a href="mailto:' + mail + '"></a>');
                    $('#insert a').text(mail);
                    setTimeout(function() {
                        $('#insert a').remove();
                        $('#insert').append('<p>メールを再度表示するにはリロードして下さい</p>');}, 60000);
                    // 1分でタイムアウト

                } else {
                    $('#insert').append('<p>' + data.error + '</p>');
                    // エラー表示
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {

                //recaptcha.phpと通信できなかった時のエラーメッセージの表示
                alert('Error : ' + errorThrown);
            }
        });

        //サブミット後、ページをリロードしないようにする
        return false;
    });
});
</script>

</head>
<body>
<div>

<form id="form" action="" method="POST">
    <div class="g-recaptcha" data-callback="scrCallback" data-sitekey="{取得したサイト鍵}"></div>
    <input id="send" type="submit" value="メールする">
</form>

<div id="insert"><!-- ここにメッセージが入ります --></div>

</div>
</body>
</html>

HTMLはこんな感じ。
Ajaxすることによって完全にページ内に、安全に表示することができます。
レスポンスが100msを超えますけど(ローカル実測平均160ms程度/外部実測190ms程度【ともに10回試行の平均値】)そこまで苛つくレベルではないでしょう。

通信するrecaptcha.php

recaptcha.php
<?php

    require_once dirname(__FILE__).'/isAjax.php';

    $secret_key = '{取得した秘密鍵}';
    $mail_address = 'hogehoge@gmail.com';

    if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response']) &&
        is_string($_POST['g-recaptcha-response'])) {
        $response_key = $_POST["g-recaptcha-response"];
    } else {
        $response_key = '';
    }
    # ここまでの操作はデフォですね

    $endpoint = "https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$response_key}";
    $json_str = @file_get_contents($endpoint);
    # 二度目以降の取得はどうやらfalseが返ってくるようなので、エラーでも何でも取得

    if ($json_str !== false) {
        $tmp = json_decode($json_str, true);

        if ($tmp['success'] == false) {
            $json = json_encode(array('success' => false, 'error' => '不正な操作が行われた可能性があります'));
            # *1 プログラム欄外に記載
        } else {
            $json = json_encode(array('success' => true, 'mail' => $mail_address));
        }

    } else {
        $json = json_encode(array('success' => false, 'error' => '通信エラーです'));
    }

    header('X-Content-Type-Options: nosniff');
    header('Content-type: application/json; charset=utf-8');

    if (isAjax()) {
        echo $json;
    } else {
        echo json_encode(array('success' => false, 'error' => 'Ajax通信のみです'));
    }
    # どこに置くかはわかりませんが一応JSONハイジャック対策

    exit;
isAjax.php
<?php
    function isAjax(){
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
           strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
            return true;
        }
    return false;
    }

# *1 :successがfalseだった場合error-codesというものが返ってくるのですが、jsでdata.error-codesとするとエラるので書き直します

で、どうなるのさ?

管理人さんにメールしたいなぁ・・・(企業ならサポセンですかねぇ?)
ヘ(゚д゚)ノ ナニコレ?チェックしたらいいの?
(ココらへんもフォームの中にどうしたらいいか書いておいたほうが丁寧でしょうね。)
125.png

チェックしたぜ!!
ポチッ(。^_^)σ【メールする】
126.png

(゚∀゚)メルアド出た!
127.png

〜おまけ(1分後)〜
(゚Д゚)消えた!!
128.png

結果

メールクローラーボットには多分補足されなくなります。
 
 
 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした