针对前端js加密解密方法的兼容问题（兼容ie5以上哦）

梦不觉=_=

已于 2022-02-28 17:52:11 修改

阅读量2.4k

点赞数 10

文章标签：前端 javascript

于 2021-12-31 18:02:44 首次发布

本文链接：https://blog.csdn.net/JiaoKunGe/article/details/122257560

版权

最近接了一个项目，是搭建一个jsSDK，提供第三方的接口供开发人员调用获取数据，为了让开发人员搞不清楚，我方接口到底是怎么实现的，防止代码偷盗，其中必不可少的就需要用到通信加密，且加密方法无限套娃，加深破解难度。本已实现，但是客户爸爸突然要求要兼容ie8，我滴个乖乖，这年代了还有人用ie而且还是ie8，我这暴脾气当时就炸了，要兼容ie8你早说啊，奈何用户只针对银行部门，我算是知道问什么银行处理业务总是这么慢了🤣，无奈下叫产品部门提出价钱！！！

为了不让你白跑一趟，我提供免费的前端js加密大礼包.zip下载地址

特别提示
ie9以下发起ajax请求时有2个需要注意的地方：
1、使用原生js自定义ajax时需要做（类似如下）兼容处理

//这里只是简单处理了ie浏览器
if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else if (window.ActiveObject) { //兼容IE
		xhr = new ActiveXobject('Microsoft.XMLHTTP');
	}

或者你也可以使用jquery，通过cors处理

2、处理兼容后，你会发现ie10以上可以请求，但ie9以下就会报错 “拒绝访问” 或 “访问无权限”，这是由于ie浏览器本身安全级别过高导致的跨域问题，并不是前端代码错误。
在这里插入图片描述
这时你可以打开ie浏览器的设置，选择 “internet选项”将通过域访问数据源启用

上述方法只能调试时使用，因为你不能要求每个客户自己去设置吧，至于这种情况，你可以使用jQuer的$.ajax并在使用前设置：

jQuery.support.cors = true;
        jQuery.ajaxSetup({
            xhr: function() {
                if(window.ActiveXObject){
                    return new window.ActiveXObject("Microsoft.XMLHTTP");
                }else{
                    return new window.XMLHttpRequest();
                }
            }
        });

或者干脆叫后端在本地做一个反向代理。

话归正题

一、md5加密
md加密是不可逆的，且与大部分加密方法一样，只能加密字符串。
对于md5而言，cdn模式兼容上无太大的问题，主要在于webpack打包嵌入sdk时需要引入到jsSDK中，此时需要注意的问题来了。
对于webpack，它提供了babel-loader插件，可以处理ES6语法转ES5，这时可行的，具体配置这里就不多说了，网上随处可见，需要提醒的是babel-loader与webpack的版本对应关系，webpack目前的版本在5.0以上了，我推荐使用1.0左右的老版本，因为最新版的webpack好像把babel-loader干掉了。。。
并且js中导出导入是我推荐使用module.exports = md5 与 **var md5 = require(’…/utils/md5.js’)**方式用于兼容更低版本的ie浏览器。

var md5 = require('../utils/md5.js')
var sign = md5('这是我要加密的内容')

二、AES
AES与md5改动与注意的地方基本一样，主要区别在于AES是可逆的：

var AES256 = require('../utils/aes256.js')

//手动设置密钥
var key = 'qwerdf'
//明文
var plainText = '需要加密的字符'

var str1 = AES256.encrypt(plainText, key);
console.log("aes加密:" + str1)
var str2 = AES256.decrypt(str1, key);
console.log("aes解密:" + str2)

三、Base64
严格来说Base64只是一种编码方式，谁都可以解；js是有原生的base64加解密方法的

var str = window.btoa('qwerdf')
var str2 = window.atob(str)

但是在i9以下是没有这两个方法的，于是网上就有一个第三方插件base64-polyfill.js专门处理这种情况，但它只支持cdn即script标签引入，并不支持js中require内嵌模式，于是我做了简单的魔改=-=。

var Base64 = require('../utils/base64-polyfill.js')

var stringToEncode = 'qwert'
var encodedData = Base64.encode(stringToEncode)
console.log(encodedData, 111)
var decodedData = Base64.decode(encodedData)
console.log(decodedData, 222)

上面的插件一般情况不会有什么问题，但在ie浏览器下，当后端多次Base64加密后（例如先base64加密再aes加密再base64加密），前端多次解密的过程中有可能会出现中文乱码，针对该类加解密乱码，我在包中提供了base64-best.js用于解决该类情况，用法有所不同，需new一个Base64对象：

var Base64 = require('../utils/base64-best.js')
Base64 = new Base64()
var stringToEncode = 'qwert'
var encodedData = Base64.encode(stringToEncode)
console.log(encodedData, 111)
var decodedData = Base64.decode(encodedData)
console.log(decodedData, 222)

四、RSA
相对与前三种方法，RSA是可逆的、更安全且能处理更长字符串加密的方法，通常用于json字符串加密。
RSA加密解密是用一对密钥处理的（公钥、私钥），密钥可通过它自生方法生成。值的一提的是，我提供的前端RSA加密方法有别于JSEncrypt官网提供的方法，因为传统的JSEncrypt是不兼容ie8、ie10、ie11的（奇葩的是ie9可以用！！），他会将加密和解密的内容返回为false而不是字符串。想了解具体处理方法的可下载源码

var JSEncrypt = require('../utils/jdJsencrypt.js')
var encryptor = new JSEncrypt.JSEncrypt() // 创建加密对象实例
//公钥
var publicKey = encryptor.getPublicKey();
//私钥
var privateKey = encryptor.getPrivateKey();
//明文
var plainText = "加密测试内容";
//密文
	
//加密
encryptor.setPublicKey(publicKey); //设置公钥 
var str = encryptor.encrypt(plainText)
console.log('rsa加密:' + str)
//解密
encryptor.setPrivateKey(privateKey) //设置秘钥 
var str2 = encryptor.decrypt(str)
console.log('rsa解密:' + str2)