在 Apifox 中采用 CryptoJS 进行高级 AES 参数加密
lipiwang 2024-11-04 14:34 42 浏览 0 评论
假如现在要在 Apifox 中发送一个「登录」的请求,然后我需要将接口中的 password 参数使用 AES 加密算法加密以后,再传给后台服务,这要怎么做?
要在 Apifox 中使用 AES 加密算法对 password 参数进行加密,你需要在「前置操作」中编写 JavaScript 代码,并使用 CryptoJS 库来实现 AES 加密,具体操作见下文。在开始之前,我们先了解一下什么是 AES 加密算法。
什么是 AES 加密算法?
AES(Advanced Encryption Standard)是一种对称加密算法,它使用相同的密钥进行加密和解密。在使用 AES 算法进行加密时,通常需要以下参数:
- 密钥 (Key) :AES 算法使用的密钥长度可以是 128 位、192 位或 256 位(16/24/32字节)。密钥长度不同,安全性也不同。
- 初始向量 (Initialization Vector,IV) :初始向量是一个随机生成的固定长度的参数,用于增加加密的安全性,尤其是在对同一段明文进行多次加密时。IV 的长度通常为 128 位(16字节)。
- 加密模式 (Mode of Operation) :AES 算法支持多种加密模式,例如 ECB、CBC、CTR、OFB、CFB 等。每种模式有不同的特点和适用场景,选择合适的加密模式对于实际应用至关重要。
- 填充方式 (Padding) :在对明文进行加密时,如果明文的长度不是分组长度的整数倍,就需要对其进行填充。常用的填充方式有 PKCS#5、PKCS#7 填充、Zero 填充等。
- 字符编码 (Character Encoding) :在对明文进行加密前,通常需要将其转换为字节流。这时需要指定字符编码,如 UTF-8、ASCII 等。
- 密钥衍生 (Key Derivation) :有时候会使用密钥衍生函数(Key Derivation Function,KDF)从密码中派生出实际用于加密的密钥。
这些参数的选择和配置需要根据具体的应用场景和安全需求来确定。特别注意,加密和解密过程需要相同的密钥和初始向量才能正确执行。
实现步骤
首先在 Apifox 中打开你的「登录」接口,然后转到【修改文档->前置操作】标签页,新建一个自定义脚本,你就可以在这里编写你的加密脚本。需要注意的是,自定义脚本需要在「变量替换&继承父级」之前,见下图:
接下来,我们就可以使用 AES 加密算法来给接口的请求参数加密了。
步骤 1
引入 CryptoJS 库
CryptoJS 是一个流行的 JavaScript 库,用于提供加密算法的实现,例如 AES、DES、TripleDES、Rabbit、RC4、MD5、SHA-1、SHA-256 等。使用 CryptoJS,你可以在客户端或服务器端轻松地实现加密功能,以保护数据的安全性。
Apifox 中内置了 CryptoJS 库,所以你可以直接使用,引入方式为:
var CryptoJS = require("crypto-js");
步骤 2
编写 AES 加密脚本
假设你的密码字段名是 password,你可以先将其存到环境变量中并给定值(比如:123456),或者等下直接在脚本中赋值。
下面是一个使用 CryptoJS 进行 AES 加密的示例脚本,该脚本将加密后的密码存储到环境变量中,以便在后续的请求中使用。
// 导入 crypto-js 模块var CryptoJS = require("crypto-js");
// 密码获取方式根据实际情况调整// 假设这是我们要加密的`password`字段的值,从环境变量中获取const password = pm.environment.get("password"); // 或其他方式获取,比如直接赋值
// 使用安全方式确定的密钥和IV(这里为了示例简化说明,实际应用中需要保护好这些敏感信息)const key = CryptoJS.enc.Utf8.parse('mySecretKey12345'); // 确保是16/24/32字节const iv = CryptoJS.enc.Utf8.parse('myIVmyIVmyIVmyIV'); // 确保是16字节
// AES加密const encrypted = CryptoJS.AES.encrypt(password, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7}).toString();
// 把加密后的密码设置为一个新的变量,可以在请求体内使用pm.environment.set("encryptedPassword", encrypted);
脚本具体解释如下:
- 导入 crypto-js 模块。
- 使用环境变量或其他方式获取要加密的密码(在这里假设密码从环境变量中获取)。
- 定义了一个密钥 key 和一个初始化向量 iv。密钥和初始化向量是用来加密和解密数据时的重要参数,在实际应用中,应该保护好这些敏感信息。
- 使用 crypto-js 中的 AES 加密函数 CryptoJs.AES.encrypt() 对密码进行加密。其中,传入的参数包括原始密码 (password) 、密钥 (key) 、初始化向量 (iv) 以及加密模式 (mode) 和填充方式 (padding) 。在 CryptoJS 中,使用 CryptoJs.pad.Pkcs7 来指定使用 PKCS#7 填充方式。
- 将加密后的密码存储到一个新的环境变量中,以便在后续的请求中使用。
在「前置操作」中编写的加密脚本会在发起请求之前自动执行,下面就来发起一个请求,看看这个 password 字段是否被加密并发送到后台服务了。
步骤 3
在请求体中使用加密后的密码
在请求体(假设你的请求体是 JSON 格式)中,使用加密后的密码代替原始密码:
{ "username": "zhangsan", "password": "{{encryptedPassword}}"}
这里的 {{encryptedPassword}} 是 Apifox 的变量语法,它会被替换为「前置操作」中设置的环境变量 encryptedPassword 的值,也就是通过 AES 加密算法加密后的值。
步骤 4
发送请求
点击「发送」按钮,查看返回响应。我这里为了测试数据,所以让后台把接口传过来的参数解密后返回了,可以看到后台解密后的 password 字段值与上面 “步骤 2” 的环境变量中定义的值一样。
来到「实际请求」那里查看,可以看到接口发送的 password 字段是加密传参的,说明 AES 加密脚本生效。
附录
下面的代码是用 FastAPI 写的一段简单的 AES 解密脚本,有兴趣可以建个 .py 文件运行一下,对应的 http://127.0.0.1:8000/decrypt 就是上文例子的请求接口。运行前记得安装相关的模块,如 pip install pycryptodome 等,也可以根据控制台的报错来安装,缺什么就装什么。
from fastapi import FastAPI
from pydantic import BaseModel
from Crypto.Cipher import AES
import base64
import uvicorn
app = FastAPI()
# 解密函数
defdecrypt_password(password: str, key: bytes, iv: bytes) -> str:
cipher = AES.new(key, AES.MODE_CBC, iv)
decrypted_bytes = cipher.decrypt(base64.b64decode(password))
# 去除填充
unpadded_password = decrypted_bytes[:-decrypted_bytes[-1]].decode("utf-8")
return unpadded_password
class DecryptionRequest(BaseModel):
username: str
password: str
@app.post("/decrypt")
async def decrypt_password_endpoint(request: DecryptionRequest):
# 在这里设定你的密钥和初始向量
key = b'mySecretKey12345'
iv = b'myIVmyIVmyIVmyIV'
password = request.password
decrypted_password = decrypt_password(password, key, iv)
return {"username": request.username, "password": decrypted_password}
if __name__ == "__main__":
uvicorn.run(app, host="127.0.0.1", port=8000)
在 Apifox 中使用 AES 加密算法对密码参数进行加密的基本步骤如下:
- 在前置操作中编写 JavaScript 代码,使用 CryptoJS 库实现 AES 加密。
- 引入 CryptoJS 库并编写 AES 加密脚本,定义密钥和初始化向量,并对密码进行加密。
- 将加密后的密码存储到环境变量中,以便在后续请求中使用。
- 在请求体中使用加密后的密码。
- 发送请求并查看响应,确认密码字段已加密传参。
相关推荐
- 前端入门——css 网格轨道详细介绍
-
上篇前端入门——cssGrid网格基础知识整体大概介绍了cssgrid的基本概念及使用方法,本文将介绍创建网格容器时会发生什么?以及在网格容器上使用行、列属性如何定位元素。在本文中,将介绍:...
- Islands Architecture(孤岛架构)在携程新版首页的实践
-
一、项目背景2022,携程PC版首页终于迎来了首次改版,完成了用户体验与技术栈的全面升级。作为与用户连接的重要入口,旧版PC首页已经陪伴携程走过了22年,承担着重要使命的同时,也遇到了很多问题:维护/...
- HTML中script标签中的那些属性
-
HTML中的<script>标签详解在HTML中,<script>标签用于包含或引用JavaScript代码,是前端开发中不可或缺的一部分。通过合理使用<scrip...
- CSS 中各种居中你真的玩明白了么
-
页面布局中最常见的需求就是元素或者文字居中了,但是根据场景的不同,居中也有简单到复杂各种不同的实现方式,本篇就带大家一起了解下,各种场景下,该如何使用CSS实现居中前言页面布局中最常见的需求就是元...
- CSS样式更改——列表、表格和轮廓
-
上篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,这篇文章分享列表、表格和轮廓,一起来看看吧。1.列表List1).列表的类型<ulstyle='list-...
- 一文吃透 CSS Flex 布局
-
原文链接:一文吃透CSSFlex布局教学游戏这里有两个小游戏,可用来练习flex布局。塔防游戏送小青蛙回家Flexbox概述Flexbox布局也叫Flex布局,弹性盒子布局。它决定了...
- css实现多行文本的展开收起
-
背景在我们写需求时可能会遇到类似于这样的多行文本展开与收起的场景:那么,如何通过纯css实现这样的效果呢?实现的难点(1)位于多行文本右下角的展开收起按钮。(2)展开和收起两种状态的切换。(3)文本...
- css 垂直居中的几种实现方式
-
前言设计是带有主观色彩的,同样网页设计中的css一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式备注:...
- WordPress固定链接设置
-
WordPress设置里的最后一项就是固定链接设置,固定链接设置是决定WordPress文章及静态页面URL的重要步骤,从站点的SEO角度来讲也是。固定链接设置决定网站URL,当页面数少的时候,可以一...
- 面试发愁!吃透 20 道 CSS 核心题,大厂 Offer 轻松拿
-
前端小伙伴们,是不是一想到面试里的CSS布局题就发愁?写代码时布局总是对不齐,面试官追问兼容性就卡壳,想跳槽却总被“多列等高”“响应式布局”这些问题难住——别担心!从今天起,咱们每天拆解一...
- 3种CSS清除浮动的方法
-
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。首先,这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。下面我就讲3种常用清除浮动的...
- 2025 年 CSS 终于要支持强大的自定义函数了?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!1.什么是CSS自定义属性CSS自...
- css3属性(transform)的一个css3动画小应用
-
闲言碎语不多讲,咱们说说css3的transform属性:先上效果:效果说明:当鼠标移到a标签的时候,从右上角滑出二维码。实现方法:HTML代码如下:需要说明的一点是,a链接的跳转需要用javasc...
- CSS基础知识(七)CSS背景
-
一、CSS背景属性1.背景颜色(background-color)属性值:transparent(透明的)或color(颜色)2.背景图片(background-image)属性值:none(没有)...
- CSS 水平居中方式二
-
<divid="parent"><!--定义子级元素--><divid="child">居中布局</div>...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)