HTTP的系统登录页面,如何避免明文传输用户密码?

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 该文讨论了登录页面中密码安全传输的问题。当使用HTTP时,密码以明文形式传输,存在风险。在示例中,前端使用JavaScript的CryptoJS库和当前时间戳作为动态加密key对密码进行DES加密。后端接收到密文后,利用相同的时间戳解密。为了增强安全性,文章还建议使用RSA等非对称加密算法。

对于系统登录页面来说,我们作为开发人员,应该没有陌生的吧。就像下面这样子。

 

点击登录,调用/login 接口。来看下面截图中的 载荷(payload)数据,其中,密码 password 的值是明文。

 

 

如果你的站点使用的是HTTPS协议,配置了有效的SSL证书,那将很好。HTTPS通过SSL/TLS协议建立安全的加密通信通道,确保传输过程中的数据被加密。这样,用户在登录页面输入的密码将在传输过程中得到保护。

如果你的站点使用的是普通的HTTP协议,安全层面,就要考虑了。因为,HTTP会使用明文的形式将这个用户密码提交到服务端接口。

 

因此,前后端需要改造一下,使用密文来传输用户密码。

AI告诉我们:如果需要在客户端对密码进行加密,可以使用JavaScript等技术对密码进行加密处理,然后再将加密后的密码传输给服务器。这样即使在传输过程中,密码也是以加密形式传输的。但是要注意,客户端加密需要谨慎设计和实施,确保密码的加密过程安全可靠。

 

就像下面这样子。

 

如何实现?

我们的系统是基于ruoyi框架搭建的。

前端jquery引入CryptoJS库,利用DES加密算法对密码进行加密。

问题来了,加密key怎么办?

一种方案,是前端调用服务端接口获取动态加密key。这是常规的办法。

现在,我们使用另一种方案,不需要调用后端接口获取key的办法。

前端如何生成动态key,而且还能让后端接口能解密?

答案是:基于时间。再细节一些,基于当前时间戳。

你一定会存疑:用户浏览器和服务器时间不一定总是一致呀!

是的。因此,先省略一些文字,直接贴代码给你看吧。

function login() {
    var username = $.common.trim($("input[name='username']").val());
    var password = $.common.trim($("input[name='password']").val());
    var validateCode = $("input[name='validateCode']").val();
    var rememberMe = $("input[name='rememberme']").is(':checked');
    var key = Math.floor(jQuery.now() / 30000).toString();
    $.ajax({
        type: "post",
        url: ctx + "login",
        data: {
            "username": username,
            "password": encryptByDES(password, key),
            "validateCode" : validateCode,
            "rememberMe": rememberMe
        },
        success: function(r) {
            if (r.code == 0) {
                location.href = ctx + 'index';
            } else {
                ...
            }
        }
    });
}

function encryptByDES(message,key) {
    var keyHex = CryptoJS.enc.Utf8.parse(key);
    console.log("keyHex:"+keyHex)
    var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

重点是第6行。明白后,我们再看后端程序对密文的处理。

    // *password 是前端传过来的密文
    long floor = (long) Math.floor(System.currentTimeMillis() / 30000);
    String passwordText = null; // *明文
    try {
        passwordText = DESUtils.decrypt(password, String.valueOf(floor));
    } catch (Exception e) {
        log.error("密码解密异常1:", e);
        try {
            passwordText = DESUtils.decrypt(password, String.valueOf(floor-1));
        } catch (Exception ex) {
            log.error("密码解密异常2:", e);
            return error("非法请求");
        }
    }

看完代码,你是否GET到其中对密码的加密策略?

OK,让我来解锁一下这个技术策略。在双因子登录的技术里,有一种基于时间生成动态码的开源算法TOTP。这个算法会考虑预留给用户足够的操作时间。它生成时间的算法是 T = floor(currentTimestamp / step)。其中,currentTimestamp 为当前的时间戳,单位为秒,step 为步长,用户登录一般为 30s ,floor 为向下取整。通过这样计算出来的 T 值,在一定时长内会保持一致(比如 00:00 ~ 00:29 为 1,00:30 ~ 00:59 为 2),每 30 秒便会自增。

上面加密策略里,也是借鉴了上面TOTP算法的思想,前后端基于一个短时间内不变的时间T值,作为加密因子,通过DES算法对用户密码进行加解密,巧妙地避免了用户密码在网络上的明文传输。


关于用户登录密码的安全,上面用的是DES这种简单的加密算法。其实,如果想更安全,可以使用非对称加密算法,如RSA。下图短视频里的WEB浏览器网络请求,展示了用户在每次提交登录时,前端调用服务端接口获取RSA公钥,然后对用户密码加密传输,服务端依据自己存储的RSA私钥解密得到实际的用户密码。

 

目录
相关文章
|
2天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
17天前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
3月前
|
存储 算法 数据安全/隐私保护
基于 HTTP Header 传输签名参数
基于 HTTP Header 传输签名参数
73 13
|
3月前
|
iOS开发 MacOS Python
【Mac 系统】解决已有清华镜像但出现CondaHTTPError: HTTP 000 CONNECTION FAILED for url
在尝试使用清华镜像创建conda环境时遇到下载超时问题,通过删除原有镜像并添加针对Mac OS的清华镜像解决了该问题。
111 3
|
4月前
|
网络协议 Python
Python实现HTTP 传输的断点续传机制
使用Python `requests`库实现HTTP断点续传下载大文件,通过设置`Range`头部从上次中断的位置开始继续下载。示例代码展示了一个名为`resume_download`的函数,它接收URL、文件名和最后字节位置参数,以追加方式打开文件并逐块写入内容。要启用HTTP长连接,可添加`Connection: keep-alive`到请求头。
138 0
|
5月前
|
缓存 网络协议 应用服务中间件
深入理解 web 协议(一)- http 包体传输
深入理解 web 协议(一)- http 包体传输
|
5月前
|
缓存 安全 网络协议
|
5月前
|
开发框架 前端开发 应用服务中间件
基于RFC6265 (HTTP状态管理协议)实现简单的登录系统
基于RFC6265 (HTTP状态管理协议)实现简单的登录系统
60 0
|
Web App开发 前端开发 Apache
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Traceback (mos...
1068 0
|
Web App开发 前端开发 Android开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
使用MAT分析内存泄露 对于大型服务端应用程序来说,有些内存泄露问题很难在测试阶段发现,此时就需要分析JVM Heap Dump文件来找出问题。
779 0