Защита от спама без капчи. Ajax, jQuery



Суть в следующем: во Frontend помещается только

<div> id='FormId></div>

Создается ресурс — контейнер с алиасом ajax,
внутри которого размещаются ресурсы без шаблона с выводом чисто формы, например создается ресурс с алиасом FormId с выводом только содержимого формы {{FormIdForm}} — стандарnная форма [[eform]] например, но с отключением капчи

В шапку добавляется

jQuery-ajax-form.js
не феншуй — согласен -:)

В logic.js добавляется код обработки, например

Upd: вызов библиотеки у нужном месте JS

$.getScript("assets/js/jQuery-ajax-form.js", function(){
 (function(o){
  if (typeof o === "string") o = o.split(',');
   var f = {d: String.fromCharCode(0x002F), p: "ajax", i: o};
   $.each(f.i, function(i, v){ $("#" + v).ajaxFormInit({url: ['', f.p, v].join(f.d)}); });
  })("FormId,FormId2");
});


Пример одной из последних реализаций — webgrafica.ru

upd. Первоначально jQuery-ajax-form.js — создавался как набор для использования форм в модальных окнах

upd2. Проверку X-Requested-With заголовка нужно делать отдельно, например вызовом сниппета dieForNoXHRRequest перед формой.

<?
if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
	$modx->sendErrorPage();
}
return "";


19 комментариев

avatar
а чем не нравится скрытое поле + проверка на его заполненность? данный метод работает уже несколько лет и ни разу не было спамного письма %)
avatar
Тут формы загружаются на страницу через ajax, поэтому можно не морочиться со скрытыми полями — робот все равно не видит форму.
avatar
после того как перестал работать метод с проверкой назаполненость родился описанный в посте вариант с использованием набора для подключения форм в модальных окнах
avatar
Зачем лишние скрипты не понимаю:(


<div id="orderPP" class="popup orderPP">
	<div class="close"></div>
	<div id="ajaxForm">
		{{eFeedbackForm}}
	</div>	
</div>

<script type="text/javascript">
	 $(document).on('submit','#ajaxForm form',function(ev){
        var frm = $('#ajaxForm form');
        //$('#submit').prop( "disabled", true );
        $.ajax({
            type: 'post',
            url: '/feedbackajaxform',
            data: frm.serialize(),
            success: function (data) {
   				$('ajaxForm form').remove();
                $('#ajaxForm').html( data ); 
            }
        });
        ev.preventDefault();
    });
</script>

switch($_GET['q']){     
        case 'feedbackajaxform':
            echo $modx->runSnippet('eForm', array(
				'formid' => 'feedbackForm',
				'subject' => 'Заказ с сайта ' . $modx->config['site_name'] ,
				'tpl' => 'eFeedbackForm',
				'report' => 'eFeedbackReport',
				'forvericodemid' => '0',
				'vericode' => '0',
				'thankyou' => 'thankyou',
				'to' => $modx->config['emailsender']			));
			die();
        break;
}

Писал же уже пример работы через ajax 3 + скрытое поле + нет вызова снипета на страничке пока не нажмут кнопку оптравить ибо выводиться только чанк + работает хоть с eform хоть с formlister да и любой другой ajax ) на ура просто и гениально
замечу что js в шапке сайта вообще не феншуйно нынче
avatar
я правилльно понимаю, что в данном случае форма сразу выдается в html, что позволяет роботам ее увидеть, наплевать на JS и попытаться начать ее проверять на разные варианты отправки?
avatar
Форма выдается по запросу, т.е. для этого робот должен уметь выполнять javascript. Большинство же просто парсит исходную разметку, в которой этой формы нет.
avatar
Явно в примере @Dmit3yy этого не видно вроде как…
avatar
форма выдается в html сразу по запросу работа с бекендом(eForm, FormLister).

Но мало ботов умеют работать с ajax я бы сказал что только если в ручную настроили.

Поэтому такой вариант работает очень хорошо + поисковики видят все то что видит пользователь и форму в том числе
avatar
webgrafica.ru/ajax/QuestionForm.html — не хватает проверки хотя бы заголовка X-Requested-With.
avatar
добавил пример в шапку
avatar
а может кто подскажет про такой способ:
<input value="" name="special" class="special" type="text" eform="Спец:date:0"  style="display:none;">

вставляю в форму, но спам все равно идет

вроде же должно работать
avatar
роботу до фени
style="display:none;"
, он же читает код и заполняет поле)
сделайте проверку на его заполненность и проблема уйдет
avatar
так все верно. Идея в том, что поле обязательно к незаполнению. если заполнено — то не отправляется
i--gu.ru/eform#992
avatar
разработчики роботов на месте не стоят… из-за того что на многих сайтах с таким методом стал прорываться спам и родилась данная идея роботам форму вообще не показывать… и как можно глубже запрятать ее вызов в JS
avatar
Ну пока не было проблем ) если что легко в плагине добавляем доп проверку.
В целом я за то что б было минимум кода js это ускоряет работу странички банально тот же монстр ajaxSubmit это боль:)
avatar
Вот это, по-моему, очень похоже на ваш способ.
avatar
Полностью отсекает спам проверка на маску телефона.
Если же в форме нет телефона, то можно добавить необязательное скрытое поле с именем «phone», а проверять его на правильность формата email. Роботы его с удовольствием заполняют, но заполняют неверно.
avatar
скорее всего это не на долго — наверняка популярные модификаторы инпутов не так сложно добавить в обработку робота, что бы быстро читать заданный формат телефона и заполнять его. Тем проще, если JS вызов модификатора поля находится прямо в этом же html а то и в плейсхолдер поставлен:)
Комментарий отредактирован 2017-06-13 10:44:35 пользователем swed
avatar
Это будет до тех пор пока так не начнут делать массово все.
Банально проверка на обязательное пустое поле работает уже больше 5 лет и пока проблем особых нет. было на паре сайтов но переименовал поле и все ок.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.