How do I stop bots from using .submit() to bypass my 'required' fields?

Question

I have a form which is producing a lot of spam. I have made all inputs required and have attached a captcha. This has not had any affect.

I assume the bots are using form.submit() as for some reason this bypasses all my required fields AND also bypasses my onsubmit="check(e)"

I cannot seem to grab this event .submit() by any means. Does anyone know how to catch this event and make sure it is cancelled. I want the only way to submit the form is through clicking the submit button.

$("#myForm").submit(function(event) {
    console.log("Handler for .submit() called.");

    if (CaptchaInput.value == "") {
        event.preventDefault();
    }
});

My code that was supposed to catch a .submit() call and prevent the form submission. This function is never triggered.

<form target="hidden_iframe" 
onsubmit="if (CaptchaInput.value == '') { why += '- Please Enter CAPTCHA Code.\n'; alert(why); return false; };return checkform(this)" id="myForm">

Nigger

Verify the submission on the server, not the client, you can never trust anything done on the client – Methanol

Answer 1

You cannot. I can submit your form without a browser, or with JavaScript disabled. Anyone can just send an HTTP POST request to your server, without going through any client-side process you may introduce.

The solution to your problem is to also verify on the server, and don't rely on the client side validation to have completed successfully (or indeed, even to have been run at all).

Treat client-side validation as a convenience to your users, they see the error immediately without having to retype and resubmit the entire form.

Sphery

Can you possibly also give the overall idea to implement the server side verification ? – Rhymester

ReCaptcha and other captcha solutions have a server-side to them. The implementation is specific per solution, but it's usually well documented. – Infantry

With this stuff always think of protections on server-side first. Anything that would/could be done on client-side is just extra for convenience and/or pleasurable UX. – Sampler

Answer 2

Madras ghot is a good answer,

you can add ReCAPTCHA frotend and backend setup honey pots and do all sorts of things to deter bots,

but ultimately it comes down to the piece of backend code that handles the form which anyone can extract from looking at the network traffic.

Implementing a RefreshToken on every request is a good option but even then it's possible to figure out just by again looking at network traffic.

So really it's a game on cat and mouse and you're never done, aftter implementing every trick there is, you'll still have to maintain a blacklist of keywords/email addresses/ip ranges etc and review it everytime new spam starts leaking through.

Sulfur

Answer 3

You should skip the whole submit button and use javascript to get the value of your input fields. As to my knowledge, bots are not smart enough to click on spans. This is what I use and I don't have any problem with bot submissions.

<div id='contactUs'>
<p><span id='user_message' class='btngover' onclick='go();'>Send</span></p>
<p>
<input id='email' placeholder='Contact email...' autofocus>
<textarea id='subject' placeholder='Message content...'></textarea>
</p>
</div>

function go() {

const email = $('#email').val();
const subject = $('#subject').val();

if (email.trim() === '' || subject.trim() === '') {
    alert('All fields are required.');
    return;
}

console.log(email + ' ' + subject);

}

You can substitute the 'console.log', and just send it off to your PHP via Jquery AJAX POST.

Stoneman