HTML/CSS – igreks開発日記

【ECCUBE2】スパム対策としてお問合せフォームにreCaptchaを導入

定期的に中国から来る迷惑なお問合せフォームを利用したスパム。

スパムの一例↓

　　：
この度のお問い合せ誠にありがとうございます。

以下の内容で承りました。

回答を要するもので、万一、ご回答メールが届かない場合は、
受信トラブルの可能性もありますので
大変お手数ではございますがもう一度お問い合わせいただくか、
お電話にてお問い合わせください。

今後ともご愛顧賜りますようよろしくお願い申し上げます。


■会社団体名　: 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]
■フリガナ　　: 未登録
■お名前　　　: 来了就送 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com] 様
■フリガナ　　: カタカ カタカ 様
■電話番号　　　：--
■メールアドレス：henson77777@qq.com

■お問い合わせの内容
城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]
　　：

　　：

この度のお問い合せ誠にありがとうございます。

以下の内容で承りました。

回答を要するもので、万一、ご回答メールが届かない場合は、

受信トラブルの可能性もありますので

大変お手数ではございますがもう一度お問い合わせいただくか、

お電話にてお問い合わせください。

今後ともご愛顧賜りますようよろしくお願い申し上げます。

■会社団体名　: 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]

■フリガナ　　: 未登録

■お名前　　　: 来了就送城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com] 様

■フリガナ　　: カタカカタカ様

■電話番号　　　：--

■メールアドレス：henson77777@qq.com

■お問い合わせの内容

城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]

　　：

このように、メールアドレス欄に不特定多数のメールアドレスを指定し、自動返信機能を利用してメールを送り付けている。

今までは接続元IPを特定して、apacheの設定ファイルなり.htaccessで個別にアクセスを拒否するなど、対症療法をしていましたが、業務の負担になりつつあるので、導入することにしました。

結果として効果はかなりあったようで、対策後およそ1か月、未だスパムによる被害は1回もうけていません。

reCaptchaをECCUBE2のお問合せフォームに導入する手順は以下の通りです。

サイトキーとシークレットキーの取得

reCaptchaにアクセスし「Admin console」を開きます。Googleアカウントが必要になります。
必要事項を入力し、サイトキーとシークレットキーを取得します。（今回は「」を採用します。）

テンプレートを修正

ECCUBE2のお問合せフォーム(確認画面)のテンプレートファイルを修正します。

  :
<form name="form1" id="form1" method="post" action="?">
     :
  <!-- <form>～</form>の任意の場所に以下を追記 ------------------>
  <!-- reCAPTCHA v3 -->
  <input type="hidden" name="recaptchaResponse" id="recaptchaResponse" />
  <!------------------------------------------------------------->
     :
</form>
  :

<!-- 任意の場所に以下のjsコードを追記 ----------------->
<!-- reCAPTCHA v3 Start -->
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
<script>
	grecaptcha.ready(function () {
    	grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {
    	    var recaptchaResponse = document.getElementById('recaptchaResponse');
    	    recaptchaResponse.value = token;
    	});
	});
</script>
<!-- reCAPTCHA v3 End   -->

</form>

