AES加密解密 - 前端crypto-js.min.js和后端UE4使用Crypto++互相加解密

已于 2022-03-22 10:32:32 修改
阅读量4.7k 收藏 3
点赞数 4
分类专栏： UE4 文章标签： 前端 javascript ue4 c++
于 2022-03-11 17:53:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43923422/article/details/123429571
版权

UE4中Crypto++库加密解密

第二节：AES加密解密 - 前端crypto-js.min.js和后端UE4使用Crypto++互相加解密

文章目录

前言

有一个应用系统包含前端html和UE4后端。其中前端某一部分导航功能需要跳转至后端（简单的说就是前端现在要把后端中的所有功能包含进来），这里就涉及到前端登录后的权限要同步到后端，实现单点登录，针对外部用户就采用了aes加密的方式验证。 实现思路： 在登录前端的情况下，外部用户点击跳转至后端的时候免登录，同步权限。这里是在跳转时，前后端协商采用aes的加解密对该用户进行校验。后端UE4使用Crypto++库,前端使用crypto-js.min.js进行AES的对应操作。经过测试，本例中的前后端代码的加密解密计算结果是一致的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端

前端html写两个函数，一个是加密函数，使用公钥加密字符串并将密文发送到后端进行解密。另一个是解密函数，需要接收后端发来的密文，并使用私钥将密文解密成明文。

<script src="./crypto-js.min.js"></script>
<script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>

<script type = "text/javascript">
//--AES
    function AesEncrypt(type, content, aesKey){ //AES加密

        var cipherStr = "";
        var srcs = CryptoJS.enc.Utf8.parse(content);
        switch(type)
        {
            case "AES":
                cipherStr = CryptoJS.AES.encrypt(srcs, aesKey, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.ZeroPadding
            }).toString();
        }        

        var words = CryptoJS.enc.Base64.parse(cipherStr);   //将Base64编码转换为WordArray对象
        var hex = CryptoJS.enc.Hex.stringify(words);        //WordArray对象转换为hex编码
        return hex;
    }

    function AesDecrypt(hexStr, aesKey){    //AES解密
        var words = CryptoJS.enc.Hex.parse(hexStr);             //将hex编码解析转换为WordArray对象
        var ciphertext = CryptoJS.enc.Base64.stringify(words);  //WordArray对象转换为base64编码
        var bytes  = CryptoJS.AES.decrypt(ciphertext, aesKey, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.ZeroPadding
            });
        var originalText = bytes.toString(CryptoJS.enc.Utf8);
        return originalText;
    }    

</script>

需要注意的是，前端crypto-js.min.js加密的密文是base64格式的，而后端Crypto++是hex格式的。所以前端发送密文前，需要将密文转换为hex格式。前端接收密文后，需要将密文转换为base64格式。

二、后端

后端UE4写二个函数，一个是生成公私密钥函数。一个是加密函数，使用公钥加密字符串并将密文发送到前端进行解密。另一个是解密函数，需要接收前端发来的密文，并使用私钥将密文解密成明文。
以下为实现逻辑：

1. C++代码

MyBlueprintFunctionLibrary.h

#pragma once

#include "CoreMinimal.h"

#include <ThirdParty/CryptoPP/5.6.5/include/config_int.h>
#include <ThirdParty/CryptoPP/5.6.5/include/osrng.h>

#include "Kismet/BlueprintFunctionLibrary.h"
#include "MyBlueprintFunctionLibrary.generated.h"

/**
 * 
 */
UCLASS()
class TEST_API UMyBlueprintFunctionLibrary : public UBlueprintFunctionLibrary
{
	GENERATED_BODY()
	
public:	

	///ECB mode
	//AES加密
	UFUNCTION(BlueprintCallable, meta = (DisplayName = "ECB_AESEncryptData_H", Keywords = "ECB_AESEncryptData", aes_key = "0123456789ABCDEF0123456789ABCDEF"), Category = "AES")
		static FString ECB_AESEncryptData(FString aes_content, FString aes_key);

	//AES解密
	UFUNCTION(BlueprintCallable, meta = (DisplayName = "ECB_AESDecryptData_H", Keywords = "ECB_AESDecryptData", aes_key = "0123456789ABCDEF0123456789ABCDEF"), Category = "AES")
		static FString ECB_AESDecryptData(FString aes_content, FString aes_key, bool & result);
		
}

MyBlueprintFunctionLibrary.cpp

#include "MyBlueprintFunctionLibrary.h"

#include <base64.h>

#include "assert.h"
#include "randpool.h"

#include "string.h"
using namespace std;

#include "../../ThirdParty/crypto/include/Win64/aes.h"
#include "../../ThirdParty/crypto/include/Win64/hex.h"
#include "../../ThirdParty/crypto/include/Win64/modes.h"
#include "../../ThirdParty/crypto/include/Win64/rijndael.h"
#include "../../ThirdParty/crypto/include/Win64/pwdbased.h"
using namespace CryptoPP;

