DEV Community

Cover image for HTML5 required and pattern are not a security feature
Christian Heilmann
Christian Heilmann

Posted on β€’ Originally published at christianheilmann.com

3 1

HTML5 required and pattern are not a security feature

In HTML5, you can provide a required attribute to ensure a certain field has been filled out before a form can be sent off.

<input id="tac" required name="tac" type="checkbox">
<label for="tac">I have read the terms and conditions</label>
Enter fullscreen mode Exit fullscreen mode

You can go even further and define a pattern that the value of the field needs to comply with before it can be sent off. For example, the following only allows entries that are either upper or lowercase a to z letters.

<label for="pkey">Product key (A-Z only)</label>
<input id="pkey" required name="id" pattern="[a-z|A-Z]+">
Enter fullscreen mode Exit fullscreen mode

You can read up more on MDN and see some more examples.

Whilst this is an excellent way to get the browser to provide feedback to your users, it is not a security measure. Any form that relies on this feature alone can be defeated by using the Developer Tools Console and using JavaScript to submit the form.

$('form').submit()
Enter fullscreen mode Exit fullscreen mode

You can see it here in action:

Screen recording of a demo of a form preventing submission and Console working around it

In any case, you always need to check the validity of any incoming data on the server side and, if necessary sanitise the data.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay