当前位置: 首页 > 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

欢迎访问:天问博客

相关文章:

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

在前端开发中,数据的加密和解密是为了保障用户隐私和数据的安全性而常见的任务。AES(Advanced Encryption Standard)是一种对称密钥加密算法,被广泛用于保护敏感信息的传输和存储。本文将介绍 AES 加解密的基本原理,并…...

Vue-30、Vue非单文件组件。

非单文件组件&#xff1a; 一个组件包含n个组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>非单文件组件</title><script type"text/javascript" src"https://cdn.jsde…...

7-6 实验2_1_判断两数的大小

7-6 实验2_1_判断两数的大小 分数 100 全屏浏览题目 切换布局 作者 scs 单位 北京邮电大学 已知有两个整数&#xff0c;请使用if-else选择结构将它们中的较大数选择出来&#xff0c;存到max变量中&#xff1b;将较小数选择出来&#xff0c;存到min变量中&#xff0c;并将选…...

POKT Network (POKT) :进军百亿美元市场规模的人工智能推理市场

POKT Network&#xff08;又称 Pocket Network&#xff09;是一个去中心化的物理基础设施网络&#xff08;DePIN&#xff09;&#xff0c;它能够协调并激励对任何开放数据源的访问&#xff0c;最初专注于向应用程序和服务提供商提供区块链数据。 自 2020 年主网上线以来&#x…...

【STM32】STM32学习笔记-I2C通信外设(34)

00. 目录 文章目录 00. 目录01. I2C简介02. I2C外设简介03. I2C框图04. I2C基本结构05. 主机发送06. 主机接收07. 软件/硬件波形对比08. 预留09. 附录 01. I2C简介 I2C(Inter&#xff0d;Integrated Circuit)总线是一种由NXP&#xff08;原PHILIPS&#xff09;公司开发的两线式…...

从数据角度分析年龄与NBA球员赛场表现的关系【数据分析项目分享】

好久不见朋友们&#xff0c;今天给大家分享一个我自己很感兴趣的话题分析——NBA球员表现跟年龄关系到底大不大&#xff1f;数据来源于Kaggle&#xff0c;感兴趣的朋友可以点赞评论留言&#xff0c;我会将数据同代码一起发送给你。 目录 NBA球员表现的探索性数据分析导入Python…...

深入浅出Spring AOP

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天要聊的是Java中Spring框架的AOP&#xff08;面向切面编程&#xff09;。对于程序员来说&#xff0c;理解AOP对于掌握Spring框架来说是超级关键的。它像是魔法一样&#xff0c;能让咱们在不改变原有代码的…...

火速收藏!2024 新年微信红包封面领取全攻略

2024“龙”重登场&#xff01;今年有哪些令人期待的红包封面&#xff1f; 前方大批精美红包封面来袭&#xff0c;全新品牌氛围红包封面上线&#xff0c;支持品牌定制特色氛围元素&#xff0c;沉浸感受浓浓年味儿&#xff0c;收获满满惊喜&#xff01; 新年开好运&#xff0c;微…...

【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《RabbitMQ实战》。&#x1f3af;&#x1f3af; &am…...

企业多云组网怎么办?

在当今数字化时代&#xff0c;企业普遍采用多云策略&#xff0c;同时利用不同云平台的优势以实现成本优化和整体性能提升。根据Futuriom于2022年发布的“安全多云网络调查”报告&#xff0c;80%的受访者表示他们使用来自两个或更多公共云提供商的PaaS或IaaS产品。 多云策略的迅…...

背包问题(贪心) 二维01背包问题 Java

背包问题&#xff08;贪心&#xff09; 最优装载问题 题目描述 有n件物品和一个最大承重为w 的背包。第i件物品的重量是weight[i]&#xff0c;每件只能用一次&#xff0c;求装入背包的最多物品数量。 题目分析 因为我们只要求装入物品的数量&#xff0c;所以装重的显然没有…...

2019年认证杯SPSSPRO杯数学建模D题(第二阶段)5G时代引发的道路规划革命全过程文档及程序

2019年认证杯SPSSPRO杯数学建模 D题 5G时代引发的道路规划革命 原题再现&#xff1a; 忙着回家或上班的司机们都知道交通堵塞既浪费时间又浪费燃料&#xff0c;甚至有的时候会带来情绪上的巨大影响&#xff0c;引发一系列的交通问题。据报道&#xff0c;每年交通拥堵使得美国…...

可视化k8s页面(Kubepi)

Kubepi是一个简单高效的k8s集群图形化管理工具&#xff0c;方便日常管理K8S集群&#xff0c;高效快速的查询日志定位问题的工具 随便在哪个节点部署&#xff0c;我这里在主节点部署 docker pull kubeoperator/kubepi-server docker run --privileged -itd --restartunless-st…...

1434. 数池塘(四方向)-深度优先搜索-DFS

代码&#xff1a; #include<iostream> using namespace std; char a[200][200]; int fx[4]{0,1,0,-1}; int fy[4]{1,0,-1,0}; int k0; int n,m; void dfs(int x,int y){a[x][y].;int tx,ty;for(int i0;i<4;i){txxfx[i];tyyfy[i];if(tx>1&&tx<n&&am…...

Mysql:重点且常用的操作和理论知识整理 ^_^

目录 1 基础的命令操作 2 DDL 数据库定义语言 2.1 数据库操作 2.2 数据表操作 2.2.1 创建数据表 2.2.2 修改和删除数据表 2.2.3 添加外键 3 DML 数据库操作语言 3.1 插入语句(INSERT) 3.2 修改语句(UPDATE) 3.3 删除语句 3.3.1 DELETE命令 3.3.2 TRUNCATE命令 4 …...

小车辅助脚本编写

小车辅助脚本编写 在远程控制中需要启动非常多的 Launch 文件&#xff0c;在终端启动很麻烦&#xff0c;编写一些脚本可以简化操作 robot_client.sh #!/bin/bashecho "开始执行Bash脚本"# 启动zedm roslaunch zed_wrapper zedm.launch & sleep 5# 启动realsen…...

Modern C++ 一个例子学习条件变量

目录 问题程序 施魔法让BUG浮出水面 条件变量注意事项 修改程序 问题程序 今天无意中看到一篇帖子&#xff0c;关于条件变量的&#xff0c;不过仔细看看发现它并达不到原本的目的。 程序如下&#xff0c;读者可以先想想他的本意&#xff0c;以及有没有问题&#xff1a; #…...

ora-12154无法解析指定的连接标识符

用户反映查询的时候报错ora-12154 这个系统只做历史数据查询使用&#xff0c;使用并不平凡&#xff0c;该数据库曾做过一次服务器间的迁移。 用户描述&#xff0c;所有oracle客户端查询该视图都报tns错误&#xff0c;一般ora-12154会发生在连接数据库时&#xff0c;因为tns配…...

rust跟我学三:文件时间属性获得方法

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎样获得杀毒软件的病毒库时间的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址…...

解决一个mysql的更新属性长度问题

需求背景&#xff1a; 线上有一个 platform属性&#xff0c;原有长度为 varchar(10)&#xff0c;但是突然需要填入一个11位长度的值&#xff1b;而偏偏这个属性在线上100张表中有50张都存在&#xff0c;并且名字各式各样&#xff0c;庆幸都包含 platform&#xff1b;例如 platf…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...