grecaptcha.ready(function () {

grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {

var recaptchaResponse = document.getElementById('recaptchaResponse');

recaptchaResponse.value = token;

});

</script>

スマホページも運用している場合はそちらのテンプレート(data/Smarty/templates/sphone/contact/confirm.tpl)も同様に修正します。

PHPファイルの修正

お問い合わせの受付・自動返信メール送信処理を行うPHPファイルを修正します。

          :
        case 'complete':

            //reCAPTCHA v3の処理を追加 /////////////////////////////////
            if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
                $secret = 'シークレットキー';
                $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']);
                $reCAPTCHA = json_decode($verifyResponse);
                if (!$reCAPTCHA->success){
                    SC_Utils_Ex::sfDispSiteError(
                        FREE_ERROR_MSG,
                        '',
                        false,
                        "スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。
                    ");
                    exit;
                }
            }else{
                SC_Utils_Ex::sfDispSiteError(
                    FREE_ERROR_MSG,
                    '',
                    false,
                    "スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。
                ");
                exit;
            }
            ///////////////////////////////////////////////////////////////

            $this->lfInitParam($objFormParam);
            $objFormParam->setParam($_POST);
            $this->arrErr = $objFormParam->checkError();
            $this->arrForm = $objFormParam->getFormParamList();
            if (SC_Utils_Ex::isBlank($this->arrErr)) {
                $this->lfSendMail($this);
                // 完了ページへ移動する
                SC_Response_Ex::sendRedirect('complete.php');
                exit;
            } else {
                SC_Utils_Ex::sfDispSiteError(CUSTOMER_ERROR);
                exit;
            }
            break;
              :

case 'complete':

//reCAPTCHA v3の処理を追加 /////////////////////////////////

if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){

$secret = 'シークレットキー';

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']);

$reCAPTCHA = json_decode($verifyResponse);

if (!$reCAPTCHA->success){

SC_Utils_Ex::sfDispSiteError(

FREE_ERROR_MSG,

'',

false,

"スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。

");

exit;

}

}else{

SC_Utils_Ex::sfDispSiteError(

FREE_ERROR_MSG,

'',

false,

"スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。

");

exit;

}

///////////////////////////////////////////////////////////////

$this->lfInitParam($objFormParam);

$objFormParam->setParam($_POST);

$this->arrErr = $objFormParam->checkError();

$this->arrForm = $objFormParam->getFormParamList();

if (SC_Utils_Ex::isBlank($this->arrErr)) {

$this->lfSendMail($this);

// 完了ページへ移動する

SC_Response_Ex::sendRedirect('complete.php');

exit;

} else {

SC_Utils_Ex::sfDispSiteError(CUSTOMER_ERROR);

exit;

}

break;

確認

確認画面の右下に、以下のようなreCAPTCHAアイコンが表示されていれば、適用完了です。

参考サイト）

ECCUBE3で商品に新しい項目を追加

EC-CUBE 3.0.16
MySQL 5.6.19
PHP 5.6.36

例として、商品名かな(name_kana)という項目を追加する場合。

１．テーブルへのカラム追加
dtb_productテーブルへ”name_kana”という名前のカラムをtextタイプ(またはvarchar)で追加。また、NULLを許可にする。

２．エンティティファイルに、セッターゲッター追加
/src/Eccube/Entity/Product.php

以下のように追記。

    /**
     * @var string
     */
    private $name_kana;
 
    /**
     * @return string
     */
    public function getNameKana()
    {
        return $this->name_kana;
    }
 
    /**
     * @param string $name_kana
     * @return \Eccube\Entity\Product
     */
    public function setNameKana($nameKana)
    {
        $this->name_kana = $nameKana;
        return $this;
    }

    /************************************
     ※メソッド名とその引数にアンダーバーを使うと
       エラーになるので、宣言した変数名にアンダーバー
       を含む場合は上記のように、アンダーバーを消して
       その次の文字を大文字(キャメルケース)にする。
    ************************************/

/**

* @var string

private $name_kana;

/**

* @return string

public function getNameKana()

{

return $this->name_kana;

}

/**

* @param string $name_kana

* @return \Eccube\Entity\Product

public function setNameKana($nameKana)

{

$this->name_kana = $nameKana;

return $this;

}

/************************************

※メソッド名とその引数にアンダーバーを使うと

エラーになるので、宣言した変数名にアンダーバー

を含む場合は上記のように、アンダーバーを消して

その次の文字を大文字(キャメルケース)にする。

************************************/

３．データベース定義ファイルへカラム追加
/src/Eccube/Resource/doctrine/Eccube.Entity.Product.dcm.yml

fields一覧にname_kanaの項目を追加。データベースとエンティティクラスを接続するのがdcm.yml(Doctrineマッピングファイル)。これにより、Productエンティティのname_kanaとdtb_productのname_kanaカラムが接続される。

       name_kana:
            type: text
            nullable: true

name_kana:

type: text

nullable: true

ちなみに、EC-CUBE３が採用しているSymfonyの標準ORM、Doctorineで設定できるフィールドタイプは以下の通り。

    const TARRAY = 'array';
    const SIMPLE_ARRAY = 'simple_array';
    const JSON_ARRAY = 'json_array';
    const BIGINT = 'bigint';
    const BOOLEAN = 'boolean';
    const DATETIME = 'datetime';
    const DATETIMETZ = 'datetimetz';
    const DATE = 'date';
    const TIME = 'time';
    const DECIMAL = 'decimal';
    const INTEGER = 'integer';
    const OBJECT = 'object';
    const SMALLINT = 'smallint';
    const STRING = 'string';
    const TEXT = 'text';
    const BINARY = 'binary';
    const BLOB = 'blob';
    const FLOAT = 'float';
    const GUID = 'guid';

const TARRAY = 'array';

const SIMPLE_ARRAY = 'simple_array';

const JSON_ARRAY = 'json_array';

const BIGINT = 'bigint';

const BOOLEAN = 'boolean';

const DATETIME = 'datetime';

const DATETIMETZ = 'datetimetz';

const DATE = 'date';

const TIME = 'time';

const DECIMAL = 'decimal';

const INTEGER = 'integer';

const OBJECT = 'object';

const SMALLINT = 'smallint';

const STRING = 'string';

const TEXT = 'text';

const BINARY = 'binary';

const BLOB = 'blob';

const FLOAT = 'float';

const GUID = 'guid';

4．フォーム定義ファイルへの項目追加
/src/Eccube/Form/Type/Admin/ProductType.php

下記のように、管理画面の商品登録フォームへ定義を追加。

$builder->add('name_kana', 'text', array(
                'label' => '商品名かな',
                'required' => true,
            ));

$builder->add('name_kana', 'text', array(

'label' => '商品名かな',

'required' => true,

));

上記の書き方で入力必須とならない場合（未入力で保存した際にエラーとならない）場合は、下記のようにする。

$builder->add('name_kana', 'text', array(
                'label' => '商品名かな',
                'required' => true,
                'constraints' => array(
                    new Assert\NotBlank(),
                ),
            ));

$builder->add('name_kana', 'text', array(

'label' => '商品名かな',

'required' => true,

'constraints' => array(

new Assert\NotBlank(),

));

なお、フォームの入力形式として整数型としたい場合は、第2引数に”integer”, 浮動小数点型としたい場合は、第2引数に”number”を指定するなどして対応。

このほかにも選択型(choice型)も指定できる。詳細は公式ドキュメントを参照。

5．管理画面（商品情報登録画面）へフォーム表示
/app/template/admin/Product/product.twig

フォームを表示したい場所に下記のように記述。

{{ form_row(form.name_kana) }}

1	{{ form_row(form.name_kana) }}

form_rowは、form_label、form_widget、form_errorsを同時に出力する関数。テキストの入力幅を小さくしたい場合などは、form_label、form_widget、form_errorsに分割するなどしてCSSで対応。

<!-- 入力幅を小さく -->
<div id="" class="form-group">
    {{ form_label(form.name_kana) }}
    <!-- col-sm-* col-lg-* の「*」値で調整すると簡単 -->
    <div class="col-sm-2 col-lg-2">
        {{ form_widget(form.name_kana) }}
        {{ form_errors(form.name_kana) }}
    </div>
</div>

</div>

6．商品詳細ページへの表示
/app/template/default/Product/detail.twig

フロント側で出力。好きな場所に下記のように記載。未登録であれば何も出力されない。

{{ Product.name_kana }}

1	{{ Product.name_kana }}

以上。

参考URL）

Chrome使用時にfocusイベント内でalertするとダイアログが延々と繰り返される場合の対策

簡単な処理やデバッグ時などでは、まだまだ重宝するalert()。

例えばよくあるこんな処理。

$("input").focus(function () {
	alert("Hello!!");
	return false;
});

$("input").focus(function () {

alert("Hello!!");

return false;

});

ところがGoogle Chromeを使用した場合、「Hello!!」のダイアログを消しても消しても、延々とダイアログが表示し続ける無限ループが発生する場合がある。

アラートを出した後に、自動的に要素に対してフォーカスが行われ、その結果処理の繰り返しになるらしい。

なので、単純な解決策としては、アラートを出した後に、フォーカスを外してやればよい。

$("input").focus(function () {
	alert("Hello!!");
	$(this).blur(); // focusを外す
	return false;
});

$("input").focus(function () {

alert("Hello!!");

$(this).blur(); // focusを外す

return false;

});

なお、アラート後、また同じ要素にフォーカスさせ、かつ無限ループさせない方法はこちらを参照。

EC-CUBE(2系)で管理者権限の設定

動作確認はEC-CUBE2.13.2。結構古いけど。

例えば一部のメンバーは、商品管理メニューしか操作できないようにしたい時とか。

まず「システム設定」→「マスターデータ設定」から「mtb_authority」を選択。
「追加のデータ」欄に、IDを指定（例えば2）し、値に権限名（例えば「商品管理者」）を入力。→「この内容で登録する」
「システム設定」→「マスターデータ設定」から「mtb_permission」を選択。
「基本情報管理」以下にアクセスできなくする場合、「追加のデータ」欄に、ID「/admin/basis/」、値「1」を設定。（この値が、ログインしたメンバーのID以下ならアクセス可能になる。ここを「2」にすれば追加した商品管理者もアクセス可能になる。）
他にもアクセス不可にしたいページがあれば、同様に「mtb_permission」に追加する。

「/data/class/SC_Session.php」を編集。

// 70行目あたりを修正 --------------------
// 対象フォルダ以下の全てのファイルをアクセス出来ないように設定
//$admin_path = strtolower(preg_replace('/\/+/', '/', $_SERVER['SCRIPT_NAME']));
$admin_path = strtolower(preg_replace('!/[^/]*$!', '/', $_SERVER['SCRIPT_NAME']));

// 70行目あたりを修正 --------------------

// 対象フォルダ以下の全てのファイルをアクセス出来ないように設定

//$admin_path = strtolower(preg_replace('/\/+/', '/', $_SERVER['SCRIPT_NAME']));

$admin_path = strtolower(preg_replace('!/[^/]*$!', '/', $_SERVER['SCRIPT_NAME']));

「/data/class/pages/error/LC_Page_Error_DispError.php」を編集。

// 92行目あたりに以下を追加 --------------------
 case AUTH_ERROR:
 $this->tpl_error="このファイルにはアクセス権限がありません。<br />もう一度ご確認のうえ、再度ログインしてください。";
 $this->return_top = false;
 break;

// 92行目あたりに以下を追加 --------------------

case AUTH_ERROR:

$this->tpl_error="このファイルにはアクセス権限がありません。<br />もう一度ご確認のうえ、再度ログインしてください。";

$this->return_top = false;

break;

「/data/Smarty/templates/admin/login_error.tpl」を編集。

// 40行目あたりを修正 --------------------
 <li>
 <!--{if $return_top}-->
 <a class="btn-action" href="<!--{$smarty.const.ADMIN_LOGIN_URLPATH}-->"><span class="btn-prev">ログインページに戻る</span></a>
 <!--{else}-->
 <a class="btn-action" href="<!--{$smarty.server.HTTP_REFERER}-->"><span class="btn-prev">戻る</span></a>
 <!--{/if}-->
 </li>

// 40行目あたりを修正 --------------------

<li>

<a class="btn-action" href=""><span class="btn-prev">ログインページに戻る</span></a>

</li>

以上。

さらにメニューを非表示にしたい場合は、こちらなどを参照。

参考URL）

ブラウザで拡大表示したときの画像が右側に寄ってしまう現象の修正

比較的横幅の広い、中央寄せしている画像をサイトに掲載している場合、ホイールスクロールなどでサイトを拡大していくと、画像の幅が画面からはみだしたところで、画像が左端が画面の左端に合った状態で拡大されてしまう。

したがって、PCモニタの解像度によっては、デフォルト縮尺の状態でも、画像が中央から右にずれたような表示となってしまう。

この場合は、leftプロパティとネガティブマージンで対応する。

div.box {
    overflow:hidden;
    width:1370px;
    height:300px;
    /* ↓ここ */
    left: 50%; 
    margin-left: -685px;
    /* ↑ここ */
}

div.box img {
    width:1370px;
    height:300px;
}

div.box {

overflow:hidden;

width:1370px;

height:300px;

/* ↓ここ */

left: 50%;

margin-left: -685px;

/* ↑ここ */

}

div.box img {

width:1370px;

height:300px;

}

（imgがブロック要素であればimgの方に指定してもよろしいかと思う。）

動作確認ブラウザ

chrome 61.0.3163.100
Firefox 56.0.1(64bit)　他

参考サイト）

http://www.coolwebwindow.com/csstips/csstechnic/templatelayout/000347.php