JavaScript only validation on AJAX form submit

Question

I've been mulling this question over for a few days in my head and I can't come to a solid answer.
We understand that client side validation for forms is not enough, because you can easily turn JavaScript off. But what about for a form that is submitted purely through AJAX (I have a register form that I want to be submitted through AJAX). If you turn JavaScript off, you won't be able to submit the form anyways, so wouldn't it be alright to do all of your validation on the frontend?

Answer 1

The answer is 'no' as others point out but it's really important to understand why. The best way, I think is take web browser (the following assumes Chrome), point it to your web page and right click->inspect element. Select the 'network' tab. Now do your submit. One or more entries will appear in the view. You'll see that there's a POST call with headers and a payload etc. in it.

That POST call is all your server will ever see. Everything it knows about the request is shown in that networking. Now right click->Copy->Copy as cURL (cmd or bash as you wish). Open a text editor and paste. What you will see is a command-line instruction cURL installed. If you have cURL (you should probably get it if you don't) you can run this command. If you look on your server logs, it will look pretty much exactly like the one that came from the browser.

Now go to the text file and change some of the payload data to something invalid. Run that command and look at your server logs. It should now be readily apparent why you must do server side validation. It's the client-side validation that is optional.

Answer 2

The validation on the client side helps to improve the usability. For example you can display a nice message what the user did wrong and do this really fast. Because the client already knows the info and doesn't need to make requests.

Design recommendation

You need 2 validations. On the Client and one on the backend. The backend can check if the data is really correct and valid before working with them / storing them.

Keep the client side validation and add also an backend validation.

If you don't validate the data on the backend again, you'll be creating a big leak in your application. @JimmyJames already explained how.

Answer 3

Nope.

Any code running on a computer you don't control is suspect, by definition.

From the server, you can't even guarantee that you're talking to a browser & not some custom code that's pretending to be a browser.

It's a great idea to validate user input on the client as a convenience so you can provide immediate feedback to the user, but you still have to validate it on your server.

Answer 4

It's trivial for a user to capture the AJAX request after the data has been validated via JavaScript, and manipulate it before sending it on to your server.

Or, record the request and replay it at will, completely bypassing the UI altogether.

Or any number of other scenarios out of your (server's) control.

The point is that you should never trust that input from the client is acceptable as-is. You should always validate on the server.