How To Easily Create MD5 Hashes In JavaScript?

Even if it seems like JavaScript has been around forever, generating an MD5 hash with it is not a built-in feature. Today, I’ll show you how you can create MD5 hashes in your JavaScript code.

The easiest way to generate a MD5 hash with JavaScript is to use an external library. For example, the blueimp-md5 library will make the md5 function available, as with most other languages.

Let’s start with a brief introduction to this topic, and then I’ll show you exactly how you can use this library in your project.

Master Linux Commands
Your essential Linux handbook
Want to level up your Linux skills? Here is the perfect solution to become efficient on Linux. 20% off today!

Download now

Introduction

JavaScript

JavaScript is a programming language that is used for website development and often used with HTML and CSS that are two other main languages to build websites. JavaScript is generally used to add a part of dynamic element on a website, as it can use variables and more advanced functions than HTML and CSS.

Master your cyber security skills:
Secure your spot in the Accelerator Program, with early access to exclusive resources.
Get 1000+ classes, unlimited mentorship, and more.

The JavaScript code is set between two “script” markups (or in an external file) and looks like that:

<script>
document.getElementById("mydiv").innerHTML = "JavaScript!";
</script”>

MD5

MD5 is a cryptographic algorithm, often used to store passwords in a database.
In the early days of the Internet, websites mostly kept clear text passwords in their databases.
It wasn’t a viable solution, so developers used MD5 to obfuscate the password in the database.

Your Go-To Linux Command Reference!
Download your exclusive free PDF containing the most useful Linux commands to elevate your skills!

MD5 is an algorithm that produce a 32-characters hexadecimal string from any password, phrase or text.

Example:

 foobar ⇒ 3858f62230ac3c915f300c664312c63f

Using MD5 to store passwords is not safe anymore, as recent computers can find the original word or password faster than ever. But it’s still used for other applications, and that’s why you might need it in your JavaScript code.

Using MD5 with JavaScript

As explained in the introduction, JavaScript doesn’t have a built-in function to generate MD5 strings by default. We need to use an external library, and blueimp-md5 is probably your best option currently.

The blueimp-md5 library is compatible with most projects. You can use it with server-side environments like Node.js, module loaders like RequireJS or more directly with all web browsers.

In the next section, I’ll give you the step-by-step procedure to download it and add it to your JavaScript project.

How to generate MD5 hash with JavaScript

The easiest method for a small project would be to download the blueimp-md5 file from the GitHub project, but you can also use NodeJS to install the library on a server if you prefer.

I’ll show you both in this section.

Client-Side Installation

For a small project, or if, like me, you don’t necessarily like using framework, you can simply add the minify version of the library to your project:

  • Open the GitHub project here.
  • Find the md5.min.js file under the “js” folder.
  • Download it on your computer, and save it into your project.
    You can also display the “raw” version of the file, and copy/paste it into a new file in your project.

Once done, you can import and utilize the md5.min.js record in your HTML by adding:
<script src="js/md5.min.js"></script>

Your Go-To Linux Command Reference!
Download your exclusive free PDF containing the most useful Linux commands to elevate your skills!

I just created a tiny project to test it for you, my HTML code and folder content looks like that:

As you can see, once the library imported, it’s pretty simple to use.
Just use the md5() function, as if it was something native:
var hash = md5("value")

Here is my HTML code if you want to copy/paste it:

Hide your IP address and location with a free VPN:
Try it for free now, with advanced security features.
2900+ servers in 65 countries. It's free. Forever.
<html>
    <head>
        <title>Tests InfosecScout</title>
    </head>
    <body>
        <script src="md5.min.js"></script>
        <script>
            var hash = md5("value")
            alert(hash)
        </script>
    </body>
</html>

When you open the HTML page in your web browser, you’ll get a popup with the MD5 value:

Obviously, this is just a dumb example, but you can build anything from there.

Server-Side Installation

If you are using NodeJS, you probably already know how to do this, but here is a quick summary of the main steps:

  • Install the blueimp-md5 kit first, to use the server-side MD5 library for NodeJS:
    npm install blueimp-md5
  • Then create a server.js file with the following content:
require('http')
  .createServer(function (req, res) {
    // The md5 module exports the md5() function:
    var md5 = require('./md5'),
      // Use the following version if you installed the package with npm:
      // var md5 = require("blueimp-md5"),
      url = require('url'),
      query = url.parse(req.url).query
    res.writeHead(200, { 'Content-Type': 'text/plain' })
    // Calculate and print the MD5 hash of the url query:
    res.end(md5(query))
  })
  .listen(8080, 'localhost')
console.log('Server running at http://localhost:8080/')
  • Start the application with:
    node server.js
  • Do a quick test by opening your web browser at http://localhost:8080/
    You should see the MD5 output.
  • The value will change each time you update the URL, so opening http://localhost:8080/?foo&bar&baz would produce another MD5 hash.
    But you get the idea, and can now use it in your other projects.

Conclusion

That is, you now know how to generate MD5 hashes in JavaScript.
I hope this article was useful, and if you need any more tutorials about MD5 in general, you are on the best website for this. Here are a few recommendations:

Whenever you’re ready for more security, here are things you should think about:

- Break free from Gmail: You should be able to choose what happens to your data. With Proton, only you can read your emails. Get private email.

- Protect yourself online: Use a high-speed Swiss VPN that safeguards your privacy. Open-source, no activity logs. Get Proton VPN risk-free.

- Master Linux commands: A sure method to learn (and remember) Linux commands. Useful ones only, one at a time, with clear explanations. Download the e-book.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *