当前位置: 首页 > news >正文

使用 crypto-js 进行 AES 加解密操作

在前端开发中,数据的加密和解密是为了保障用户隐私和数据的安全性而常见的任务。AES(Advanced Encryption Standard)是一种对称密钥加密算法,被广泛用于保护敏感信息的传输和存储。本文将介绍 AES 加解密的基本原理,并结合 Crypto-JS 库提供的实例代码进行说明。

crypto-js AES

一、AES 简介

AES 是一种块加密算法,它以固定大小的块(128位)处理数据,并支持不同密钥长度(128、192、256位)。由于其高度的安全性和效率,AES 已成为许多安全应用的首选算法。

加密过程

  1. 初始轮(Initial Round): 将明文与第一轮密钥进行异或运算。
  2. 多轮加密(Rounds): 将初始轮的结果经过多轮的重复处理。每一轮都包括四个步骤:SubBytes、ShiftRows、MixColumns、AddRoundKey。
  3. 最终轮(Final Round): 在最后一轮中,省略 MixColumns 步骤,只进行 SubBytes、ShiftRows 和 AddRoundKey。

解密过程

解密过程与加密过程相似,但是顺序相反,且在每一轮中使用的密钥是加密时的逆操作。最终得到解密后的明文。

二、Crypto-JS 介绍

Crypto-JS 是一个开源的 JavaScript 加密库,它提供了常见的加解密算法,包括 AESDESRabbitRC4MD5PBKDF2HMACSHA1SHA256SHA3RabbitRabbit-OAEPECIES 等。本文将使用 Crypto-JS 提供的 AES 算法进行加解密操作。

三、Crypto-JS AES 加解密操作

1. 引入Crypto-JS库

首先,确保你的项目中已经引入了 crypto-js 库。在本例中,我们使用了AES加解密算法,因此需要引入相应的模块:

import AES from 'crypto-js/aes'
import enc from 'crypto-js/enc-utf8'
import ECB from 'crypto-js/mode-ecb'
import Pkcs7 from 'crypto-js/pad-pkcs7'
// import MD5 from 'crypto-js/md5'

2. 设置密钥和常量

在加解密过程中,密钥 是一个关键的参数。我们需要定义密钥,以便后续的加解密操作。

import { SecretKey } from '@/common/consts.js'
const SecretKey = 'your secret key'
// 获取密钥对应的byte数组
const keyBytes = enc.parse(SecretKey)

3. 解密操作

下面是解密操作的代码示例,其中包括了设置加解密模式和填充方式:

export function decode(str = '') {try {const decryptedBytes = AES.decrypt(str, keyBytes, {mode: ECB, // 加解密模式padding: Pkcs7, // 填充方式})return decryptedBytes.toString(enc)} catch (err) {console.log(err)return ''}
}

4. 加密操作

同样,以下是加密操作的代码示例,也包括了设置加解密模式和填充方式:

export function encode(str = '') {try {const encryptedBytes = AES.encrypt(str, keyBytes, {mode: ECB, // 加解密模式padding: Pkcs7, // 填充方式})return encryptedBytes.toString()} catch (err) {console.log(err)return ''}
}

通过以上步骤,我们就完成了使用 Crypto-JS 进行 AES 加解密操作的实例。这些代码可以轻松地集成到你的前端项目中,以保障敏感信息的安全传输和存储。希望这个实例能够帮助你更好地理解前端加密操作的过程。

参考文档:

  • Crypto-JS 官方文档
  • Crypto-JS npm

欢迎访问:天问博客

相关文章:

  • git add -u 什么意思
  • 009 Linux_文件系统 | 软硬链接
  • elasticsearch[二]-DSL查询语法:全文检索、精准查询(term/range)、地理坐标查询(矩阵、范围)、复合查询(相关性算法)、布尔查询
  • springboot多数据源支持自定义连接池
  • SQL笔记 -- 锁
  • Eureka使用详解
  • web漏洞总结大全(基础)
  • 如何在CentOS下使用Docker部署Halo博客网站并结合内网穿透远程访问
  • 131. 分割回文串 - 力扣(LeetCode)
  • Ubuntu使用docker-compose安装chatGPT
  • x-cmd pkg | yq - 命令行 YAML处理工具
  • 三国游戏(第十四届蓝桥杯)
  • ros2学习笔记-CLI工具,记录命令对应操作。
  • 杭州城市开发者年会——CMeet系列技术生态沙龙
  • 【unity学习笔记】语音驱动blendershape
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【Linux系统编程】快速查找errno错误码信息
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • Android 架构优化~MVP 架构改造
  • CSS进阶篇--用CSS开启硬件加速来提高网站性能
  • Koa2 之文件上传下载
  • magento2项目上线注意事项
  • React系列之 Redux 架构模式
  • SpringCloud集成分布式事务LCN (一)
  • vue-cli3搭建项目
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 创建一个Struts2项目maven 方式
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 关于使用markdown的方法(引自CSDN教程)
  • 每天一个设计模式之命令模式
  • 听说你叫Java(二)–Servlet请求
  • 学习笔记TF060:图像语音结合,看图说话
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • scrapy中间件源码分析及常用中间件大全
  • 阿里云重庆大学大数据训练营落地分享
  • 如何用纯 CSS 创作一个货车 loader
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • #{}和${}的区别是什么 -- java面试
  • #pragma once
  • (1)STL算法之遍历容器
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (Ruby)Ubuntu12.04安装Rails环境
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (二)正点原子I.MX6ULL u-boot移植
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • (六)Hibernate的二级缓存
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (免费领源码)python#django#mysql公交线路查询系统85021- 计算机毕业设计项目选题推荐
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .chm格式文件如何阅读
  • .form文件_一篇文章学会文件上传
  • .gitignore文件设置了忽略但不生效
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复