{"id":119,"date":"2022-11-29T06:11:37","date_gmt":"2022-11-29T05:11:37","guid":{"rendered":"https:\/\/infosecscout.com\/?p=119"},"modified":"2023-11-22T13:00:04","modified_gmt":"2023-11-22T12:00:04","slug":"md5-in-javascript","status":"publish","type":"post","link":"https:\/\/infosecscout.com\/md5-in-javascript\/","title":{"rendered":"How To Easily Create MD5 Hashes In JavaScript?"},"content":{"rendered":"\n<p>Even if it seems like JavaScript has been around forever, generating an MD5 hash with it is not a built-in feature. Today, I&#8217;ll show you how you can create MD5 hashes in your JavaScript code.<\/p>\n\n\n\n<p><strong>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.<\/strong><\/p>\n\n\n\n<p>Let&#8217;s start with a brief introduction to this topic, and then I&#8217;ll show you exactly how you can use this library in your project.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#Introduction\" title=\"Introduction\">Introduction<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#JavaScript\" title=\"JavaScript\">JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#MD5\" title=\"MD5\">MD5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#Using_MD5_with_JavaScript\" title=\"Using MD5 with JavaScript\">Using MD5 with JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#How_to_generate_MD5_hash_with_JavaScript\" title=\"How to generate MD5 hash with JavaScript\">How to generate MD5 hash with JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#Client-Side_Installation\" title=\"Client-Side Installation\">Client-Side Installation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#Server-Side_Installation\" title=\"Server-Side Installation\">Server-Side Installation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/infosecscout.com\/md5-in-javascript\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JavaScript\"><\/span>JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/javascript-code.jpg\" alt=\"\" class=\"wp-image-689\" srcset=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/javascript-code.jpg 800w, https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/javascript-code-300x113.jpg 300w, https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/javascript-code-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>The JavaScript code is set between two &#8220;script&#8221; markups (or in an external file) and looks like that:<\/p>\n\n\n\n<p><code>&lt;script&gt;<br>document.getElementById(\"mydiv\").innerHTML = \"JavaScript!\";<br>&lt;\/script\u201d&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"MD5\"><\/span>MD5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>MD5 is a cryptographic algorithm, often used to store passwords in a database.<br>In the early days of the Internet, websites mostly kept clear text passwords in their databases.<br>It wasn\u2019t a viable solution, so developers used&nbsp;MD5 to obfuscate the password in the database.<\/p>\n\n\n\n<p>MD5 is an algorithm that produce a 32-characters hexadecimal string from any password, phrase or text.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;foobar \u21d2 3858f62230ac3c915f300c664312c63f<\/pre>\n\n\n\n<p>Using MD5 to store passwords is not safe anymore, as recent computers can find the original word or password faster than ever. But it&#8217;s still used for other applications, and that&#8217;s why you might need it in your JavaScript code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_MD5_with_JavaScript\"><\/span>Using MD5 with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>As explained in the introduction, JavaScript doesn&#8217;t have a built-in function to generate MD5 strings by default. We need to use an external library, and <a href=\"https:\/\/github.com\/blueimp\/JavaScript-MD5\" target=\"_blank\" rel=\"noreferrer noopener\">blueimp-md5<\/a> is probably your best option currently.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>In the next section, I&#8217;ll give you the step-by-step procedure to download it and add it to your JavaScript project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_generate_MD5_hash_with_JavaScript\"><\/span><strong>How to generate MD5 hash with JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>I&#8217;ll show you both in this section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Client-Side_Installation\"><\/span><strong>Client-Side Installation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For a small project, or if, like me, you don&#8217;t necessarily like using framework, you can simply add the minify version of the library to your project:<\/p>\n\n\n\n<ul>\n<li><strong>Open the GitHub project here.<\/strong><\/li>\n\n\n\n<li><strong>Find the md5.min.js file under the &#8220;js&#8221; folder.<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"406\" class=\"wp-image-683\" style=\"\" src=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-md5-js.jpg\" alt=\"\" srcset=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-md5-js.jpg 944w, https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-md5-js-300x129.jpg 300w, https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-md5-js-768x330.jpg 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><\/li>\n\n\n\n<li><strong>Download it on your computer, and save it into your project.<\/strong><br>You can also display the &#8220;raw&#8221; version of the file, and copy\/paste it into a new file in your project.<br><img loading=\"lazy\" decoding=\"async\" width=\"951\" height=\"423\" class=\"wp-image-682\" style=\"\" src=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-raw.jpg\" alt=\"\" srcset=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-raw.jpg 951w, https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-raw-300x133.jpg 300w, https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/blueimp-raw-768x342.jpg 768w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/li>\n<\/ul>\n\n\n\n<p>Once done, you can import and utilize the md5.min.js record in your HTML by adding:<br><code>&lt;script src=\"js\/md5.min.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>I just created a tiny project to test it for you, my HTML code and folder content looks like that:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"444\" src=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/blueimp-project.jpg\" alt=\"\" class=\"wp-image-684\" srcset=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/blueimp-project.jpg 1020w, https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/blueimp-project-300x131.jpg 300w, https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/blueimp-project-768x334.jpg 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n\n\n\n<p>As you can see, once the library imported, it&#8217;s pretty simple to use. <br>Just use the md5() function, as if it was something native:<br><code>var hash = md5(\"value\")<\/code><\/p>\n\n\n\n<p>Here is my HTML code if you want to copy\/paste it:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;Tests InfosecScout&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;script src=\"md5.min.js\"&gt;&lt;\/script&gt;\n        &lt;script&gt;\n            var hash = md5(\"value\")\n            alert(hash)\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p>When you open the HTML page in your web browser, you&#8217;ll get a popup with the MD5 value:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"117\" src=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/md5-browser-popup-js.jpg\" alt=\"\" class=\"wp-image-685\" srcset=\"https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/md5-browser-popup-js.jpg 441w, https:\/\/infosecscout.com\/wp-content\/uploads\/2022\/11\/md5-browser-popup-js-300x80.jpg 300w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/figure>\n\n\n\n<p>Obviously, this is just a dumb example, but you can build anything from there.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Server-Side_Installation\"><\/span><strong>Server-Side Installation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you are using NodeJS, you probably already know how to do this, but here is a quick summary of the main steps:<\/p>\n\n\n\n<ul>\n<li><strong>Install the blueimp-md5 kit first<\/strong>, to use the server-side MD5 library for NodeJS:<br><code>npm install blueimp-md5<\/code><\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Then create a server.js file with the following content:<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">require('http')\n  .createServer(function (req, res) {\n    \/\/ The md5 module exports the md5() function:\n    var md5 = require('.\/md5'),\n      \/\/ Use the following version if you installed the package with npm:\n      \/\/ var md5 = require(\"blueimp-md5\"),\n      url = require('url'),\n      query = url.parse(req.url).query\n    res.writeHead(200, { 'Content-Type': 'text\/plain' })\n    \/\/ Calculate and print the MD5 hash of the url query:\n    res.end(md5(query))\n  })\n  .listen(8080, 'localhost')\nconsole.log('Server running at http:\/\/localhost:8080\/')<\/pre>\n\n\n\n<ul>\n<li>Start the application with:<br><code>node server.js<\/code><\/li>\n\n\n\n<li>Do a quick test by opening your web browser at http:\/\/localhost:8080\/<br>You should see the MD5 output. <\/li>\n\n\n\n<li>The value will change each time you update the URL, so opening http:\/\/localhost:8080\/?foo&amp;bar&amp;baz would produce another MD5 hash.<br>But you get the idea, and can now use it in your other projects.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>That is, you now know how to generate MD5 hashes in JavaScript.<br>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:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/infosecscout.com\/is-md5-easy-to-crack\/\" data-type=\"post\" data-id=\"449\">Is MD5 Easy to Crack? (and how long does it really takes)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/infosecscout.com\/can-hashed-passwords-be-decrypted\/\" data-type=\"post\" data-id=\"529\">Can Hashed Passwords Be Decrypted? (Not as safe as you think)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/infosecscout.com\/decrypt-md5-php\/\" data-type=\"post\" data-id=\"48\">How to Decrypt MD5 Passwords in PHP?<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Even if it seems like JavaScript has been around forever, generating an MD5 hash with it is not a built-in feature. Today, I&#8217;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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":126,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[14],"tags":[],"taxonomy_info":{"category":[{"value":14,"label":"Security"}]},"featured_image_src_large":["https:\/\/infosecscout.com\/wp-content\/uploads\/2020\/07\/md5-javascript-1024x683.jpg",1024,683,true],"author_info":{"display_name":"Patrick Fromaget","author_link":"https:\/\/infosecscout.com\/about\/"},"comment_info":0,"category_info":[{"term_id":14,"name":"Security","slug":"security","term_group":0,"term_taxonomy_id":14,"taxonomy":"category","description":"Check out our easy-to-follow tips and facts in Security Information. Learn how passwords work and more, all explained in a way that's easy to understand.","parent":0,"count":21,"filter":"raw","cat_ID":14,"category_count":21,"category_description":"Check out our easy-to-follow tips and facts in Security Information. Learn how passwords work and more, all explained in a way that's easy to understand.","cat_name":"Security","category_nicename":"security","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/posts\/119"}],"collection":[{"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":12,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/posts\/119\/revisions\/691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/media\/126"}],"wp:attachment":[{"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infosecscout.com\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}