#include "../../ThirdParty/crypto/include/Win64/rsa.h"
using CryptoPP::RSA;
using CryptoPP::InvertibleRSAFunction;
using CryptoPP::RSAES_OAEP_SHA_Encryptor;
using CryptoPP::RSAES_OAEP_SHA_Decryptor;

#include "../../ThirdParty/crypto/include/Win64/sha.h"
using CryptoPP::SHA1;

#include "../../ThirdParty/crypto/include/Win64/files.h"
using CryptoPP::FileSink;
using CryptoPP::FileSource;

#include "../../ThirdParty/crypto/include/Win64/osrng.h"
using CryptoPP::AutoSeededRandomPool;

#include "../../ThirdParty/crypto/include/Win64/SecBlock.h"
using CryptoPP::SecByteBlock;

#include "../../ThirdParty/crypto/include/Win64/cryptlib.h"
using CryptoPP::Exception;
using CryptoPP::DecodingResult;


#pragma region ECB

FString UMyBlueprintFunctionLibrary::ECB_AESEncryptData(FString aes_content, FString aes_key)
{
	std::string sKey = TCHAR_TO_UTF8(*aes_key);
	const char *plainText = TCHAR_TO_ANSI(*aes_content);
	std::string outstr;

	//填key    
	SecByteBlock key(AES::MAX_KEYLENGTH);
	memset(key, 0x30, key.size());
	sKey.size() <= AES::MAX_KEYLENGTH ? memcpy(key, sKey.c_str(), sKey.size()) : memcpy(key, sKey.c_str(), AES::MAX_KEYLENGTH);
	
	AES::Encryption aesEncryption((byte *)key, AES::MAX_KEYLENGTH);
	
	ECB_Mode_ExternalCipher::Encryption ecbEncryption(aesEncryption);
	StreamTransformationFilter ecbEncryptor(
		ecbEncryption,
		new HexEncoder(new StringSink(outstr)),
		BlockPaddingSchemeDef::BlockPaddingScheme::ZEROS_PADDING
	);
	ecbEncryptor.Put((byte *)plainText, strlen(plainText));
	ecbEncryptor.MessageEnd();
	return UTF8_TO_TCHAR(outstr.c_str());	
}

FString UMyBlueprintFunctionLibrary::ECB_AESDecryptData(FString aes_content, FString aes_key, bool & result)
{
	std::string sKey = TCHAR_TO_UTF8(*aes_key);
	const char *cipherText = TCHAR_TO_ANSI(*aes_content);
	std::string outstr;
	try
	{
		//填key    
		SecByteBlock key(AES::MAX_KEYLENGTH);
		memset(key, 0x30, key.size());
		sKey.size() <= AES::MAX_KEYLENGTH ? memcpy(key, sKey.c_str(), sKey.size()) : memcpy(key, sKey.c_str(), AES::MAX_KEYLENGTH);
		
		ECB_Mode<AES >::Decryption ecbDecryption((byte *)key, AES::MAX_KEYLENGTH);
		
		HexDecoder decryptor(
			new StreamTransformationFilter(
				ecbDecryption,
				new StringSink(outstr),
				BlockPaddingSchemeDef::BlockPaddingScheme::ZEROS_PADDING
		));
		decryptor.Put((byte *)cipherText, strlen(cipherText));
		decryptor.MessageEnd();
		result = true;
	}
	catch (const std::exception& e)
	{
		outstr = "error";
		outstr = e.what();
		UE_LOG(LogTemp, Error, TEXT("ECB_AESDecryptData failed!"));
		result = false;
	}
	return UTF8_TO_TCHAR(outstr.c_str());
}

2. 蓝图

在这里插入图片描述

测试结果

将html页面加载到UE4中，运行效果如下：

  1. 后端UE4加密，前端html解密
    在这里插入图片描述

  2. 前端html加密，后端UE4解密
    在这里插入图片描述

完美实现前后端加解密。

总结

一般情况下，前端自己实现加解密没有问题，后端自己实现加解密也没有问题。问题主要出在3个方面：

  1. 前后端编码格式不一样
    前端加密的结果传到后端，或者后端加密的结果传到前端，对方无法识别接收到的字符串。主要原因在于双方的字符串编码格式不一样，前端的是base64格式，后端的是hex格式，这样就需要将格式进行转换。
  2. 填充方式不一样
    在这里，前端加密库使用ZeroPadding标准填充，所以后端也要使用ZEROS_PADDING方式填充。
  3. 分组密码操作模式不一样
    在这里，前端加密库使用ECB分组密码操作模式，所以后端也要使用ECB分组密码操作模式。

参考

使用crypto-js进行128位AES/ECB/PKCS7Padding加密/解密
使用 Crypto.js AES加密 CDN引用方式
crypto-js文档
crypto-js文档2
crypto-js文档3
crypto-廖雪峰的官方网站
在线RSA公钥加密解密

