网站建设及服务合同书,琴童少儿音乐创作网站建设,石家庄科技网站,能自己创造游戏的软件目录 1、安装crypto2、创建crypto.js文件3、在main.js主文件中进行引用4、页面中进行使用5、实现效果展示6、加密模式解析以及iv参数使用 1、安装crypto
npm install crypto-js
如果是在Typescript版本需要再安装
npm install --save types/crypto-js2、创建crypto.js文件
注… 目录 1、安装crypto2、创建crypto.js文件3、在main.js主文件中进行引用4、页面中进行使用5、实现效果展示6、加密模式解析以及iv参数使用 1、安装crypto
npm install crypto-js
如果是在Typescript版本需要再安装
npm install --save types/crypto-js2、创建crypto.js文件
注意点
CryptoJS.enc.Utf8.parse(‘xxxxx’)秘钥应该前后端保持一致否则会导致加密和解密无法正常进行因为只有使用相同的密钥才能正确地加密和解密数据。密钥的长度和格式需要符合 AES 加密算法的要求
详解 CryptoJS.AES.encrypt 是 crypto - js 库中用于 AES 加密的方法它接受三个参数 plaintext要加密的文本 KEY定义的加密密钥。 一个配置对象这里指定了两个属性 mode加密模式设置为 CryptoJS.mode.ECB即电子密码本模式。ECB 模式是一种简单的加密模式它将明文分成固定长度的块然后对每个块进行独立加密。但这种模式存在安全风险例如相同的明文块会加密成相同的密文块容易被攻击者利用进行分析在实际生产中不推荐使用建议使用更安全的模式如 CBC或 GCM。padding填充模式设置为 CryptoJS.pad.Pkcs7。PKCS7 填充是一种常用的填充方式它会在明文的末尾填充一定数量的字节使得明文长度是块大小的整数倍。这里提到前端使用 Pkcs7 对应后端的 Pkcs5实际上 PKCS5 是块大小固定为 8 字节的 PKCS7 填充的特殊情况在实际使用中要确保前后端对填充方式的理解和处理一致。 .toString()加密操作返回一个 WordArray 对象调用 toString() 方法将其转换为字符串形式的密文以便于存储和传输。 ————————————————————————————————— CryptoJS.AES.decrypt 是 crypto - js 库中用于 AES 解密的方法。它接受三个参数 jsonStr要解密的密文KEY与加密时相同的密钥。配置对象同样指定了 mode 为 ECB 模式padding 为 Pkcs7 填充模式。 .toString(CryptoJS.enc.Utf8)解密操作返回一个 WordArray 对象调用 toString(CryptoJS.enc.Utf8) 方法将其转换为 UTF - 8 编码的字符串形式的明文。
import CryptoJS from crypto-js/*** AES 加密* KEY: 需要前后端保持一致* mode: ECB 需要前后端保持一致* pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5*/
const KEY CryptoJS.enc.Utf8.parse(a761009ce3547b727e9387f2e6afadb2) // 秘钥
// const KEY CryptoJS.lib.WordArray.random(16).toString(CryptoJS.enc.Hex)// 生成随机的iv长度为16字节
const iv CryptoJS.lib.WordArray.random(16)export const AES_Encrypt (plaintext) {let ciphertext CryptoJS.AES.encrypt(plaintext, KEY, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7,}).toString()return ciphertext
}/*** AES 解密*/
export const AES_Decrypt (jsonStr) {let plaintext CryptoJS.AES.decrypt(jsonStr, KEY, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7,}).toString(CryptoJS.enc.Utf8)return plaintext
}
3、在main.js主文件中进行引用
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router
//全局密码加密
import { AES_Encrypt, AES_Decrypt } from /utils/crypto.jsconst app createApp(App)app.use(createPinia())
app.use(router)
app.config.globalProperties.$AES_Encrypt AES_Encrypt //全局加密
app.config.globalProperties.$AES_Decrypt AES_Decrypt //全局解密app.mount(#app)
4、页面中进行使用
templatedivindex/div/templatescript
import { getCurrentInstance } from vue
export default {setup() {const password 2345687// 使用getCurrentInstance获取proxy从而调用全局方法const { proxy } getCurrentInstance()const encryptedPassword proxy.$AES_Encrypt(password)console.log(encryptedPassword, 1111加密后的密码)const decryptedPassword proxy.$AES_Decrypt(encryptedPassword)console.log(decryptedPassword, 1111解密后的密码)},
}
/script
5、实现效果展示 在最后描述一下我在main.js代码中使用的是CryptoJS的ECB电子密码本模式 将明文分成固定长度的块每个块独立使用密钥进行加密相同的明文块会生成相同的密文块加密和解密过程相对简单易于实现加密速度快。由于相同明文块加密结果相同容易受到已知明文攻击安全性较低。适用于对少量数据且安全性要求不高的加密如加密单个密钥等。 6、加密模式解析以及iv参数使用
像CryptoJS.mode加密模式解析还有
CBCCipher Block Chaining密码块链接模式CFBCipher Feedback密文反馈模式OFBOutput Feedback输出反馈模式CTRCounter计数器模式
在CryptoJS.AES.encrypt方法中ivInitialization Vector初始化向量是一个可选参数主要用于加密算法的初始化过程。 在CryptoJS中使用ECB电子密码本模式时不能使用iv。
以下是一个使用iv参数的CryptoJS.AES.encrypt加密示例
import CryptoJS from crypto-js;// 定义密钥和明文
const key CryptoJS.enc.Utf8.parse(a761009ce3547b727e9387f2e6afadb2);
const plaintext Hello, World!;// 生成随机的iv长度为16字节
const iv CryptoJS.lib.WordArray.random(16);// 使用AES加密传入密钥和iv
const ciphertext CryptoJS.AES.encrypt(plaintext, key, {iv: iv,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7
}).toString();console.log(ciphertext);在上述示例中通过CryptoJS.lib.WordArray.random(16)生成了一个 16 字节的随机iv然后在CryptoJS.AES.encrypt方法中传入iv参数指定了加密模式为CBCCipher Block Chaining密码块链接模式这种模式下需要使用iv。
