前端登录密码加密传输
luquinn 2024-08-17 16:33:03 阅读 90
前端安全检查系统漏洞处理
前端安全检查系统漏洞处理
1.密码明文传输
项目登陆时,登录接口使用post请求,密码没有加密,明文传输
本次使用的RAS加密,首先前端会有一个公钥,后端会有一个私钥,公钥和私钥都是后端生成的,一般是在登录页面请求后端的公钥接口,以校园安全检查页面为例
前端需要安装依赖 npm install jsencrypt
utils/jsencrypt.js
<code>import JSEncrypt from 'jsencrypt/bin/jsencrypt.min';
// 加密
export function encrypt(txt, publicKey) {
// console.log(txt, publicKey);
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey); // 设置公钥
// console.log(encryptor.encrypt(txt));
return encryptor.encrypt(txt); // 对数据进行加密
}
// 解密
export function decrypt(txt, privateKey) {
const encryptor = new JSEncrypt();
encryptor.setPrivateKey(privateKey); // 设置私钥
return encryptor.decrypt(txt); // 对数据进行解密
}
login.vue
import { encrypt } from '@/utils/jsencrypt.js';
let data = {
password: this.param.password,
username: this.param.username,
captchaCode: this.param.captchaCode,
captchaId: this.param.captchaId,
rsaToken: this.param.rsaToken,
checked: this.param.checked
};
data.password = encrypt(this.param.password, this.rsaKey);
api.login(data)
.then(//自己登录代码实现)
这样就完成了对于密码的加密
2. 存在暴力破解
因为系统登录页面没有添加验证码,所以解决方法是添加后端生成的图形验证码
3. 垂直越权
由于页面没有做对于页面的权限处理,导致可以通过页面输入地址强行进入,校园安全检查是通过路由守卫配合菜单数据来进行权限的处理,在跳转页面时判断如果这次跳转的地址不在菜单列表与白名单中,表示没有权限,以这种方法完成权限的处理
const whiteIntercept=[
//homePage ,
//404'
//login',
//checkDetails',
...]
function checkPath(data, path){for(const item of data){if(item.url === path||'/'+ item.url === path){
return true;}
if(item.children){if(checkPath(item.children, path)){return true;}}}
return false;}
router.beforeEach(async(to,from,next)=>{
if(Token){
if(authorityJudgment(to.path)){
if(!user){
store.dispatch("user/getUserInfo')}else {
if(to.path==='/login'){next('/')}else {
next()}}
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。