Yii2 프레임워크용 스팸 방지 양식

스팸 방지 양식은 HTML 코드에서 스팸 봇 및 수집 도구에 보이지 않는 스팸 방지 양식을 만들기 위한 Yii2 Framework의 양식 교체 구성 요소입니다.

스팸 방지 양식의 기본 개념은 무엇입니까?

개념은 간단합니다. 대부분의 경우 스팸 봇은 단순한 도구입니다. 그들은 귀하의 웹 사이트를 읽고 <form> HTML 태그를 찾고 인위적으로 양식 필드를 채우고 게시합니다.

일반적인 스팸 봇은 JS 코드를 평가하지 않고 원시 HTML 웹 페이지 콘텐츠를 검색하는 Python으로 작성된 웹 스크레이퍼입니다.

그러나 스팸 방지 탐지 방법에서 놓치는 한 가지는 스팸 봇이 일반적으로 JavaScript 코드를 처리할 수 없다는 것입니다. 좋은 이유가 있습니다. 시간이 많이 걸리고 웹 페이지 내에서 JS 코드를 평가하려면 JS 인터프리터가 필요합니다. 일반적으로 Chromium 등을 기반으로 하는 복잡하고 느린 실행 엔진을 사용하지 않고 JS 평가를 통합하는 것은 그리 쉽지 않습니다.

스팸 봇을 차단하는 방법?

간단함 - JS 코드 내에 HTML 양식을 래핑합니다. 전체 양식이 아니라 모든 속성이 포함된 시작<form> 태그입니다.

갑자기 스팸 봇이 그것을 찾을 수 없습니다. 너무 많은 작업 없이 적은 스팸.

Anti-Spam Form 구성 요소를 설치하는 방법은 무엇입니까?

먼저 설치하십시오. WebApi 인터페이스 설치의 기본 방법은 composer 입니다.

운영:

php composer.phar require --prefer-dist pelock/yii2-anti-spam-form "*"

또는 다음 항목을 추가하십시오.

"pelock/yii2-anti-spam-form": "*"

요구 섹션의 composer.json에 직접 연결합니다.

설치 패키지는 https://packagist.org/packages/pelock/yii2-anti-spam-form에서 사용할 수 있습니다.

안티 스팸 양식을 사용하는 방법?

일반 Yii2ActiveForm 구성 요소를 교체합니다.

<div class="active-form">
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
    <?= $form->field($model, 'name') ?>
    <?= $form->field($model, 'email')->textInput(['type' => 'email']) ?>
    <?= $form->field($model, 'subject') ?>
    <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>

    <?php //echo Html::submitButton('Send', ['class' => 'btn btn-block btn-primary', 'name' => 'contact-button']) ?>

    <?php echo $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 'template' => '<div class="row"><div class="col-xs-4 col-sm-3 col-md-3">{image}</div><div class="col-xs-2 col-sm-3 col-md-3">{input}</div><div class="col-xs-6 col-sm-6 col-md-6">'. Html::submitButton('Send', ['class' => 'btn btn-block btn-primary', 'name' => 'contact-button']) .'</div></div>', ]) ?>
<?php ActiveForm::end(); ?>
</div>

AntiSpamForm 포함:

// include AntiSpamForm
use pelock\antispamform\AntiSpamForm;

...

<div class="active-form">
<!--replace here -->
<?php $form = AntiSpamForm::begin(['id' => 'contact-form']); ?>
    <?= $form->field($model, 'name') ?>
    <?= $form->field($model, 'email')->textInput(['type' => 'email']) ?>
    <?= $form->field($model, 'subject') ?>
    <?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>

    <?php //echo Html::submitButton('Send', ['class' => 'btn btn-block btn-primary', 'name' => 'contact-button']) ?>

    <?php echo $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 'template' => '<div class="row"><div class="col-xs-4 col-sm-3 col-md-3">{image}</div><div class="col-xs-2 col-sm-3 col-md-3">{input}</div><div class="col-xs-6 col-sm-6 col-md-6">'. Html::submitButton('Send', ['class' => 'btn btn-block btn-primary', 'name' => 'contact-button']) .'</div></div>', ]) ?>
<!--and here -->    
<?php AntiSpamForm::end(); ?>
</div>

그게 다야! 양식은 정확히 동일하게 작동하며 유일한 차이점은 출력 HTML 코드입니다.

생성된 HTML 코드

일반적인 ActiveForm 출력 HTML 코드와 AntiSpamForm 코드의 차이점은 무엇입니까?

한 번 보자. 전에:

