js通过AES进行加解密(ECB、CBC模式)

 更新时间:2025年07月25日 11:22:57   作者:喜欢代码的新之助  
AES加密算法提供了五种不同的工作模式:CBC,ECB,CTR,CFB,OFB,本文主要介绍ECB与CBC模式实现与差异,具有一定的参考价值,感兴趣的可以了解一下

加密需求

在项目开发中,由于需要对接口传参的敏感信息进行加密传输,后端接口返回的参数也是进行加密过的,此时就需要进行加解密操作。

本篇文章使用AES进行加解密,AES加密算法提供了五种不同的工作模式:CBC,ECB,CTR,CFB,OFB

这里只对CBC和ECB加解密进行说明,这两种加密模式在前端使用时主要区别如下:

  • 一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。
  • 一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全性好于ECB,是SSL、IPSec的标准)

AES加解密

安装依赖

npm install crypto-js --save-dev

封装加解密方法(ECB模式)

将以下方法进行封装,文件命名为aes.js

// 引入
import CryptoJS from 'crypto-js'

// 密钥
const AES_KEY = '****************' // 后端提供

// 加密
export function encrypt ({ word }) {
  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
  const srcs = CryptoJS.enc.Utf8.parse(word)
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}

// 解密
export function decrypt ({ word }) {
  var key = CryptoJS.enc.Utf8.parse(AES_KEY)
  var decrypt = CryptoJS.AES.decrypt(word, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return CryptoJS.enc.Utf8.stringify(decrypt).toString()
}

使用

// 引入aes.js,注意文件路径不要出错
import { encrypt, decrypt } from './aes'

// data:需要加密的数据
// encryptData:加密后的密文
// 若有需要则将js对象转换为字符串后进行加密:JSON.stringify(data)
const encryptData = encrypt({ word: JSON.stringify(data) })

// data:需要解密的密文
// decryptData:解密后的数据
// 若解密结果为json字符串,则可以通过JSON.parse()方法将解密结果转化为json对象
const decryptData = decrypt({ word: data}) 

封装加解密方法(CBC模式)

将以下方法进行封装,文件命名为aes.js

// 引入
import CryptoJS from 'crypto-js'

// 密钥
const AES_KEY = '****************' // 后端提供
// 初始化向量
const IV = '****************' // 后端提供

//加密方法
export function encrypt( word ) {
	let key = CryptoJS.enc.Utf8.parse(AES_KEY)
	let iv = CryptoJS.enc.Utf8.parse(IV)
	let srcs = CryptoJS.enc.Utf8.parse(word)

	let encrypted = CryptoJS.AES.encrypt(srcs, key, {
		iv,
  		mode: CryptoJS.mode.CBC,
  		padding: CryptoJS.pad.ZeroPadding
	});
	return encrypted.toString();
}

//解密方法
export function decrypt( word ) {
	var key = CryptoJS.enc.Utf8.parse(AES_KEY)
	let iv = CryptoJS.enc.Utf8.parse(IV)
	
	var decrypt = CryptoJS.AES.decrypt(word, key, {
  		iv,
  		mode: CryptoJS.mode.CBC,
 		padding: CryptoJS.pad.ZeroPadding
	})
	return decrypt.toString(CryptoJS.enc.Utf8).trim()
}

使用

// 引入aes.js,注意文件路径不要出错
import { encrypt, decrypt } from './aes'

// data:需要加密的数据
// encryptData:加密后的密文
// 若有需要则将js对象转换为字符串后进行加密:JSON.stringify(data)
const encryptData = encrypt(JSON.stringify(data))

// data:需要解密的密文
// decryptData:解密后的数据
// 若解密结果为json字符串,则可以通过JSON.parse()方法将解密结果转化为json对象
const decryptData = decrypt(data)

到此这篇关于js通过AES进行加解密(ECB、CBC模式)的文章就介绍到这了,更多相关js AES加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现在指定元素中垂直水平居中

    javascript实现在指定元素中垂直水平居中

    当谈到网页的布局中,居中问题一直得不到很有效的解决,居中通常是相对于某一个元素的,比如我们经常所说的屏幕居中的问题,我们了解父元素的信息越多,我们就越能更加容易的实现居中布局。下面我们通过具体的实例来看看javascript如何来实现垂直水平居中
    2015-09-09
  • 前端接入AI接口的常见问题与优化避坑指南

    前端接入AI接口的常见问题与优化避坑指南

    在前端技术快速发展的今天,HTML5接入AI接口的常见问题与优化已经成为每个前端开发者必须掌握的核心技能,下面小编就和大家详细介绍一下前端接入AI接口的常见问题和优化技巧吧
    2026-04-04
  • js中new一个对象的过程

    js中new一个对象的过程

    本文主要介绍了js中new一个对象的过程。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js实现轮播图特效

    js实现轮播图特效

    这篇文章主要为大家详细介绍了js实现轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 来访统计

    来访统计

    来访统计...
    2006-11-11
  • JS+Canvas实现接球小游戏的示例代码

    JS+Canvas实现接球小游戏的示例代码

    本文主要为大家详细介绍了如何利用JS+Canvas实现接球小游戏,文中的示例代码讲解详细,对我们学习有一定的帮助,感兴趣的小伙伴可以了解一下
    2022-06-06
  • 用js判断输入是否为中文的函数

    用js判断输入是否为中文的函数

    本篇文章主要是对js判断输入是否为中文的函数进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • javascript中几个容易混淆的概念总结

    javascript中几个容易混淆的概念总结

    这篇文章主要介绍了javascript中几个容易混淆的概念总结,都是平时经常遇到的问题,这里推荐给大家,有需要的小伙伴参考下吧。
    2015-04-04
  • 原生JS实现瀑布流插件

    原生JS实现瀑布流插件

    本篇文章给大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有兴趣的读者们参考学习下吧。
    2018-02-02
  • JS实现图片轮播跑马灯

    JS实现图片轮播跑马灯

    这篇文章主要为大家详细介绍了原生JS实现图片轮播跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论