EC-CUBEの特定のフォームにreCAPTCHAを設置し不正アクセスを防ぐ

2024.10.10

EC-CUBEの会員登録時、ログイン認証時、属性変更時に不正アクセスかチェックして、
50%以上リスクがある場合は処理を中断してトップページに飛ばす方法

src/Eccube/Resource/template/default/default_frame.twig
※■■■RECAPTCHA_KEY■■■ は適宜 reCAPTCHAのキーに置き換えてください。

<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# product: https://ogp.me/ns/product#">

    {# Google reCAPTCHA #}
    {% if app.request.attributes.get('_route') == 'mypage_login' or app.request.attributes.get('_route') == 'mypage_change' or app.request.attributes.get('_route') == 'entry' %}
    <script src="https://www.google.com/recaptcha/enterprise.js?render=■■■RECAPTCHA_KEY■■■"></script>
    <script>
    function riskCheck(e) {
      e.preventDefault();
      grecaptcha.enterprise.ready(async () => {
        const token = await grecaptcha.enterprise.execute('■■■RECAPTCHA_KEY■■■', {action: '{{ app.request.attributes.get('_route') }}'});
        const assessments = await getAssessments(token);
        {# リスクが50%以上いる場合はトップページに移動 #}
        if (assessments.riskAnalysis.score <= 0.5) return location.href = '/';
        if (e.target.hasAttribute('name') && e.target.hasAttribute('value')) {
            const elem = document.createElement('input');
            elem.name = e.target.name;
            elem.value = e.target.value;
            console.log([ 'elem', elem ]);
            e.target.closest("form").append(elem);
        };
        e.target.closest("form").submit();
      });
    }

    const getAssessments = async (token) => {
      return new Promise((resolve, reject) => {
        $.ajax({
          url: "/recaptcha_assessments.php",
          method: "POST",
          dataType: "JSON",
          data: JSON.stringify({
            "token": token,
            "action": '{{ app.request.attributes.get('_route') }}'
          })
        }).done((result, status, xhr) => {
          resolve(JSON.parse(result));
        }).fail((result, status, xhr) => {
          console.error(['asyncEnterPrice', 'fail', result, status, xhr]);
          reject();
        });


      });
    };

    </script>
    {% endif %}
    {# END Google reCAPTCHA #}

</head>

変更後、EC-CUBEの管理画面にログインして
コンテンツ管理＞キャッシュ管理からキャッシュを削除する

/recaptcha_assessments.php を新規に保存する
※■■■API_KEY■■■ は適宜プロジェクト IDに置き換えてください。
※■■■PROJECT_ID■■■ は適宜プロジェクト IDに置き換えてください。
※■■■RECAPTCHA_KEY■■■ は適宜 reCAPTCHAのキーに置き換えてください。
※ファイル名、保存先を変更する場合は、default_frame.twig内のAjaxのurlも変更してください

<?php
define("API_KEY", "■■■API_KEY■■■");
define("PROJECT_ID", "■■■PROJECT_ID■■■");
define("RECAPTCHA_KEY", "■■■RECAPTCHA_KEY■■■");

$GET = json_decode( file_get_contents('php://input'), true );

$data = [
  "event" => [
    "token" => $GET['token'],
    "expectedAction" => $GET['action'],
    "siteKey" => RECAPTCHA_KEY,
    "userAgent" => $_SERVER['HTTP_USER_AGENT'],
    "userIpAddress" => $_SERVER['REMOTE_ADDR']
  ]
];

$ch = curl_init("https://recaptchaenterprise.googleapis.com/v1/projects/".PROJECT_ID."/assessments?key=".API_KEY);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json; charset=utf-8']);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data) );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);

header("Content-Type: application/json; charset=utf-8");
echo json_encode($result);
exit;
?>

EC-CUBEの管理画面でクリックイベントを付与する

MYページ/ログイン

[-]<button type="submit"
[+]<button type="submit" onClick="riskCheck(event)"

MYページ/会員登録内容変更(入力ページ)

[-]<button type="submit"
[+]<button type="submit" onClick="riskCheck(event)"

会員登録(入力ページ)

[-]<button class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ '同意する'|trans }}</button>
[+]<button class="ec-blockBtn--action" type="submit" name="mode" value="confirm" onClick="riskCheck(event)">{{ '同意する'|trans }}</button>

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ワイズリマインダー