目前在前端开发中基本都会用到加密,最常见的就是登录密码的加密。接下来会为大家介绍几种加密方法。

  1. md5 加密

  MD5 加密后的位数有两种:16 位与 32 位。默认使用32位。 (16 位实际上是从 32 位字符串中取中间的第 9 位到第 24 位的部分)为提高安全性。根据业务需求,可以对md5 添加偏移量。如对原有字符拼接指定位数的字符串。

  1.1 使用方法

  npm install --save js-md5

  // 然后在页面中 引入

  import md5 from 'js-md5';

  md5('holle') // bcecb35d0a12baad472fbe0392bcc043

  复制代码

  扩展

  md5 支持算法

  md5.hex(''); // d41d8cd98f00b204e9800998ecf8427e

  md5.array(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]

  md5.digest(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]

  md5.arrayBuffer(''); // ArrayBuffer

  md5.buffer(''); // ArrayBuffer, deprecated, This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.

  md5.base64('');

  2. base64 加密

  2.1 使用方法

  npm install --save js-base64

  // 引入

  let Base64 = require('js-base64').Base64

  // 加密

  Base64.encode('测试'); // 5bCP6aO85by+

  Base64.encodeURI('测试'); // 5bCP6aO85by-

  // 解密

  Base64.decode('5bCP6aO85by+'); // 测试

  // note .decodeURI() is unnecessary since it accepts both flavors

  Base64.decode('5bCP6aO85by-'); // 测试

  3.res 加密

  前端 js 库:jsencrypt.js

  背景:前端数据加密传到后台,后台经过解密,进行数据处理。 在项目开发过程中,为了保证数据的安全性,在进行前端后端数据传输的过程中,需要对数据进行加密解密。

  现在比较安全且流行的加密方式是非对称加密(RSA)。其加密方式需要两个秘钥:私钥(私有秘钥)和公钥(公开秘钥)。公钥加密,私钥解密。

  RSA 加密规则

  公钥(publicKey)加密、私钥(privateKey)解密。不能逆向,私钥(privateKey)加密、公钥(publicKey)解密。说白了就是前后端都需要用公钥(publicKey)进行加密,用私钥(privateKey)进行解密。

  为啥不可逆呢?前端代码的安全性差,是总所周知的。之所以称为私钥(privateKey),就是因为是私密的,不可公开的,需要确保 key 的安全。若前端私钥(privateKey)加密,就意味着需要将私钥放到前端保存,这是不安全的,也违背了确保数据安全的初衷。

  RSA 双向加密解密

  在开发过程中遇到这样一个问题:前端不光要加密数据传到后端,也需要将后端的传回来的加密数据解密。所以定义了两个方法,进行数据的加密解密。

  引入前端 JS 库:jsencrypt.js

  // RSA 解密

  static decryptRSA(str: string) {

  const encryptor = new JSEncrypt() // 新建JSEncrypt对象

  const privateKey = "XXXX" // 私钥串

  encryptor.setPrivateKey(privateKey)//设置私钥

  const decrytStr = encryptor.decrypt(str)

  return decrytStr

  }

  // RSA 加密

  static encryptRSA(str: string) {

  const encryptor = new JSEncrypt() // 新建JSEncrypt对象

  const publicKey = ''; //公钥串

  encryptor.setPublicKey(publicKey) // 设置公钥

  const rsaPassWord = encryptor.encrypt(str)

  return rsaPassWord

  }

  相信大家已经发现问题了,我们将私钥(privateKey)、公钥(publicKey)全部都放到了前端代码中,前端的安全性差,可以很轻松的拿到秘钥对,RSA 加密解密也失去了价值。那该如何解决这个问题?

  通过前后端的沟通,我们采用双向加密解密,就是使用两套秘钥来解决这个问题。何为双向加密?

  后端定义两对秘钥:秘钥对A、秘钥对B。

  秘钥对 公钥 私钥

  A publicKeyA privateKeyA

  B publicKeyB privateKeyB

  后端拿着:私钥A(privateKeyA)、公钥B(publicKeyB),前端拿着:公钥A(publicKeyA)、私钥B(privateKeyB)。

  秘钥对A -- 前端加密,后端解密

  前端使用公钥A(publicA)对数据进行加密,后端通过公钥A(publicKeyA)对应的私钥A(privateKeyA)进行解密。

  秘钥对B -- 前端解密,后端加密

  后端使用公钥B(publicKeyB)进行加密,前端通过公钥B(publicKeyB)对应的私钥A(privateKeyA)进行解密。

  这样就能保证,虽然私钥(privateKeyB)和公钥(publicKeyA)都在前端代码中,但是这两个并不是一对,就算是全部拿到,也无法成功解密。也符合公钥(publicKey)加密、私钥(privateKey)解密的规则。完美解决!

  注意事项 这个插件对res加密的字符串最长是 117字符,

  有时加密时,会遇到加密参数过长而无法加密的现象在源码中加入以下代码,通过调用encryptLong方法,重新定义加密函数即可。

  JSEncrypt.prototype.encryptLong = function(string) {

  var k = this.getKey();

  // var maxLength = (((k.n.bitLength()+7)>>3)-11);

  var maxLength = 117;

  try {

  var lt = "";

  var ct = "";

  if (string.length > maxLength) {

  lt = string.match(/.{1,117}/g);

  lt.forEach(function(entry) {

  var t1 = k.encrypt(entry);

  ct += t1 ;

  });

  return hex2b64(ct);

  }

  var t = k.encrypt(string);

  var y = hex2b64(t);

  return y;

  }

  catch (ex) {

  return false;

  }

  };