打磨的石头
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
crypto-js4.1.1版本，js在crypto-js文件夹里面
03-10
crypto-js4.1.1版本，js在crypto-js文件夹里面
crypto-js.min.js
01-14
aes加密解密用js，CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法，CryptoJS是一个纯javascript写的加密类库，我们使用它只需要加入相关的引用即可。
javascript加密库CryptoJS用法
weixin_42156283的博客
02-01 3444
<script src="CryptoJS.min.js"></script> <script> // 1.消息摘要算法 var wordArray = CryptoJS.enc.Utf8.parse("66666"); // 字符串先转变为wordArray， 也可以不用转变，实际情况根据网站 var md5_str = Crypto...
UE4(虚幻4)拾取钥匙开门
Huangpengyu123的博客
05-21 1669
这篇文章是我看哔哩哔哩上学习的笔记,学习的地址如下: https://www.bilibili.com/video/BV164411Y732?t=168&p=15 因本人才疏学浅，如有错误之处，还请见谅 UE4拾取钥匙开门 ① 设置门的ViewPort,这是已经很多遍了,这次就直接看哈,代码吧 然后看下,我们钥匙的ViewPort ② 看看新加的结点 这个是Key的蓝图的样子 然后我们就制作完成拉 下面贴一下,这两个蓝图类的地址吧 门是Door_E 钥匙是Key 下面是资源的链接 http
crypto-js 使用
liubangbo的专栏
04-28 2521
crypto-js 是谷歌开源的一个js 加密库，如果是用npm install 安装的化 使用方法如下： const CryptoJS = require('crypto-js') const hash = CryptoJS.HmacSHA256(sign, privatekey) const SIGNATURE = CryptoJS.enc.Base64.stringify(hash) 如果想直接引用源码的话，就需要找个压缩的源代码，可以用这个： CryptoJS.min.js 链接：ht.
PBKDF2加密解密 - 前端crypto-js.min.js和后端UE4使用Crypto++互相加解密
weixin_43923422的博客
03-15 3002
UE4中Crypto++库加密解密 第四节：PBKDF2加密解密 - 前端crypto-js.min.js和后端UE4使用Crypto++互相加解密 文章目录UE4中Crypto++库加密解密前言一、前端二、后端1. C++代码2. 蓝图测试结果总结参考 前言 有一个应用系统包含前端html和UE4后端。其中前端某一部分导航功能需要跳转至后端（简单的说就是前端现在要把后端中的所有功能包含进来），这里就涉及到前端登录后的权限要同步到后端，实现单点登录，针对外部用户就采用了aes加密的方式验证。 实现思路：
crypto-js.min.js:1 Uncaught Error: Malformed UTF-8 data
qq_44717657的博客
03-22 2369
解密时遇到的前端报错 Malformed UTF-8 data
CryptoJS v3.1.2.rar完整js源代码库
02-23
CryptoJS v3.1.2.rar完整算法库，支持AES，DES，SHA、MD5、RSA、HMAC等等常用算法。
AES前端加密解密工具js-crypto.js
02-14
AES前端工具js-crypto.js，用于javascript前端进行AES加解密。使用方法请看我的博客：https://blog.csdn.net/IndexMan/article/details/87278030
crypto-js.zip，AES加密解密egret库有.d.ts文件
06-04
AES加密解密egret库有.d.ts文件，可以直接放入egret中使用，AES加密解密egret库有.d.ts文件，可以直接放入egret中使用
crypto-js加密解密全部资源包，jquery-2.2.4.min也附在里面方便大家使用
10-25
里面包含了所有前台加密的js代码。 像AES.JS,Md5.js,SHA.js等，方便那些上不了谷歌的人下载。
aesJS.zip，包含aes.js和crypto-js.js
06-02
用户前端数据加密，支持html、jsp文件，引入js文件即可使用，如有疑问，请留言评论，提供demo代码支持；
web server apache tomcat11-32-rewrite
05-06 657
整理这个官方翻译的系列，原因是网上大部分的 tomcat 版本比较旧，此版本为 v11 最新的版本。重写阀门实现了 URL 重写功能，与 Apache HTTP Server 中的 mod_rewrite 非常相似。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 512
createWs("测试数据", (res) => {
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 616
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
前端 | iframe框架标签应用（二）| 外部页面导入
最新发布
因为健忘，所以记点有的没的〒▽〒
05-06 969
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
前端aes加密crypto-js
08-24
前端使用crypto-js库进行AES加密非常简单。首先，确保你已经在项目中引入了crypto-js库。然后，按照以下步骤进行AES加密： 1. 导入所需的模块： ```javascript import { AES } from 'crypto-js'; import { enc } from 'crypto-js'; ``` 2. 创建一个加密函数，用于加密数据： ```javascript function encryptData(data, key, iv) { const encrypted = AES.encrypt(data, key, { iv: iv }); return encrypted.toString(); } ``` 这个函数接收三个参数：data（需要加密的数据），key（加密密钥），iv（初始化向量）。 3. 调用加密函数： ```javascript const data = '要加密的数据'; const key = '加密密钥'; const iv = '初始化向量'; const encryptedData = encryptData(data, key, iv); console.log(encryptedData); ``` 将你想要加密的数据、加密密钥和初始化向量传递给encryptData函数，它将返回加密后的数据。 这就是在前端使用crypto-js库进行AES加密的基本步骤。记得在生产环境中，不要直接在前端存储敏感信息，最好将加密操作放在后端进行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值