{"id":66212,"date":"2024-09-17T22:33:12","date_gmt":"2024-09-17T17:03:12","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=66212"},"modified":"2024-09-17T23:38:51","modified_gmt":"2024-09-17T18:08:51","slug":"encryption-and-hashing-in-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/encryption-and-hashing-in-javascript\/","title":{"rendered":"Encryption and Hashing in JavaScript"},"content":{"rendered":"<p>In today&#8217;s digital landscape, the need to secure data is more critical than ever. Whether you&#8217;re transmitting sensitive information or storing user credentials, understanding the mechanisms that protect this data is essential. In the world of JavaScript, encryption and hashing are two key techniques that developers can leverage to safeguard information. But what exactly are these processes, and how can you implement them effectively in your JavaScript projects? This blog will take you through the concepts of encryption and hashing, explore their differences, and demonstrate how to apply them in real-world scenarios using JavaScript.<\/p>\n<p>Encryption and hashing are both crucial in securing data, but they serve different purposes and operate differently. Let\u2019s understand these one by one starting with Encryption.<\/p>\n<h3>What is Encryption<\/h3>\n<p>Encryption acts like a secret code for information. It uses a special process (called an encryption algorithm) along with a key to transform readable data (plaintext) into an unreadable format (ciphertext ). When the intended recipient receives this encrypted data, they use a key to convert it back into its original form.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66131 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/encryption.png\" alt=\"Encryption\" width=\"778\" height=\"372\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/encryption.png 1021w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/encryption-300x143.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/encryption-768x367.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/encryption-624x298.png 624w\" sizes=\"(max-width: 778px) 100vw, 778px\" \/><\/p>\n<h3>Types of Encryption<\/h3>\n<ul style=\"list-style-type: disc;\">\n<li><strong>Symmetric Encryption:<\/strong> This is a cryptographic method that uses the same key for both encryption and decryption.Working of Symmetric Encryption:\n<ol>\n<li><strong>Key Generation:<\/strong> The process starts with the creation of a single secret key. This key will be used for both encryption and decryption.<\/li>\n<li><strong>Encryption Process:<\/strong> Using a symmetric encryption algorithm (like AES, DES, or 3DES) and the secret key, the plaintext is converted into an unreadable format. The encrypted data (ciphertext) is then sent to the receiver.<\/li>\n<li><strong>Decryption Process:<\/strong> Using the same symmetric encryption algorithm and key, the receiver decrypts the ciphertext back into its original form.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Symmetric encryption is generally faster than asymmetric encryption, making it ideal for encrypting large amounts of data. However, it has a key distribution problem. To overcome this problem, Asymmetric encryption is often preferred in some specific scenarios.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66133 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/symmetric-encryption.png\" alt=\"Symmetric Encryption\" width=\"781\" height=\"436\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/symmetric-encryption.png 1023w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/symmetric-encryption-300x167.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/symmetric-encryption-768x429.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/symmetric-encryption-624x348.png 624w\" sizes=\"(max-width: 781px) 100vw, 781px\" \/><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><strong>Asymmetric Encryption:<\/strong> Unlike symmetric encryption, which uses the same key for both processes, asymmetric encryption uses two mathematically related distinct keys: a <strong>public key<\/strong> for encryption and a <strong>private key<\/strong> for decryption. Working of Asymmetric Encryption is the same as of symmetric encryption, the only difference is two different keys are used.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66134 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/asymmetric-encryption.png\" alt=\"Asymmetric Encryption\" width=\"781\" height=\"375\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/asymmetric-encryption.png 1021w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/asymmetric-encryption-300x144.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/asymmetric-encryption-768x369.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/asymmetric-encryption-624x300.png 624w\" sizes=\"(max-width: 781px) 100vw, 781px\" \/><\/p>\n<h3>Use cases of Encryption<\/h3>\n<ul>\n<li><strong>Secure Online Communication (HTTPS):<\/strong> Encryption is used to safeguard data such as usernames, passwords, or payment details while transmitting it over a network. HTTPS (SSL\/TLS) encrypts communication between web browsers and servers, ensuring that data remains secure.<\/li>\n<li><strong>Email Encryption:<\/strong>\u00a0 Encrypting email content to ensure that only the intended recipient can read the message. PGP (Pretty Good Privacy) or S\/MIME (Secure\/Multipurpose Internet Mail Extensions) are used to encrypt emails.<\/li>\n<li><strong>Encrypted Messaging Apps:<\/strong> End-to-end encryption (E2EE) is used in messaging apps to ensure that only the sender and the receiver can read the messages. Apps like WhatsApp, Signal, and Telegram use end-to-end encryption.<\/li>\n<\/ul>\n<p>So far, you&#8217;ve learned about encryption and its use cases. However, you might have noticed that Encryption is a <strong>key-based<\/strong> method and a <strong>reversible<\/strong> process which means that you can get the original data using the decryption key, and if an attacker gains access to the key, they can decrypt the data.<\/p>\n<p>To address the issue of data reversibility, we have a method called <strong>hashing<\/strong>, which is <strong>irreversible<\/strong>. While encryption and hashing serve different purposes, and neither is inherently superior to the other, they are used in distinct scenarios. For instance, if you send a large text message over WhatsApp, hashing wouldn\u2019t be suitable because the message needs to be decrypted later by the recipient.<\/p>\n<p>Let\u2019s see Asymmetric Encryption implementation in ReactJS\/NextJS and Node.js using <a href=\"https:\/\/www.npmjs.com\/package\/node-forge\"><strong><span style=\"color: #339966;\">node-forge<\/span><\/strong><\/a> package.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66139 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1.png\" alt=\"Asymmetric encryption server-side implementation\" width=\"836\" height=\"599\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1.png 1208w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1-300x215.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1-1024x734.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1-768x551.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-1-624x447.png 624w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/p>\n<p>This one is the app.js file in the root folder, wherein <span style=\"color: #ff6600;\">line 11<\/span> you can see Encryption file import, and in <span style=\"color: #ff6600;\">line 36<\/span> route establishment with JWT authentication.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66142 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-2.png\" alt=\"Asymmetric encryption server-side implementation\" width=\"834\" height=\"530\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-2.png 972w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-2-300x191.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-2-768x488.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-2-624x397.png 624w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/p>\n<p>Encryption file in the router folder where you can see the <a href=\"https:\/\/www.npmjs.com\/package\/node-forge\"><strong><span style=\"color: #339966;\">node-forge<\/span><\/strong><\/a> package is imported in <span style=\"color: #ff6600;\">line 2<\/span>, public and private key generation on <span style=\"color: #ff6600;\">line 5<\/span> and three subsequent endpoints.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66143 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-3.png\" alt=\"Asymmetric encryption server-side implementation\" width=\"688\" height=\"386\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-3.png 783w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-3-300x168.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-3-768x431.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-3-624x350.png 624w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/p>\n<p>Authentication happens here in the index.js file inside the middleware folder.<\/p>\n<p>Now moving towards client-side.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66144 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-4.png\" alt=\"Asymmetric encryption client-side implementation\" width=\"602\" height=\"103\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-4.png 684w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-4-300x51.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-4-624x107.png 624w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66145 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5.png\" alt=\"Asymmetric encryption client-side implementation\" width=\"839\" height=\"583\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5.png 1265w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5-300x209.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5-1024x712.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5-768x534.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-5-624x434.png 624w\" sizes=\"(max-width: 839px) 100vw, 839px\" \/><\/p>\n<p>Here you can clearly see an <em>useEffect<\/em> where we are fetching the public key for the encryption process. After that we have 2 methods, one for encryption and another for decryption and finally a console to log data.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-66146\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-6.png\" alt=\"Asymmetric Encryption console output\" width=\"645\" height=\"136\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-6.png 764w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-6-300x63.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/enc-code-6-624x131.png 624w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><\/p>\n<p>In the above example, you may be wondering why we don\u2019t have an endpoint for the private key, so the answer is very simple: the private key is meant to be kept secret. Exposing it can compromise the security of the encryption and decryption process. In a production environment, private keys should remain on the server and never be sent to or stored on the client side.<\/p>\n<p>Now, the question is when to use encryption versus hashing. This will become clearer in the upcoming sections. For now, it&#8217;s important to first understand what hashing is and how it works.<\/p>\n<h3>What is Hashing<\/h3>\n<p>Hashing is a process that converts input data of any size into a fixed-size string of characters. <strong>Secure Hash Algorithm (SHA)<\/strong> is a renowned hash function that takes an input and returns a fixed-size string, typically a hash digest represented in hexadecimal.<\/p>\n<p>You may be wondering, can hashing be cracked or decrypted? Hashing is similar to encryption, the only difference between hashing and encryption is that hashing is one-way, meaning once the data is hashed, the resulting hash digest cannot be cracked unless a Brute force attack or Rainbow table attack is used.<\/p>\n<p>Let\u2019s take an example to understand it better. Suppose we have two slightly different inputs \u2018Hello\u2019 and \u2018hello\u2019, hashed with SHA-256 function. The hash digest of the first message will look like<\/p>\n<pre>\"<span style=\"color: #ff0000;\">185f8db32271fe25f561a6fc938b2e264306ec304eda518007d1764826381969<\/span>\"<\/pre>\n<p>while for the second message it will-<\/p>\n<pre>\"<span style=\"color: #ff0000;\">2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824<\/span>\"<\/pre>\n<p>This is referred to as the avalanche effect. This effect is important in cryptography, as it means even the slightest change in the input message completely changes the output. This will stop attackers from being able to understand what the hash digest originally said and tell the receiver of the message whether or not the message has been changed while in transit.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66172 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hashing.png\" alt=\"Hashing\" width=\"781\" height=\"381\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hashing.png 1013w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hashing-300x147.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hashing-768x375.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hashing-624x305.png 624w\" sizes=\"(max-width: 781px) 100vw, 781px\" \/><\/p>\n<h3>Types of SHA<\/h3>\n<p><strong>SHA-1<\/strong> was released in 1995 with a 160-bit hash length and was widely used in the past for digital signatures and SSL certificates. However, due to the short length of the hash digest, SHA-1 is more easily brute-forced and it can also give the same hash digest to two different values (known as collision), it is no longer considered secure and deprecated for cryptographic purposes.<\/p>\n<p><strong>SHA-2<\/strong> was released in 2001 with a variety of bit lengths from 256 to 512.<\/p>\n<ul>\n<li>SHA-224: hash digest of 224 bits<\/li>\n<li>SHA-256: hash digest of 256 bits (64 hex characters)<\/li>\n<li>SHA-384: hash digest of 384 bits<\/li>\n<li>SHA-512: hash digest of 512 bits<\/li>\n<\/ul>\n<p>SHA-2 is widely used and is considered secure for most cryptographic purposes. It has been used in all SSL certificates, digital signatures, and blockchain technologies since 2016.<\/p>\n<p><strong>SHA-3<\/strong> was released in 2015 and developed as a backup in case vulnerabilities were found in SHA-2. It uses a different internal structure (Keccak algorithm) and provides additional security. While SHA-2 remains secure and widely used, SHA-3 offers an alternative for higher levels of security.<\/p>\n<p>In modern cryptography, <strong>SHA-2<\/strong> and <strong>SHA-3<\/strong> are the preferred.<\/p>\n<p>Currently, SHA-2 is the industry standard for hashing algorithms. However, SHA-3 may eventually take its place. As SHA-2 becomes outdated or vulnerable, a shift to SHA-3 is likely in the future.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66154 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-1.png\" alt=\"SHA-256 method\" width=\"626\" height=\"289\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-1.png 743w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-1-300x138.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-1-624x288.png 624w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-66156 aligncenter\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-2.png\" alt=\"calling sha256 method\" width=\"429\" height=\"172\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-2.png 474w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-2-300x120.png 300w\" sizes=\"(max-width: 429px) 100vw, 429px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-66159\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-3.png\" alt=\"SHA-256 console output\" width=\"594\" height=\"113\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-3.png 636w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-3-300x57.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/hash-code-3-624x119.png 624w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/p>\n<p>Now, you have a strong understanding of what Encryption and Hashing are and how they differ from each other. Before concluding the blog let\u2019s see some use cases of Hashing.<\/p>\n<h3>Use cases of Hashing<\/h3>\n<p>The most important use case of Hashing is to hash a password. Also, SHAs are essential not only for digital signatures and certificates in SSL\/TLS connections, as mentioned earlier, but also play a crucial role in other applications. SHAs are used in protocols such as SSH, S\/MIME (Secure\/Multipurpose Internet Mail Extensions), and IPSec.<\/p>\n<ul>\n<li>Hashing is used in checksums to detect errors in data transmission. Protocols like TCP\/IP use checksums to verify the integrity of data packets transmitted over the internet.<\/li>\n<li>Hashing is used in version control systems (e.g., Git) to create unique identifiers (hashes) for each commit. Git uses SHA-1 (and moving towards SHA-256) to generate commit hashes, which track changes in the project history.<\/li>\n<li>Hashing is used in blockchains to link blocks and ensure the immutability of the chain. Bitcoin and other cryptocurrencies use SHA-256 hashing to maintain the integrity of the blockchain and ensure the security of transactions.<\/li>\n<\/ul>\n<h3>Conclusion<\/h3>\n<p>Encryption ensures that sensitive data remains confidential, allowing for secure transmission and storage of information. On the other hand, hashing provides integrity and authenticity, making sure that data is neither tampered with nor easily reversed.<\/p>\n<p>By leveraging these techniques, you can ensure your applications remain secure, protecting both users and sensitive data from evolving threats. As the need for security grows, staying informed and adopting best practices in encryption and hashing will continue to be essential for JavaScript developers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s digital landscape, the need to secure data is more critical than ever. Whether you&#8217;re transmitting sensitive information or storing user credentials, understanding the mechanisms that protect this data is essential. In the world of JavaScript, encryption and hashing are two key techniques that developers can leverage to safeguard information. But what exactly are [&hellip;]<\/p>\n","protected":false},"author":1923,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":361},"categories":[5876],"tags":[6525,2572,227,6524,6526,6527],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66212"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1923"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=66212"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66212\/revisions"}],"predecessor-version":[{"id":66449,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66212\/revisions\/66449"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=66212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=66212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=66212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}