<div class="active-form">
  <!--visible <form> tag -->  
  <form id="contact-form" action="/contact" method="post">
    <input type="hidden" name="_csrf" value="u18o4NxJC5lZEhHhjpMTd-c7p3ZzYzl0wvsXMiefJJ_0HWGpr1pm6x5Qa4vnpVw5o1yXNzEQ7USUlE9HVNlGzQ==">
    <div class="form-group field-contactform-name required">
      <label class="control-label" for="contactform-name">Name</label>
      <input type="text" id="contactform-name" class="form-control" name="ContactForm[name]" aria-required="true">
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group field-contactform-email required">
      <label class="control-label" for="contactform-email">Email</label>
      <input type="email" id="contactform-email" class="form-control" name="ContactForm[email]" aria-required="true">
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group field-contactform-subject required">
      <label class="control-label" for="contactform-subject">Subject</label>
      <input type="text" id="contactform-subject" class="form-control" name="ContactForm[subject]" aria-required="true">
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group field-contactform-body required">
      <label class="control-label" for="contactform-body">Body</label>
      <textarea id="contactform-body" class="form-control" name="ContactForm[body]" rows="6" aria-required="true"></textarea>
      <p class="help-block help-block-error"></p>
    </div>
    <div class="form-group field-contactform-verifycode">
      <label class="control-label" for="contactform-verifycode">Verification Code</label>
      <div class="row">
        <div class="col-xs-4 col-sm-3 col-md-3">
          <img id="contactform-verifycode-image" src="/site/captcha?v=62cff29d6ebe55.89254929" alt="">
        </div>
        <div class="col-xs-2 col-sm-3 col-md-3">
          <input type="text" id="contactform-verifycode" class="form-control" name="ContactForm[verifyCode]">
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
          <button type="submit" class="btn btn-block btn-primary" name="contact-button">Send</button>
        </div>
      </div>
      <p class="help-block help-block-error"></p>
    </div>
  </form>
</div>

후에:

<div class="active-form">
  <!-- <form> tag dynamically generated with the JavaScript code -->    
  <script>
    document.write(atob("PGZvcm0gaWQ9ImNvbnRhY3QtZm9ybSIgYWN0aW9uPSIvY29udGFjdCIgbWV0aG9kPSJwb3N0Ij4KPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0iX2NzcmYiIHZhbHVlPSJ1MFczN0JLaDJOQko2Q2lVeTFxc3R3OEp6aC1mcUxxOXRnOEpQem9CUjZfMEJfNmxYX0sxb2c2cVV2NmliT1A1UzI3LVh0M2F6bzNnWUZGS1NVY2xfUT09Ij4="));
  </script>
  <div class="form-group field-contactform-name required">
    <label class="control-label" for="contactform-name">Name</label>
    <input type="text" id="contactform-name" class="form-control" name="ContactForm[name]" aria-required="true">
    <p class="help-block help-block-error"></p>
  </div>
  <div class="form-group field-contactform-email required">
    <label class="control-label" for="contactform-email">Email</label>
    <input type="email" id="contactform-email" class="form-control" name="ContactForm[email]" aria-required="true">
    <p class="help-block help-block-error"></p>
  </div>
  <div class="form-group field-contactform-subject required">
    <label class="control-label" for="contactform-subject">Subject</label>
    <input type="text" id="contactform-subject" class="form-control" name="ContactForm[subject]" aria-required="true">
    <p class="help-block help-block-error"></p>
  </div>
  <div class="form-group field-contactform-body required">
    <label class="control-label" for="contactform-body">Body</label>
    <textarea id="contactform-body" class="form-control" name="ContactForm[body]" rows="6" aria-required="true"></textarea>
    <p class="help-block help-block-error"></p>
  </div>
  <div class="form-group field-contactform-verifycode">
    <label class="control-label" for="contactform-verifycode">Verification Code</label>
    <div class="row">
      <div class="col-xs-4 col-sm-3 col-md-3">
        <img id="contactform-verifycode-image" src="/site/captcha?v=62cff214a00af2.73036299" alt="">
      </div>
      <div class="col-xs-2 col-sm-3 col-md-3">
        <input type="text" id="contactform-verifycode" class="form-control" name="ContactForm[verifyCode]">
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6">
        <button type="submit" class="btn btn-block btn-primary" name="contact-button">Send</button>
      </div>
    </div>
    <p class="help-block help-block-error"></p>
  </div>
  </form>
</div>

JavaScript 코드는 모든 속성과 함께 출력<form> 요소를 생성합니다. 스팸 봇 및 웹 스크레이퍼, 수확기 등에 대한 간단하고 효과적인 솔루션

CAPTCHA 유효성 검사를 제거해야 합니까?

아니요. 일부 봇은 JS 코드를 실행할 수 있으므로 CAPTCHA 확인을 그대로 두어야 합니다. 따라서 스팸 방지 양식은 추가적인 스팸 방지 보호 계층을 제공합니다.

출처

모든 소스는 GitHub에서 사용할 수 있습니다.

https://github.com/PELock/yii2-anti-spam-form

버그, 질문, 기능 요청

네가 좋아하길 바래. 질문, 버그 및 기능 요청은 내 사이트를 방문하십시오.

Bartosz Wójcik | https://www.pelock.com