使用 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.mzph.cn/news/636722.shtml

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

相关文章

寒假思维训练计划day11

每日一题,这两天有事,断更了一天,今天补上,感觉状态也不太好,来道1500的题压压惊。 宣传一下我总结的几个构造题模型,一点个人的浅薄见解: 1、前后缀贪心,比如说观察前后缀的sum&…

RK3568平台 LT9211转接芯片调试笔记

一.简介 龙讯LT9211是一个高性能转换器,支持MIPI LVDS TTL两两之间转换。 使用此款芯片大部分为MIPI与LVDS进行互相转换。 下图为LT9211的典型应用图: 二.LT9211原理图 三.车载显示器和摄像头系统 四.调试LT9211输出 MIPI数据 (1&#xf…

web系统设计安全性基本要求

接口设计安全 身份鉴别 独立的登录模块:为社会用户和平台运营管理用户提供独立的登录地址、登录界面和身份认证模块,通过防火墙等设备严格限制能够登录WEB应用的用户地址、身份; 双因素认证: 平台运营管理人员:采用用…

Civil 3D安装教程,免费使用,带安装包和工具,一分钟轻松搞的安装

前言 Civil 3D是一款面向基础设施行业的建筑信息模型(BIM)解决方案。它为基础设施行业的各类技术人员提供了强大的设计、分析以及文档编制功能,广泛适用于勘察测绘、岩土工程、交通运输、水利水电、市政给排水、城市规划和总图设计等众多领域…

MySQL(五)——多表查询

上期文章 MySQL(四)——约束 文章目录 上期文章多表关系一对多(多对一)多对多多表外键关系可视化一对一 多表查询概述笛卡尔积多表查询分类连接查询 内连接隐式内连接显式内连接 外连接左外连接右外连接 自连接联合查询 union&am…

Android Framework | AOSP源码下载及编译指南(基于Android13)

Android Framework | AOSP源码下载及编译指南(基于Android13) 引言 AOSP(Android Open Source Project)是Android操作系统的开源项目,通过下载和编译AOSP源码,您可以获得原始的Android系统,并进行定制和开发。本教程…

【C++】—— C++的IO流

在C中,I/O流是一项关键的编程概念,为程序提供了与外部世界进行交互的重要手段。通过使用C的强大I/O库,开发者能够实现对标准输入输出、文件、字符串等多种数据源的高效处理。接下来让我们深入探讨C的I/O流,了解其基本原理、常见操…

浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)

Web Scraper 是一个浏览器扩展,用于从页面中提取数据(网页爬虫)。对于简单或偶然的需求非常有用,例如正在写代码缺少一些示例数据,使用此插件可以很快从类似的网站提取内容作为模拟数据。从 Chrome 的插件市场安装后,页面 F12 打开…

RT-Thread experimental 代码学习(1)thread_sample

RTOS的最基础功能是线程。 线程的调度是如何工作的?RT-thread官方的实验文档是最好的参考。 老规矩,先放法国人doxygen。 thread_sample 代码的调用关系图 有意思的是,RT有两种创建线程的方式 - 静态和动态,粗略的理解是&…

微信小程序之WXML 模板语法之数据绑定、事件绑定、wx:if和列表渲染

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需…

数字图像处理期末速成笔记

目录 一、基础知识二、相邻像素间基本关系三、图像增强方法1、直方图求解2、直方图均衡化3、直方图规定化4、图像平滑5、邻域平均法(线性)6、 中值滤波法(分线性)7、中值滤波与领域平均的异同8、4-邻域平滑法9、超限像素平滑法10、…

我们应该了解的⽤户画像

当我们谈⽤户画像时,到底在谈什么 对于互联⽹公司来说,企业的增⻓、内容、活动、产品等⼯作基本上都是围绕着“⽤户”来做的,可以说都是在做“⽤户运营”这个⼯作,⽽⽤户画像是⽤户运营⼯作中⾮常重要的⼀环 ⽤户画像的主要特征是…

【js】js 异步机制详解 Generator / Async / Promise

三种语法功能放在一起,是因为他们都有相似特点: 维护某种状态在未来恢复状态并执行 本文重点回答以下几个问题: 为什么 Generator 和 Async 函数的 代码执行流 都可以简化成树形结构?async 函数为什么返回一个 promise&#xf…

Cloudreve存储策略-通过从机存储来拓展容量

Sham的云服务器是搬瓦工最低低低配的,1H 0.5G不说,硬盘容量也只有10g,说实话,装了宝塔面板和服务器套件后,基本满了,这时又想在云服务器上打个网盘用于下载、存储,这时就需要拓展硬盘&#xff0…

【podman】podman学习

Podman 官网 快速开始 面向 Docker 用户的 Podman 和 Buildah Podman是一个开源的容器、pod和容器映像管理引擎。Podman使查找、运行、构建和共享容器变得容易。 Podman Desktop是Podman的图形应用程序,使其易于在Windows、MacOS和Linux上安装和使用Podman&…

烟火检测AI边缘计算智能分析网关V4如何通过ssh进行服务器远程运维

智能分析网关V4是一款高性能、低功耗的AI边缘计算硬件设备,它采用了BM1684芯片,集成高性能8核ARM A53,主频高达2.3GHz,并且INT8峰值算力高达17.6Tops,FB32高精度算力达到2.2T,每个摄像头可同时配置3种算法&…

Fiddler基础使用指南

1. Fiddler介绍 Fiddler 是一款抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作,也可以用来检测网络安全 2. 设置过滤 通过设置过滤条件,可以使抓包工具过滤掉非目标包 3. 删除数据 被抓取的包可以进行手动删除 …

使用aspera下载SRA数据速度高达 下载中国gsa数据? ascp

转载自:秘籍 | 惊了,使用aspera下载SRA数据速度高达 291Mb/s - 简书 一、安装Aspera Connect 安装Linux版的Aspera Connect # 上面链接是最新版,因此下载的时候去官网复制最新的链接地址下载,否则可能会报错 wget https://d3gcli…

54 C++ 多线程 条件变量 condition_variable,wait(),notify_one()

一 前提:之前代码的缺陷 在前面我们使用两个线程 ,一个线程读,一个线程写来完成对于共享数据访问。 我们把这个代码 先放在这里,方便回忆,然后说明代码可能存在的问题,然后改动。 class Teacher174 { pri…

Elasticsearch Index Shard Allocation 索引分片分配策略

Elasticsearch 索引分片的分配策略说明 在上一篇《索引生命周期管理ILM看完不懂你锤我 》(https://mp.weixin.qq.com/s/ajhFp-xBU1dJm8a1dDdRQQ)中,我们已经学会了索引级别的分片分配过滤属性,也就是在配置文件中指定当前节点的属…