Input Validation Bypass on Netlify forms request

[cavacado]

Sitename: https://www.tradetrust.io/

Hi there, we’ve been using netlify and we’ve been satisfied with it so far, thanks for all the hard work you guys have put in.

I have a question, and its regarding the built-in forms provided by Netlify. Lets say I have a contact us form and some of the fields are required before. To give an example, a form with name (required) and message (optional) [client side validation].

Our audit team has tried intercepting the form submission request using their “BurpSuite” and they have managed to alter the request such that they remove the required field (name) and they managed to hit the endpoint and submit this altered request.

Is there any feature / protection measures that are available on Netlify, to prevent an interception of the request?

Thanks for taking the time to answer this question.

[clarnx]

Hi @cavacado, thanks for posting and welcome to the Netlify support Forums.
Very good question.

You can do client-side validation as you indicated.
However, unfortunately Netlify forms does not currently have an API for you to do backend form validation.

An alternative solution will be to POST the form data to a Netlify function and then validate the form data for the required fields as you stated. If the validation requirments are not met then you can respond with an error message, redirect e.t.c to the end user.

Once the form data is valid after the passing the required validation, you can use SMTP clients such as Nodemailer, Emailjs e.t.c to send the form data to your email just like how Netlify forms forwards the submissions to your configured email. You can also use third party providers like SendGrid e.t.c as well to send form data to your email.

In addition, there is a post here on this forum that is similar to the question you asked.

@fool’s response explains how submissions work and it should give you an idea of the whole Netlify form submission workflow.

@fool

When we get a form submission, we store the data, kick off an asynchronous spam check via akismet, and do whatever your form/site’s-statically-deployed-content says around interacting with the visitor’s browser.

Once we’ve received the results of the spam-check, if they are good (not-spam), we fire off the submission-received even-triggered function as well as any other form notifications you have.

So - if you read between the lines, the event triggered function both runs after the submission and likely after the user has navigated away from your site. So changing the response there won’t have any impact in for your visitor, only what your statically deployed content is coded to do, will happen. The event-triggered function also isn’t run AT ALL if the entry is marked as spam!

Now, can you do dynamic, real time things with functions? Yes! Just not that event-triggered function I’d suggest that you could for instance POST to a function (not the event-triggered function; those are special and are not user-executable in production) - you’ll need to name it something different so it is a “regular function” not even triggered - but THAT function could:

• do real-time calculation
• present results to customer
• present custom HTTP status codes etc to the customer.

Of course at that point you aren’t using our form handling feature, so your function would also have to store the results of the POST.

You could probably come up with a hybrid situation that both:

• runs your custom function to do real-time calculation and return to visitor
• also uses the automatic event-triggered function to do async writes to an external data source (or similar).

Hope that helps but let me know if not!

Hope this helps.
Thanks.

[hrishikesh]

Hey @cavacado,

While @clarnx is correct, turns out we can get creative and use Netlify Edge Functions to achieve what you need.

Here’s a very short example:

https://github.com/Hrishikesh-K/edge-form

The site is deployed here: https://sparkling-daffodil-8446e2.netlify.app/

If you submit the form without any name input, it would fail, however, as soon as you add any string to the name input, it works.

You’d have to customise this for your needs, though. Also, I’m not sure how well this would work for forms with file uploads, so that’s something to be cautious about.

An important note though, Edge Functions are in Beta right now and can fail sometimes. It’s not recommended yet for mission critical apps where even a single miss can cause serious issues.