Как я могу перехватить отправку формы, вызванной JavaScript? - PullRequest
Новая
       80

Как я могу перехватить отправку формы, вызванной JavaScript?

0 голосов
/ 12 марта 2019

Есть ли способ перехватить отправку формы, которая была инициирована JavaScript?

Я пытаюсь уменьшить количество спам-сообщений от ботов, выполняя некоторую проверку на стороне клиента (с помощью reCAPTCHA v2, если это имеет значение). Когда пользователь отправляет форму, я могу подтвердить, что входные данные были проверены (reCAPTCHA была заполнена), проверив флаг в методе, указанном с помощью атрибута onSubmit формы ... 

<form ... id="my_form" onSubmit="submitHandler()">

function submitHandler(e) {
    if ( !valid ) {
        e.preventDefault();
    }
}

... или в методе, определенном с помощью обработчика событий jQuery .submit (): 

$('#my_form').submit(function(e) {
    if ( !valid ) {
        e.preventDefault();
    }
});

Проблема в том, что ни один из этих методов не вызывается при отправке формы через JavaScript. Когда я открываю консоль и проверяю отправку через JavaScript ... 

document.getElementById('my_form').submit()

... форма отправляется и ни один метод не вызывается. Похоже, что событие отправки формы не было запущено, поэтому я не могу проверить, были ли данные проверены.

Предположительно, эта отправка формы на основе JavaScript - это метод, который спам-боты будут использовать для отправки формы, что отслеживает тот факт, что спам в форме не был уменьшен благодаря этим усилиям. Они могут обойти мои чеки.

Для ясности, сторонняя служба форм выполняет тяжелую работу по фактической проверке поля на стороне сервера. Я просто пытаюсь уменьшить количество спама, который отправляется на их сервер.

Можно ли перехватить отправку этой формы на основе JavaScript? Неправильно ли я подхожу к этому?

РЕДАКТИРОВАТЬ: Чтобы уточнить, метод onsubmit вызывает вызывается, когда форма отправляется с помощью кнопки отправки формы. Но он не вызывается, когда форма отправляется через JavaScript (.submit ()).

1 Ответ

2 голосов
/ 12 марта 2019

Только проверка reCAPTCHA во внешнем интерфейсе ничего не делает и ни в коем случае не является мерой безопасности.Клиент может поменять / полностью проигнорировать ваш javascript. Пожалуйста, проверьте действительность серверной стороны запроса .

Однако перехват запросов возможен с помощью Service Worker , если вы хотитеНапример, уменьшите нагрузку на ваш сервер, учитывая, что

  1. Боты UserAgent использует эту функцию.
  2. Бот фактически отображает ваш интерфейс для отправки запроса
  3. Ваш сайт использует https

A Service Worker действует как прокси между клиентом, сервером и кешем.Таким образом, он может проверять и изменять запросы, отправленные клиентом.В этом случае мы хотим проверить наличие определенного атрибута в запросе и игнорировать запрос, если он не найден.

<form ... action="/my-form-route" id="my_form" onSubmit="submitHandler()">

main.js 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

service-worker.js 

self.addEventListener('fetch', (event) => {
    // use json(), text() or formData() depending on what the request should look like
    const formData = await event.request.body.formData();

    if (event.request.url.includes('my-form-route') && formData.valid) {
         return; // if google recaptcha is found in request object, ignore the request
    }
    event.respondWith(
        new Promise (resolve, reject) {
           reject('nope')
        }
    )
})

Это можно легко обойти, хотя: 

curl --header "Content-Type: application/json" \
  --request POST \
  --data '{"username":"Jeff","email": "jeff@totallylegit.com", "content": "WOW NICE ARTICLE\n free leg enlargement @ totallylegit.com btw lol"}' \
  http://example.com/my-form-route
...