Logo

dev-resources.site

for different kinds of informations.

Anti-Spam Form for Yii2 Framework

Published at
7/14/2022
Categories
antispam
php
yii2
spam
Author
bartosz
Main Article
https://dev.to/bartosz/anti-spam-form-for-yii2-framework-10n5
Categories
4 categories in total
antispam
open
php
open
yii2
open
spam
open
Author
7 person written this
bartosz
open
Anti-Spam Form for Yii2 Framework

Anti-Spam Form is a form replacement component for the Yii2 Framework for creating anti-spam forms that are invisible in HTML code to spam bots & harvesting tools.

What's the idea behind anti-spam forms?

The concept is simple. Spam bots in most cases are simple tools. They will read your website, look for <form> HTML tags and artificially fill up the form fields and post it.

The usual spam bot is a web scraper written in Python retrieving raw HTML webpage content without evaluating JS code.

But one thing missed in anti-spam detection methods is that spam bots usually cannot process JavaScript code. For a good reason. It's time-consuming and requires JS interpreter to evaluate the JS code within the web page. And it's not that easy to incorporate JS evaluation without using complex & slower execution engines usually based on Chromium etc.

How to break spam bots?

Simple - put the HTML forms wrapped within JS code. Not the entire form, but the starting <form> tag with all its properties.

Suddenly the spam bots are unable to find it. Less spam without too much work.

How to install Anti-Spam Form component?

Install it first. Preferred way of WebApi interface installation is via composer.

Run:

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

Or add this entry:

"pelock/yii2-anti-spam-form": "*"
Enter fullscreen mode Exit fullscreen mode

directly to your composer.json in require section.

Installation package is available at https://packagist.org/packages/pelock/yii2-anti-spam-form

How to use Anti-Spam Form?

Replace your regular Yii2 ActiveForm component:

<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>
Enter fullscreen mode Exit fullscreen mode

with 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>
Enter fullscreen mode Exit fullscreen mode

That's all! The forms are going to work exactly the same, the only difference is the output HTML code.

Generated HTML code

What's the difference between the usual ActiveForm output HTML code and AntiSpamForm code?

Lets take a look. Before:

<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>
Enter fullscreen mode Exit fullscreen mode

After:

<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>
Enter fullscreen mode Exit fullscreen mode

The JavaScript code generates output <form> element with all of its properties. Simple & effective solution against spam bots and web scrapers, harvesters etc.

Should I remove CAPTCHA validations?

No. You should leave your CAPTCHA verifications in place, because some bots are able to run JS code, so the Anti-Spam Form will provide an additional layer of anti-spam protection.

Sources

All sources are available at GitHub:

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

Bugs, questions, feature requests

Hope you like it. For questions, bug & feature requests visit my site:

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

spam Article's
30 articles in total
Favicon
Fighting open source spam with interaction limits
Favicon
How to Detect Spam: A Complete Guide to AI-Powered Content Filtering
Favicon
Die Macht des "+" in deiner E-Mail-Adresse ✉️
Favicon
Prevent email spam from developers during application development
Favicon
The power of the "+" in your email address ✉️
Favicon
Hide Email Address From Spammers
Favicon
Google Calendar - Usage Limits Exceeded
Favicon
Fake Job Posts on LinkedIn: How to Identify and Avoid Them
Favicon
May I ask you a favor (list of accounts worth to be blocked)?
Favicon
How to Report Messages as Spam in Gmail to Improve Your Work and Life?
Favicon
stop email harvesting
Favicon
prevent email spam
Favicon
Touch and Alfa: The SMS Spam Giants of Lebanon
Favicon
How to secure an email address on your website
Favicon
9 ways you can stop spam on your website
Favicon
Introducing Advanced Spam and Phishing Filtering
Favicon
What does it mean when an email has a high spam score?
Favicon
Phishing vs. Spam
Favicon
Phishing vs. Spam
Favicon
How to Detect GPT Articles
Favicon
Stop the Invasion of Fake Followers
Favicon
WormGPT
Favicon
Is it too late to fix the problem of AI clutter on the web?
Favicon
How to stop spam -too with mailto links.
Favicon
Hear me out dev.to, Chat GPT against spam 🤔?
Favicon
Stop spam on Webflow contact forms using Zapier and OOPSpam
Favicon
Help fight spam in our community! 🙌
Favicon
Anti-Spam Form for Yii2 Framework
Favicon
NVIDIA Triton Spam Detection Engine of C-Suite Labs
Favicon
How to prevent web forms from spam

Featured ones:

Favicon
Open
abubakersiddique761
Favicon
Open
0x3d_site
Favicon
Open
0x2e_tech
Favicon
Open
0x4c-quest
Favicon
Open
gittech