接口鉴权扩展-加密与解密的实践-前端加密方式

「爱情、让人受尽委屈。」 2022-11-30 15:42 170阅读 0赞

### 文章目录 ###

*   *  目标
     *  前端加密
     *   *  从新浪微博登陆-看前端加密方式
         *  代码实践
         *  一些问题和解决方法

分两篇：

1.  第一篇：了解加密加密的基本概念
2.  第二篇：实践前后台的加密解密流程

## 目标 ##

*  了解不同加密解密的实践
    
    参考:[支付宝-签名][-]
    
    [数字签名是什么？][Link 1]
    
    [微博登陆加密js][js]

分几种场景来介绍前后端加密解密的方式

## 前端加密 ##

### 从新浪微博登陆-看前端加密方式 ###

参考:[【JS逆向练习】新浪微博登录加密参数分析][JS]

[深入分析微博密码加密and百万级数据采集分享（登录篇）][and]

新浪微博的登陆，分析登陆接口，会发现你输入的账号和密码参数是找不到的，取而代之的是su和sp参数，su是加密后的账号，sp参数是加密后的密码。su参数是通过Base64处理的，sp是通过servicetime（时间戳），nonce（一次性参数），rsaPubkey（RSA公钥） 处理加密而成。分析的具体流程看上面参考链接即可。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center]

从上面可以得知，密码的加密是通过RSA非对称加密，RSA公钥加密得到。提取RSA加密的js：

[微博登陆加密js][js]

RSA公钥加密，只能保证数据被其他人获取，但是不能保证篡改。在第一篇提到，前端加密的意义，一部分是保证用户输入的真实数据，不会被中间人获取。中间人即使获得sp，依然无法得知真正的密码是什么，防止信息泄露，防止撞库。

加密流程js：

这里会用到 crypto-js 来进行base64 的转换，当然可以使用其他js代替。

参考：https://github.com/gengzi/codecopy/tree/master/src/main/resources/js/securityInterface

encrypt.js

用户名：

function getusername(username) { 
        var str = CryptoJS.enc.Utf8.parse(username);
        return CryptoJS.enc.Base64.stringify(str);
    }

密码：

function getpassword(pwd, servicetime, nonce, rsaPubkey) { 
        var RSAKey = new sinaSSOEncoder.RSAKey();
        RSAKey.setPublic(rsaPubkey, '10001');
        var password = RSAKey.encrypt([servicetime, nonce].join('\t') + '\n' + pwd);
        return password;
    }

### 代码实践 ###

思路：通过java调用js的方式来实践，对于前端参数的加密，后端解密数据

（1）编写加密js，使用java调用js加密处理,调用后端接口。

（2）后端接口接收参数，解密处理，拿出原始数据。

环境：java8

代码参考：https://github.com/gengzi/codecopy/tree/master/src/main/resources/js/

crypto-js.js 、base.js 、encrypt.js 、paramCrypot.js

java代码：[fun.gengzi.codecopy.business.authentication][] 下的代码

第一步：

/** * java 调用js 进行加密 */
        @Override
        public void paramEncryptionToJs() { 
            ScriptEngineManager scriptEngineManager = new ScriptEngineManager();
            ScriptEngine nashorn = scriptEngineManager.getEngineByName("nashorn");
            try { 
                String basePath = ClassLoader.getSystemClassLoader().getResource("js/base.js").getPath();
                String jsencryptPath = ClassLoader.getSystemClassLoader().getResource("js/jsencrypt/jsencrypt.js").getPath();
                String cryptoPath = ClassLoader.getSystemClassLoader().getResource("js/crypto-js-4.0.0/crypto-js.js").getPath();
                String encryptPath = ClassLoader.getSystemClassLoader().getResource("js/securityInterface/encrypt.js").getPath();
                String paramCrypotPath = ClassLoader.getSystemClassLoader().getResource("js/securityInterface/paramCrypot.js").getPath();
                nashorn.eval(Files.newBufferedReader(Paths.get(basePath.substring(1))));
                nashorn.eval(Files.newBufferedReader(Paths.get(cryptoPath.substring(1))));
                nashorn.eval(Files.newBufferedReader(Paths.get(jsencryptPath.substring(1))));
                nashorn.eval(Files.newBufferedReader(Paths.get(encryptPath.substring(1))));
                nashorn.eval(Files.newBufferedReader(Paths.get(paramCrypotPath.substring(1))));
                Invocable in = (Invocable) nashorn;
                String username = "16636663456";
                String password = "gengzi666";
                Object o = in.invokeFunction("requestParamCrypotByJsencrypt", username, password);
                logger.info("加密后的参数数据 ： {} ", o);
                // 发送请求
                if (StringUtils.isNoneBlank(o.toString())) { 
                    // 发送请求
                    String body = HttpRequest.post(SecurityInterfaceConstans.PARAMENCRYPTIONURL)
                            .body(o.toString()).execute().body();
     
                }
            } catch (ScriptException | IOException | NoSuchMethodException e) { 
                e.printStackTrace();
            }
        }

