前端传参安全:window.btoa Base64加密与简单对称加密实现
本文介绍前端传参的安全处理方案。首先讲解如何利用window.btoa()进行Base64编码,确保参数独立为字符串。随后探讨简单的对称加密原理,包括替代密码和置换密码的实现思路,并提供C++与JavaScript转换建议,帮助开发者在前后端交互中提升数据安全性。
那么如何在前端简单且便捷地生成加密参数呢?
我们可以使用window.btoa()方法,这是Window对象内置的Base64编码规则。需要注意的是,输入参数必须是独立的字符串类型。解密时,需将加密后的文本通过window.atob(Str)进行还原,其中Str必须是经由btoa()方法编码的字符串。
在代码中,我们可以这样调用:
/*
* 根据条件查找
* @params{}
* */
searchTemplate=()=>{
let info=""
this.props.form.validateFields((err, values) => {
if(!err){
console.log(window.btoa(values.carId))
let data={
carId:window.btoa(values.carId),
data:values.data,
timeRange:[moment(values.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'), moment(values.timeRange[1]).format('YYYY-MM-DD HH:mm:ss')]
}
console.log("getData",data)
//根据查询结果显示不同信息内容
info="数据生成失败,请重新设置条件查询"
this.setState((state)=>({visible: true,modalInfo:info}));
}
})
}console.log(window.btoa(values.carId))

这部分输出即为我们的加密参数。特别提醒,务必告知后端开发人员该参数采用了Base64加密,以免因协议不一致导致对接问题。接下来,我们将介绍几种相对专业的加密知识,基于作者学生时代对密码学基础的学习。
首先展示第一种简单的应用方式。
所谓“对称加密”,参考抗日题材影视作品中摩斯电码的解密过程,解密者需要一本密码本才能解读信息。无论传输内容多么复杂,规则制定者始终掌握着密码本的建立权。这即是密码学中基础且应用最广、可变性极强的“对称加密”。例如,若明文为“3, 4, 5”,密钥规定为“+2”,则实际传输的密文为“1, 2, 3”。接收方知晓密钥后,即可还原出原始明文“3, 4, 5”。
以下是升级版本的加密方案。
1. 替代密码
密钥字符仅支持单个字符,其ASCII码值范围限定在[32, 126](即可见且可输入的字符)。加密运算利用密钥字符的ASCII码值进行,生成的每个密文字符的ASCII码值也保持在[32, 126]区间内;解密运算同样利用密钥字符的ASCII码值,产生的每个明文字符ASCII码值亦在[32, 126]区间内。
#include<iostream>
using namespace std;
void jiami();
void jiemi();
char a[100];
char b[100];
char k;
void jiami()
{
int i=0;
cout<<"明文: ";
cin>>a;
cout<<"请输入密钥:";
cin>>k;
while(a[i]!='\0')
{
b[i]=(char)((a[i]+k)>126?(a[i]+k)%126+31:(a[i]+k));
i++;
}
i=0;
cout<<"密文为:";
while(b[i]!='\0')
{
cout<<b[i];
i++;
}
cout<<endl;
}
void jiemi()
{
int i=0;
cout<<"请输入密文: ";
cin>>a;
cout<<"请输入密钥: ";
cin>>k;
while(a[i]!='\0')
{
b[i]=(char)((a[i]-k)<32?126-abs((31-(a[i]-k))):(a[i]-k));
i++;
}
i=0;
cout<<"明文为:";
while(b[i]!='\0')
{
cout<<b[i];
i++;
}
cout<<endl;
}
void main()
{
int choose;
while(true)
{
cout<<"请选择需要进行的操作种类:"<<endl;
cout<<"1:加密 2:解密 3:退出 "<<endl;
cin>>choose;
if(choose==1)
{
jiami();
}
else if(choose==2)
{
jiemi();
}
else if(choose==3)
{
break;
}
else
{
cout<<"您输入的序号不正确,请重新输入"<<endl;
}
cout<<endl;
}
}2. 置换密码
1)算法描述:加密置换矩阵与逆置换矩阵不同。
#include<iostream>
using namespace std;
int jiamibox[6]={3,4,5,2,6,1}; //加密置换矩阵
int jiemibox[6]={6,4,1,2,3,5}; //逆置换矩阵
char in[5000]; //定义明文字符串变量
char out[5000]; //定义密文字符串变量
char ch;
void jiami(); // 加密函数
void jiemi(); //解密函数
void jiami()
{
cout<<"输入要加密的明文:";
cin>>in;
for(int i=0;i<strlen(in)/6;i++)
{
for(int j=0;j<6;j++)
{
out[i*6+j]=in[i*6+(jiamibox[j]-1)];
}
}
char Out[5000];
for(int j=0;j<6;j++)
{
for(int i=0;i<strlen(in)/6;i++)
{
Out[i*6+j]=out[i*6+(jiamibox[j]-1)];
}
}
cout<<"加密后的密文为:";
for(int i=0;i<5000;i++)
{
if(in[i]!='\0')
cout<<Out[i];
else
break;
}
cout<<endl;
}
void jiemi()
{
cout<<"输入要解密的密文:";
cin>>in;
for(int i=0;i<strlen(in)/6;i++)
{
for(int j=0;j<6;j++)
{
out[i*6+j]=in[i*6+(jiemibox[j]-1)];
}
}
char Out[5000];
for(int j=0;j<6;j++)
{
for(int i=0;i<strlen(in)/6;i++)
{
Out[i*6+j]=out[i*6+(jiemibox[j]-1)];
}
}
cout<<"解密后的明文为:";
for(int i=0;i<5000;i++)
{
if(in[i]!='\0')
cout<<Out[i];
else
break;
}
cout<<endl;
}
void main()
{
int choose;
while(true)
{
cout<<"1:加密 2:解密3:退出(输入字符数必须是6的正整数倍)"<<endl;
cout<<"请选择需要进行的操作种类: ";
cin>>choose;
cout<<endl;
if(choose==1)
jiami();
elseif(choose==2)
jiemi();
elseif(choose==3)
break;
else
cout<<"您输入的序号不正确,请重新输入";
cout<<endl;
}
}后两种方案仅供提升参考,若使用C++编写,也可转换为JavaScript。推荐前端开发人员优先使用前两种方案。
到此,关于传参安全处理中window.btoa Base64加密及线性对称加密的文章介绍完毕。如需了解更多window.btoa Base64加密相关内容,请搜索本站历史文章或继续浏览下方相关文章,希望大家以后多多支持本站!
JS 鼠标滚轮事件频繁触发导致卡顿怎么优化?
2026-11-05 17:08:07
优化JS回到顶部性能:防抖节流与requestAnimationFrame应用
2026-11-05 16:33:51
JS中Array、Set与Map的区别及应用场景选择
2026-11-05 16:03:02
PixiJS 常见报错排查:纹理跨域、黑屏与内存泄漏解决
2026-11-05 10:05:21
JS数组find与filter取值区别及性能对比
2026-11-05 08:39:21








