[Information Security] MD5 Hash Function

1. Introduction to MD5

MD5 (Message Digest Algorithm 5) is a common hash function that is usually used to produce a numeric digest of data, also called a hash value or digest value. It was designed by Ron Rivest in 1991 and is widely used in data integrity verification, password storage, digital signatures and other fields.

The MD5 hash function maps data of any length into a fixed-length 128-bit hash value, which is usually expressed in the form of 32 hexadecimal characters.

Example:

原始值：123
哈希值：487f7b22f68312d2c1bbc93b1aea445b //哈希值由32个十六进制字符组成

The MD5 hash function is a one-way hash function, which means that the algorithm can obtain its hash value from the input data, but it is almost impossible to recover the original data from the hash value. Therefore, MD5 is mainly used for data integrity verification rather than encryption.

Data integrity verification

The basic principle of MD5 algorithm for data integrity verification is to utilize the two characteristics of the algorithm, consistency and irreversibility. Consistency means that for the same input data, the MD5 algorithm always generates the same MD5 hash value. This means that if two identical data blocks are MD5 hashed, their hash values will always be equal. Irreversibility means that the original data cannot be restored from the hash value, so if the input data changes in any way, its MD5 hash value will also change significantly.

The process of data integrity verification is mainly as follows:
Insert image description here

2. JavaScript code implementation

It is possible to use existing libraries for the MD5 hashing algorithm. A popular library is CryptoJS. The following code shows the process of implementing md5 hash mapping in class components under the React framework.

First use npm to install CryptoJS library:

npm install crypto-js

MD5 encryption using CryptoJS in React's class component:

import React, {
    
     Component } from 'react';
import CryptoJS from 'crypto-js';

class MyComponent extends Component {
    
    
  handleMD5 = (data) => {
    
    
    const MD5Data = CryptoJS.MD5(data).toString();
    console.log(MD5Data, '========MD5数据=========');
  };

  render() {
    
    
  	let data = 123;
  	console.log(data,'========原始数据==========');
    return (
      <div>
        <button onClick={
    
    () => this.handleMD5 (data)}>
          MD5哈希映射
        </button>
      </div>
    );
  }
}

export default MyComponent ;

Effect:
Insert image description here