Table of Contents (click to expand)
Javascript enables the strength check of a password instantly, without communicating with the server or refreshing the page as it runs its scripts on the browser itself.
The internet began as a way to connect multiple computers and bridge interaction between them, regardless of vast distances or device type.
A common language of the internet was formulated, one that enabled different networks to communicate and share data, resulting in the interconnected world that we now inhabit. We do pretty much everything on the internet today, be it banking, shopping, dating, and more often than not, mindlessly perusing cat videos.
As is common knowledge, these websites hold sensitive user data, which, when accessed by the wrong hands, can wreak havoc for the site users and the company in question. Naturally, to circumvent this problem, websites require you to add a strong password when you first access the website.
As computers are getting stronger, so is their ability to crack passwords. Hence, it is advised to add different types of characters in your password.
This is also reflected in the form fields on new login processes, as they state it is mandatory to add characters like an uppercase word (A), a lowercase word (m), a number (7), a special character ( _, #, &, %, /), and a minimum number of overall characters (8-15), etc.
But how do these form fields assess the strength of your password and determine that you have successfully ticked off all criteria when it doesn’t store your every attempt at creating a new password on its local servers?
How does it seem to happen instantly on the form field without any lag or refreshing of the webpage?
Let’s take a look at how this seamless interaction is achieved.
Recommended Video for you:
How Websites Work?
First, let’s briefly dive in to how websites work. A website consists of a group of individual web pages that are interconnected to display different parts of the website.
A web page uses text, images, videos, links, interactive fields, and buttons to communicate with you, the person who happens to land on the domain (e.g. https://www.scienceabc.com) of the website.
Much like how our body’s visual and functional representation (the color of our hair, how protein is broken into amino acids) is made up of genetic code (DNA), the visual and functional representation of a website (what the color of the header is, how it recommends similar products) is similarly represented in digital code (HTML, CSS, JavaScript, PHP, etc).
Also Read: What Exactly Happens When You Visit A Website?
Where Is The Password Evaluated?
When you enter a web address (e.g. https://www.scienceabc.com) on a browser (Chrome, Firefox, etc.), the browser fetches the code that makes up the website from where the web server is hosted and displays this information on your screen. Every time you reload the screen or click on a new page of the website, this process is executed.
Notice that as you land on a new website and start the process of creating a new login and password, the webpage never reloads until you click the sign-up button. The webpage checks the strength of your password without communicating with the server because the code is getting executed on your computer’s storage through the web browser you’re using. This bit of magic is done by writing a small scrap of code in a language called JavaScript.
What Is Javascript?
Javascript is an object-oriented programming language, which, along with HTML and CSS, makes up the core technology on which the world wide web is built. It is used to add interactivity to websites and is largely used for managing client-facing web page behavior, meaning that it is responsible for the web page’s communication with you and vice-versa.
For instant interaction on a web page (e.g., animations when you click a button, checking if the username already exists, etc.) Javascript runs on the web browser you use to access a website, not the server. This quick interaction can add lots of character to an otherwise skeletal site, making it more user-friendly and a memorable experience for the visitor.
How Javascript Evaluates Your Password’s Strength?
Javascript can be programmed to watch fields on which users are going to input data. Specific logic can be set for the fields for any number of possible inputs made by the user, to which Javascript responds accordingly.
In the case of setting a new password, a condition can be added for the field that asks the user to form a password, including things like:
- Uppercase words (A, B, C)
- Lowercase words (a, b, c)
- Numbers (1, 2, 3)
- Special Characters ( _, /, #, &, %, /)
- A particular length of the password (8 – 15 characters)
The programmed script will keep watching the password field for your input and run it through its checklist of characters that must be added in your entry. In case any of them is missing, the script displays an error message stating exactly which characters you have failed to add in your password.
It will also gauge the strength of your password based on the complexity of your password; the more varied characters you use, the more difficult it is to crack your password.
Closing Thoughts
Although this method is widely used, many websites are opting for a Single Sign-On (SSO) system for user access. SSO’s enable third-party websites to use user accounts from Google, Facebook, Twitter, etc. for authentication and a secure sign-in for visitors, without needing to create a new account specifically for that website, thus eliminating the hassle of keeping user logs.
This makes intuitive sense; as the number of websites you visit that require an authentication increases, the number of passwords you will have to remember will also increase, and who likes doing that?
However, this method of password validation will not completely vanish, as many websites also want a standalone entry for their users (online banking, stock trading, etc.), so you might want to keep snacking on almonds to keep that memory of yours strong enough for our modern myriad of multi-character passwords.
Also Read: OAuth: How Does ‘Login With Facebook/Google’ Work?
How well do you understand the article above!
