前端加密 cryptojs 与 JSEncrypt 的使用攻略

什么是前端加密

前端加密，指的是在前端代码中使用加密算法对用户输入的敏感信息进行加密，从而保证信息在传输过程中不会被轻易地窃取。前端加密通常采用一些常见的加密算法，如 AES、RSA 等。

加密库

前端加密需要使用到一些加密库，比如 cryptojs、JSEncrypt。

cryptojs：提供常见的对称加密算法，比如 AES、DES 等
JSEncrypt：提供非对称加密算法，比如 RSA 等

cryptojs 的使用方法

安装

通过 npm 安装：

npm install crypto-js

常见加密算法

AES 加密

const CryptoJS = require('crypto-js')

const plaintext = 'hello world'
const key = '123456'

const ciphertext = CryptoJS.AES.encrypt(plaintext, key).toString()
console.log(ciphertext) // U2FsdGVkX1/ze0ney1Ct1g+L+0zSJYZAAOraUcKKGcQ=

MD5 加密

const CryptoJS = require('crypto-js')

const plaintext = 'hello world'

const hashed = CryptoJS.MD5(plaintext).toString()
console.log(hashed) // 5eb63bbbe01eeed093cb22bb8f5acdc3

更多使用方法请参考官方文档：https://github.com/brix/crypto-js

JSEncrypt 的使用方法

安装

通过 npm 安装：

npm install jsencrypt

生成密钥对

import JSEncrypt from 'jsencrypt'

const key = new JSEncrypt({ default_key_size: 2048 })
key.getKey()

const publicKey = key.getPublicKey()
const privateKey = key.getPrivateKey()

加密/解密

import JSEncrypt from 'jsencrypt'

const plaintext = 'hello world'

const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDoZb/mPrXk8c+LJ0wmJ+oJWf6xm1T3IiqLl+94M1Vq+6dBKP5iDsr5+pk9cMAeeBtEBdHia1Tyb8WR3eeoGiOgQzPe4iwFLjHSqH8WBLwOapo9lJ/0ZkcmXo5a+wA+Q4JbOGTEz0UZhj0z6NzTpi9xZuvvMvYXzEnFTcL4wIDAQAB'
const privateKey = 'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAOhlv+Y+teTxz4snTCYn6gld/rGbxPciKouX73gzVWr7p0Eo/mIOyvn6mT1wwB54G0QF0eJrVPJvxZHdr3qgaI6BDM97iLAsuMdKofxYEvA5qmj2Un/RmRyZejlr7AD5Dgls4ZMTPRRmGPTPo3NOmL3Fm6+8y9hfMScVNwvjAgMBAAECgYAKH/1FXV1kbdxZDi3vBqCfm9LrSlaZ51aGKsp4N1sJz/DezSx4/R+4MQ4ywdq5sJkN7p5wBeo8S9Qq0aTnWXYdBlegLnn5Ak8JgJnRrunmepJFllY6Bd/GWm1PJzJ94XJsyze0ex/pgf+UHnvebIYCO7cCfZVE2kEB779DfCwQJBANcjEdSXFFx0vDOyQftnxQ9WjxP7Df4bktvixNpIXeOYaXxn5ZNVT+BAteLPG6Udrpf5FAqVwL1ZwVl+IdgsNM8CQQCmOiFpFX9C0Z/7PlvXbbEoyGmQYjzXMZxYv24nP7d8GX6FnZJSROeJ//XOMCNKckxMm5Jr0zwRgi9qX/rxc8FzAkBhM6tZnDwaI/+Ixfrsu4sOLRm9B2UPtkcBAhP5dT2jrM5kmBBQBJ/geuIlRQ5FHYvlQAa4iG4sC4ZJZS1eXODZAkAW/w8YXvenLDNVmKoXtTCkN+ADsu7J8xSCKt42w8BibKZmkhSR+9mQzWYqNTrme7Dj7mRdAnaniosfIh+4c7lAkEAzCSYej55AbDDW2lkwmHkEwghJXiPm/Q6Ck4AKpIUZrGn2aW9SfjvwP4Qn+7XZL9Q0hse1bnrrs+CmpL+C1u5w=='

const encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
const ciphertext = encrypt.encrypt(plaintext)

const decrypt = new JSEncrypt()
decrypt.setPrivateKey(privateKey)
const decrypted = decrypt.decrypt(ciphertext)

console.log(ciphertext)
console.log(decrypted)

更多使用方法请参考官方文档：https://github.com/travist/jsencrypt

示例

使用 cryptojs 对用户密码进行加密

import CryptoJS from 'crypto-js'

const plaintext = 'password'
const salt = 'abcdefg'
const key = CryptoJS.PBKDF2(plaintext, salt, { keySize: 256 / 32, iterations: 1000 })
const ciphertext = CryptoJS.AES.encrypt(plaintext, key)
const encoded = encodeURIComponent(ciphertext.toString())

console.log(key) // c8ae8ca23c2fdef3d0778183fac4ae31a4f529bbb6f75655e0517a16760c0c7c
console.log(encoded) // U2FsdGVkX1+xWwWlK2BCo0TJmgjOVWBVzSjIE6fUboY%3D

使用 JSEncrypt 对用户信息进行加密

import JSEncrypt from 'jsencrypt'

const key = new JSEncrypt({ default_key_size: 2048, default_public_exponent: '010001' })
key.getKey()

const publicKey = key.getPublicKey()

const plaintext = {
  username: 'example',
  password: 'password123'
}

const encrypt = new JSEncrypt()
encrypt.setPublicKey(publicKey)
const ciphertext = encrypt.encrypt(JSON.stringify(plaintext))
const encoded = encodeURIComponent(ciphertext)

console.log(publicKey) // -----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDO9vcPyBa1fhPpM6F3MkbBVRaZM0Q8qAL7Lc2VusqWIYC/FTxSOJHb+UETKYowm+tn/H81RttnPYnPIW2YZRkTuO0IqxNS7LgB7w/LaDTQh4RpL/5YQrLpaFqdp/mZnGSDMIFtHL6AHlX7e41vIQBwILdnnk1fqRV6Wi0bX5MvzwQIDAQAB-----END PUBLIC KEY-----
console.log(encoded) // zUTaHJrOq0o9o8C9lo8V4kfEu0E2Cf9w%2BMGxEflk0X3VWOrnN8v0L4MPyuUlNLix0aJkuREJeb7hk9Z9Nw9UEFcafJLW2Lx7roT9tO4vZdaw1LSpvwD0g4gm5hd0zibJkqX4vT4ivX5NeAE0k/+zAQWARpkl8Dz45gr1AYSw8z8%3D