使用 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

欢迎访问:天问博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/242339.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧文旅运营综合平台:重塑文化旅游产业的新引擎

目录 一、建设意义 二、包含内容 三、功能架构 四、典型案例 五、智慧文旅全套解决方案 - 210份下载 在数字化浪潮席卷全球的今天,智慧文旅运营综合平台作为文化旅游产业与信息技术深度融合的产物,正逐渐显现出其强大的生命力和广阔的发展前景。 该…

二叉树的直径(LeetCode 543)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路参考文献 1.问题描述 给你一棵二叉树的根节点,返回该树的直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的长度由它们之间边数…

【Docker】实战多阶段构建 Laravel 镜像

作者主页: 正函数的个人主页 文章收录专栏: Docker 欢迎大家点赞 👍 收藏 ⭐ 加关注哦! 本节适用于 PHP 开发者阅读。Laravel 基于 8.x 版本,各个版本的文件结构可能会有差异,请根据实际自行修改。 准备 新…

cs231n assignment1——SVM

整体思路 加载CIFAR-10数据集并展示部分数据数据图像归一化,减去均值(也可以再除以方差)svm_loss_naive和svm_loss_vectorized计算hinge损失,用拉格朗日法列hinge损失函数利用随机梯度下降法优化SVM在训练集和验证集计算准确率&a…

【图解数据结构】顺序表实战指南:手把手教你详细实现(超详细解析)

🌈个人主页:聆风吟 🔥系列专栏:图解数据结构、算法模板 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. ⛳️线性表1.1 🔔线性表的定义1.2 🔔线性表的存储结构 二. ⛳️顺序表…

web前端项目-金山打字游戏【附源码】

金山打字 【金山打字】这是一个练习打字的游戏,当游戏开始后,界面从顶部不断落下内容为随机字母的方块,当按下相对应的按键时,就会清除对应方块。游戏难度会随着落下的速度加快而提高。玩家每次成功清除字母方块,都会…

spawn_group | spawn_group_template | linked_respawn

字段介绍 spawn_group | spawn_group_template 用来记录与脚本事件或boss战斗有关的 creatures | gameobjects 的刷新数据linked_respawn 用来将 creatures | gameobjects 和 boss 联系起来,这样如果你杀死boss, creatures | gameobjects 在副本重置之前…

六、数组(1)一维数组

所谓数组,就是一个集合,里面存放了相同类型的数据元素 特点1:数组中每个数据元素都是相同的数据类型 特点2:数组是由连续的内存位置组成的 一、一维数组的定义方式 1、数据类型 数组名[数组长度]; 2、数据类型 数组名[数组长度…

【JavaEE】_基于UDP实现网络通信

目录 1. 服务器 1.1 实现逻辑 1.2 代码 1.3 部分代码解释 2. 客户端 2.1 实现逻辑 2.2 代码 2.3 客户端部分代码解释 3. 程序运行结果 4. 服务器客户端交互逻辑 此篇内容为实现UDP版本的回显服务器echo server; 普通服务器:收到请求&#xff…

《WebKit 技术内幕》之五(3): HTML解释器和DOM 模型

3 DOM的事件机制 基于 WebKit 的浏览器事件处理过程:首先检测事件发生处的元素有无监听者,如果网页的相关节点注册了事件的监听者则浏览器会将事件派发给 WebKit 内核来处理。另外浏览器可能也需要处理这样的事件(浏览器对于有些事件必须响应…

【Linux】nc 网络诊断 | 文件传输 命令详解

目录 一、命令简介 二、命令使用 2.1 测试服务器 2.2 端口连通性测试 2.2.1tcp端口连通性测试 2.2.2udp端口连通性测试 2.3 文件及目录的传输 2.3.1 文件传输(TCP端口) 2.3.2 文件传输(UDP端口) 相关文章: 【网络】抓包工具Wireshark下载安装和基本使用教…

力扣343. 整数拆分(动态规划)

Problem: 343. 整数拆分 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 该题目可以抽象成动态规划中的爬楼梯模型,将整数的拆分类比为上台阶: 1.每个阶段可以从整数中划分出1、2、…k的一个整数 2.int dp[n 1] dp[i]表示为i的整数划分的最大…

怎么提升搜狗网站排名

在当今数字化时代,网站排名对于品牌、企业以及个人都至关重要。而对于许多网站来说,搜狗搜索引擎是一个重要的流量来源。为了在搜狗上取得更好的排名,不仅需要优化网站内容,还需要巧妙运用一些工具和技巧。在本文中,我…

Labview局部变量、全局变量、引用、属性节点、调用节点用法理解及精讲

写本章前想起题主初学Labview时面对一个位移台程序,傻傻搞不清局部变量和属性节点值有什么区别,概念很模糊。所以更新这篇文章让大家更具象和深刻的去理解这几个概念,看完记得点赞加关注喔~ 本文程序源代码附在后面,大家可以自行下…

C语言第四弹---printf和scanf详解

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 printf和scanf详解 1、printf和scanf详解介绍1.1 printf1.1.1 基本用法1.1.2 占位符1.1.3 占位符列举1.1.4 输出格式1.1.4.1 限定宽度1.1.4.2 总是显示正负号1.1…

Docker安装开源Blog(Typecho)

前言 首先这个镜像是centos7.9进行安装PHP环境,然后挂载目录去运行的,镜像大概300MB左右,没学过PHP,没办法给Dockerfile文件 参考文章:Docker安装Typecho | D-y Blog感知不强,图一乐https://www.wlul.top…

Vagrant创建Oracle RAC环境示例

利用Vagrant安装Oracle RAC(默认为non-CDB模式),生成2台虚机,耗时约1小时。 node1: -----------------------------------------------------------------node1: INFO: 2024-01-11 18:25:54: Make create database commandnode1: …

SpringBoot 更新业务场景下,如何区分null是清空属性值 还是null为vo属性默认值?

先看歧义现象 值为null 未传递此属性 所以此时如何区分null 时传递进来的的null,还是属性的默认值null? 引入方案 引入过滤器,中间截获requestBodyData并保存到HttpServletRequest,业务层从HttpServletRequest 获取到requestBodyData辅…

C语言算法赛——蓝桥杯(省赛试题)

一、十四届C/C程序设计C组试题 十四届程序C组试题A#include <stdio.h> int main() {long long sum 0;int n 20230408;int i 0;// 累加从1到n的所有整数for (i 1; i < n; i){sum i;}// 输出结果printf("%lld\n", sum);return 0; }//十四届程序C组试题B…

Cortex-M3/M4内核中断及HAL库函数详解(1):中断相关寄存器

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; Cortex M3与M4权威指南 stm32f407的HAL库工程 STM32F4xx中文参考手册 1 NVIC相关寄存器介绍 在Cortex-M3/M4内核上搭载了一个异常响应系统&#xff0c;支持为数众多的系统异常和外部中断。其中&#…