前端登录密码加密传输_如何解决登录密码明文传输问题

前端安全检查系统漏洞处理

前端安全检查系统漏洞处理

1.密码明文传输

项目登陆时，登录接口使用post请求，密码没有加密，明文传输

本次使用的RAS加密，首先前端会有一个公钥，后端会有一个私钥，公钥和私钥都是后端生成的，一般是在登录页面请求后端的公钥接口，以校园安全检查页面为例

前端需要安装依赖 npm install jsencrypt

utils/jsencrypt.js

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()}}