Three encryption methods commonly used on the front end (MD5, base64, sha.js)

As an excellent front-end development engineer, it is imperative to protect users' information security and passwords. Without further ado, let me introduce three encryption methods that are often used in daily development.

1. MD5 encryption

Introduction: MD5 in Chinese means information-digest algorithm 5, which is an information digest encryption algorithm that can translate data into another fixed-length value.

Features:

• Compressibility: For data of any length, the length of the calculated MD5 value is fixed.
• Easy to calculate: It is easy to calculate the MD5 value from the original data.
• Resistance to modification: If any modification is made to the original data, even if only 1 byte is modified, the resulting MD5 value will be very different.
• Strong anti-collision: Given the original data and its MD5 value, it is very difficult to find data with the same MD5 value (ie, forged data).

Usage: Introduce the MD5.js package into the project

import MD5 from 'MD5'

function Md5() {
  return (
    <>
      <h1>MD5加密</h1>
      <h3>加密前:18888888888 加密后:{MD5(18888888888)}</h3>
      <h3>加密前:大大大大奔 加密后:{MD5('大大大大奔')}</h3>
    </>
  )
}

export default Md5

 Page display effect:

2. base64 encryption

Introduction: Base64 is an encryption algorithm with wide application and support, but it is one of the weakest encoding standards today. It mainly processes the binary sequence after plaintext conversion, turning it into a form that cannot be directly recognized by humans.
Features:

• most widely used
• Simple and easy to use
• Images can be translated and stored
• The result after encoding is only 64 characters az AZ 0~9 / + plus an auxiliary character =

Usage : Directly call the btoa method to convert to base64 method, use the atob method to decode

function Base64() {
  return (
    <>
      <h3>MD5加密</h3>
      <br></br>
      {/* btoa用于加密，atob用于解密 */}
      <h3>加密前:18888888888 加密后:{window.btoa(18888888888)}</h3>
      <h3>解码后:{window.atob(window.btoa(18888888888))}</h3>
    </>
  )
}
export default Base64

Page display effect:

 

3. sha.js encryption

Introduction: A method often used in projects, it is simple and convenient to use.
Method of use: directly introduce the sha.js package into the project

import { sha256 } from 'js-sha256'
function Sha() {
  return (
    <>
      <h3>sha.js加密</h3>
      <br></br>
      <h3>加密前:18888888888 加密后:{sha256('18888888888')}</h3>
    </>
  )
}

export default Sha

 Page display effect: