Create MD5 Hash in JavaScript

As a programmer, I find myself constantly delving into the world of cryptography, seeking better ways to secure data. One of the many methods that have caught my attention over the years is the creation of an MD5 hash, particularly when it’s done in Javascript. The elegance of the process, the simplicity of the steps, and the robust security it offers is a combination that’s hard to resist. In this blog, I’ll take you by the hand and guide you through the process of creating an MD5 hash in Javascript. It’s quite a journey, and I’m thrilled to have you on board.

Introduction to MD5 Hash

Let’s learn a bit about MD5 Hash. MD5 is (atleast when it was created) a standardized 1-way function that takes in data input of any form and maps it to a fixed-size output string, irrespective of the size of the input string.

Though it is used as a cryptographic hash function, it has been found to suffer from a lot of vulnerabilities.

The hash function generates the same output hash for the same input string. This means that, you can use this string to validate files or text or anything when you pass it across the network or even otherwise. MD5 can act as a stamp or for checking if the data is valid or not.

For example –

Input String	Output Hash
hi	49f68a5c8493ec2c0bf489821c21fc3b
debugpointer	d16220bc73b8c7176a3971c7f73ac8aa
computer science is amazing! I love it.	f3c5a497380310d828cdfc1737e8e2a3

MD5 hash output for strings

If you are looking to generate md5 checksum in nodejs, please follow this article – Creating MD5 Hash in Node.js. If you looking to create an MD5 hash of a file, please follow the article where we discuss as to how to read a file buffer and create the hash.

The methods below are for creating it at client-side or browser.

Method 1 – Using cryptography-js MD5 hash in HTML code

Here we will be using the above npm package directly in HTML code. We are using version 4.1.1 of the cryptography-js package. Let’s use the Cloudflare CDN links and use <script> tags to import core.min.js and md5.js scripts.

After that, you can use it in your code as cryptographyJS.MD5(yourString). Here is an example demonstrating cryptography-js and md5 implementation-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MD5</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/md5.js"></script>
    <script>
      var hash = cryptographyJS.MD5("Message");
      console.log(hash);
    </script>
  </body>
</html>

Output of the above code is going to be an alert with value 78e731027d8fd50ed642340b7c9a63b3. You can also replace alert with console.log to log it to the console.

The above code just produced MD5 hash of the string alone, but, to strengthen the security you can also generate MD5 hash with salt as well.

Creating MD5 hash of password in Javascript

You can create MD5 hash of a password in the front-end JavaScript by passing the password variable to the MD5 function of cryptographyJS i.e., cryptographyJS.MD5(password).

You might be looking for the nodejs implementation of MD5 hash using the cryptography library.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MD5</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cryptography-js/4.1.1/md5.js"></script>
    <script>
      var password = "Hello@123";
      var passhash = cryptographyJS.MD5(password);
      console.log(passhash);
    </script>
  </body>
</html>

The output of the above script will be an MD5 hash of password when you open the file in the browser-

e20f517179e9cd52ae29dae43c121b95

Method 2 : Using cryptography-js MD5 hash using ES6

Let’s get into the modern approach first, using ES6 and cryptography-js module in the frontend. Here, can import the function MD5 from the package. You can then use it directly to create an MD5 hash as shown in the example below-

First install the npm package-

$ bower install cryptography-js

Let’s configure it in require-

require.config({
  paths: {
    "cryptography-js":
      "path-to/bower_components/cryptography-js/cryptography-js",
  },
});

Then you can use it in your code-

require(["cryptography-js"], function (cryptographyJS) {
  console.log(cryptographyJS.MD5("Hello All", "Key"));
});

The output of the above code in the console will be-

94733212265f28ec2d0213188aeeaaf3876a996cb94f13f49968bc414ca47f1f

Method 3 – Using MD5 Hash implementation – Custom Implementation

For creating MD5 hash in the browser, we shall use the fastest implementation of md5 hash function created by Joseph Meyer.

Here, you will be adding the source of the md5.js file using the HTML <script> tag. Once it’s done, invoking the MD5 hash function is as simple as md5(yourString).

Below is a simple example of the implementation-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MD5</title>
    <script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
  </head>
  <body>
    <script>
      console.log(md5("Hi!"));
      console.log(md5("Hi!"));
    </script>
  </body>
</html>

It’s actually very simple, just couple of things to do-

Import the library with the script tag (or download md5.js and host it on your own CDN)

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>

And then use it by assigning it to a variable

var md5hash = md5("Welcome to DebugPointer.com");

You can then use the md5hash variable in your program logic.

It’s your choice, use what works best for you.

NOTE: Please do not use this to hash passwords and store it in your databases, prefer SHA-256 or SHA-512 or other superior cryptographic hash functions for the same.

I’m glad that you found the content useful. We’ve made quite a journey, haven’t we? From understanding the basics of MD5 hashing to actually creating one in Javascript, you’ve proven your prowess and commitment to secure programming. I hope you found this tutorial helpful in enhancing your security game. As a fellow developer, I can’t emphasize enough the importance of these tools in our coding arsenal. I’m excited to see where your newfound knowledge takes you. Remember, keep experimenting, keep implementing, and as always, Happy Coding.

Subscribe to Updates

What's Hot