前端加密 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
结语
以上是关于前端加密的一些介绍和实例,希望对大家的学习有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:前端加密cryptojs与JSEncrypt使实例详解 - Python技术站