Anti-Spam Form là một thành phần thay thế biểu mẫu cho Yii2 Framework để tạo ra các biểu mẫu chống spam không hiển thị trong mã HTML đối với các bot spam và công cụ thu thập thông tin.
Ý tưởng đằng sau các biểu mẫu chống spam là gì?
Khá đơn giản. Các bot spam trong hầu hết các trường hợp là các công cụ đơn giản. Chúng sẽ đọc trang web của bạn, tìm các thẻ HTML <form> và điền thông tin giả mạo vào các trường biểu mẫu rồi gửi đi.
Thường thì bot spam là các công cụ web scraper viết bằng Python, thu thập nội dung trang web HTML nguyên thô mà không đánh giá mã JS.
Nhưng một điều bị bỏ sót trong các phương pháp phát hiện chống spam là bot spam thường không thể xử lý mã JavaScript. Và có lý do cho điều đó. Việc này tốn thời gian và yêu cầu trình thông dịch JS để đánh giá mã JS trong trang web. Và không dễ dàng để tích hợp đánh giá JS mà không sử dụng các công cụ thực thi phức tạp và chậm chạp thường được dựa trên Chromium v.v.
Làm thế nào để làm hỏng bot spam?
Đơn giản - đặt các biểu mẫu HTML bên trong mã JS. Không phải toàn bộ biểu mẫu, mà chỉ thẻ <form> khởi đầu với tất cả các thuộc tính của nó.
Bất ngờ thay, các bot spam không thể tìm thấy nó. Giảm spam mà không cần làm quá nhiều công việc.
Cách cài đặt thành phần Biểu mẫu chống spam như thế nào?
Trước tiên, hãy cài đặt nó. Cách ưu tiên để cài đặt qua giao diện WebApi là thông qua composer.
Chạy lệnh sau:
php composer.phar require --prefer-dist pelock/yii2-anti-spam-form "*"
hoặc thêm vào file composer.json dòng sau:
"pelock/yii2-anti-spam-form": "*"
Gói cài đặt có sẵn tại https://packagist.org/packages/pelock/yii2-anti-spam-form
Cách sử dụng Biểu mẫu chống spam là gì?
Thay thế thành phần ActiveForm Yii2 thông thường của bạn:
<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>
với 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>
Đó là tất cả! Các biểu mẫu sẽ hoạt động hoàn toàn giống nhau, điều duy nhất khác biệt là mã HTML đầu ra.
Mã HTML được tạo ra
Sự khác biệt giữa mã HTML thông thường được tạo ra bởi ActiveForm và mã của AntiSpamForm là gì?
Trước khi sử dụng:
<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>
Sau khi áp dụng:
<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>
Mã JavaScript tạo ra phần tử <form> với tất cả các thuộc tính của nó. Một giải pháp đơn giản & hiệu quả chống lại các bot spam, trình thu thập web, máy thu thập thông tin v.v.
Tôi nghĩ bạn nên giữ lại việc xác nhận CAPTCHA, vì một số bot có khả năng chạy mã JS, vì vậy Biểu mẫu chống spam sẽ cung cấp một lớp bảo vệ chống spam bổ sung.
Tất cả các nguồn đều có sẵn trên GitHub:
