蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

强大的前端加密/解密js库crypto-js使用解析

2018年10月30日 50046点热度 0人点赞 0条评论

crypto-js

crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

1.使用方法:

1.1. 步骤

1.1.1.安装:
npm install crypto-js

1.1.2.使用示例:

ES6模块引入方法:

import sha256 from 'crypto-js/sha256';
import hmacSHA512 from 'crypto-js/hmac-sha512';
import Base64 from 'crypto-js/enc-base64';

模块加载引入方法:

var AES = require("crypto-js/aes");
var SHA256 = require("crypto-js/sha256");

页面标签引入方法:


1.1.3.vue中使用实例:

const CryptoJS = require('crypto-js');  //引用AES源码js
    
    const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
    const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量
    
    //解密方法
    function Decrypt(word) {
        let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
        let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
    }
    
    //加密方法
    function Encrypt(word) {
        let srcs = CryptoJS.enc.Utf8.parse(word);
        let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        return encrypted.ciphertext.toString().toUpperCase();
    }
    
    export default {
        Decrypt ,
        Encrypt
    }

上面的代码中的 key 是密钥 ,iv 是密钥偏移量,这个一般是接口返回的,或者前后端协定一致。

值得注意的是密钥的长度,由于对称解密使用的算法是 AES-128-CBC算法,数据采用 PKCS#7 填充 , 因此这里的 key 需要为16位
定义加密方法Encrypt和解密方法Decrypt  ,最后通过 export default 将其暴露出去,方便在需要的时候进行引入

1.2. 前端简单加解密

文本加密

var CryptoJS = require("crypto-js");
 
// Encrypt
var ciphertext = CryptoJS.AES.encrypt('my message', 'secret key 123');
 
// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
var plaintext = bytes.toString(CryptoJS.enc.Utf8);
 
console.log(plaintext);

对象加密

var CryptoJS = require("crypto-js");
 
var data = [{id: 1}, {id: 2}]
 
// Encrypt
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
 
// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
 
console.log(decryptedData);

1.3. 项目地址:

https://github.com/brix/crypto-js

1.4. API

http://cryptojs.altervista.org/api/

参考资料:

1. https://www.jianshu.com/p/a47477e8126a

2. https://blog.csdn.net/weixin_40918145/article/details/81253772

标签: cryptoJS javascript js 加密 解密
最后更新:2025年9月12日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
OWASP 正式发布 2026 大模型安全 Top 10 与首个“智能体控制标准”ACS Google 突发 Gemini 3.8 Flash 与安全专精模型,轻量级 AI 凭什么越级反杀? Token 账单暴跌 60%!别再给 Agent 喂垃圾日志了,手把手打造高信噪比工具过滤层 一条命令把闲置 PC 变全能 AI 服务器,开源神器 ODS 彻底火了 给 Cursor 和 Claude Code 装上这套技能库,编程 Agent 秒变“AI 科学家” Claude Desktop 正式支持 Ollama:本地零成本运行 Qwen、DeepSeek 与 Kimi 全攻略
PhotoGIMP这款免费开源设计修图神器凭什么降维打击?别再用ChatGPT死记硬背了!港大开源DeepTutor:给每个人配专属私教别再当傻白甜了!狂砸2.5万亿的2026 AI狂欢,普通人和企业到底怎么苟住?告别设计AI 泥浆:拿捏大模型“设计品味”的硬核指南DeepSeek开源Harness深度拆解:当大模型穿上“动力骨骼”,Claude Code迎来最强劲敌?用VideoLingo做全自动视频翻译,一键搞定Netflix分级字幕与自然配音
js事件流:冒泡事件和捕获事件详解 架构的灵魂:在复杂与演进中寻找秩序与价值 别再死磕提示词了!Google Flow Agent 彻底颠覆 AI 视频,有手就能当导演 jquery插件Bootstrap Table使用方法详解 Flutter系列之组件的生命周期 jquery.chosen下拉框多选插件使用详解
最近评论
渔夫 发布于 10 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2