第二步：

/** * 其实前端对参数的加密，来保证安全，就好像是一个纸老虎。但是依然能提高接口的安全程度。 * <p> * 敏感数据加密后，攻击者无法仅通过网络抓包来详细了解敏感数据的内容。 * 为了让这个纸老虎更加逼真，对前端js 混淆，添加一些无效参数，记录用户行为，将这些组合在一起，提升攻击者的难度。 * 可能攻击者分析分析着，就放弃了。 * <p> * 该接口演示，使用微博登陆的加密js，对用户名和密码进行加密处理，并提交至后台。 * * @return */
        @ApiOperation(value = "前端-后端：提交参数的加密与解密", notes = "前端-后端：提交参数的加密与解密" +
                "演示后台解密")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "ParamEncryptionEntity", value = "ParamEncryptionEntity", required = true)})
        @ApiResponses({ @ApiResponse(code = 200, message = "\t{\n" +
                "\t \"status\": 200,\n" +
                "\t \"info\": {\n" +
                "\t }\n" +
                "\t \"message\": \"success\",\n" +
                "\t}\n")})
        @PostMapping("/paramEncryption")
        @ResponseBody
        public ReturnData paramEncryption(@RequestBody ParamEncryptionEntity paramEncryptionEntity) { 
            // 编写加密js 的function 方法
            // java 调用这些js 方法，执行加密操作，发送ajax 请求
            // 前端js混淆，引入额外参数，替换页面的原属性值
            // 后台接受 ajax 请求，获取参数，将参数解密处理，执行具体业务
            logger.info("paramEncryptionEntity : {}", paramEncryptionEntity.toString());
     
            String nonce = paramEncryptionEntity.getNonce();
            String su = Base64.decodeStr(paramEncryptionEntity.getSu());
            logger.info("su : {}", su);
     
            // 跟 nonce 获取 publickey 省略
            Optional<String> sp = RSAUtils.decryptByPublic(paramEncryptionEntity.getSp(), secretkey);
            logger.info("sp : {}", sp.orElse(""));
            // 比对参数
            String signStr = sp.orElse("");
            String password = null;
            if (signStr.contains(paramEncryptionEntity.getServiceTime() + "\t" + paramEncryptionEntity.getNonce() + "\n")) { 
                String[] split = signStr.split("\n");
                password = split[split.length - 1];
            }
     
            //TODO 与数据库比对账号密码，一致登陆成功
            logger.info("username :{} and password : {}", su, password);
     
     
            ReturnData ret = ReturnData.newInstance();
            ret.setSuccess();
            return ret;
        }

### 一些问题和解决方法 ###

java调用js可能会提示：navigator is not defined 或者 window is not defined

参考：[如果运行的环境不支持Windows和导航器，则不能使用这两个对象。][Windows]

原因：java调用js，有些参数是浏览器支持的，所以会出现有些参数没有被定义

解决方法：在调用js前，先定义这些参数，并在加载在最前面。

var navigator = { appName: 'Netscape', userAgent: '', };
    var window = {};

调用：

window.JSEncrypt = JSEncrypt;
     
    window. // 需要这样调用
    /** * RSA 解密，使用密钥解密 * @param str 需要解密的内容 * @param key 密钥 * @returns {WordArray|PromiseLike<ArrayBuffer>|null|*|undefined} */
    function decryptRSAByPrivateKey(str, key) { 
        Encrypt = new window.JSEncrypt();
        Encrypt.setPrivateKey(key);
        return Encrypt.decrypt(str);
    }

问题2： 使用java调用js 应该不能发送http请求（ajax）

因为ajax 使用的是浏览器的一些对象元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center 1]

[-]: https://opendocs.alipay.com/open/291/sign
[Link 1]: http://www.ruanyifeng.com/blog/2011/08/what_is_a_digital_signature.html
[js]: https://github.com/JetLei/MblogLoginDemo/blob/323a93c7bbe9406946040f99f5e11c77b82cdd7b/encrypt.js
[JS]: https://www.y4f.net/69513.html
[and]: https://www.cnblogs.com/IronManPlus/p/12010202.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/402f83d753fe48b8a8092d91b36aa251.png
[fun.gengzi.codecopy.business.authentication]: https://github.com/gengzi/codecopy/tree/master/src/main/java/fun/gengzi/codecopy/business/authentication
[Windows]: https://github.com/travist/jsencrypt/issues/123
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ea59658adc8f4b0581ab5039eba593ca.png