Cocos Creator H5游戏如何实现Http的加密

cocos creator h5开发中采用的XMLHttpRequest,实现了网络协议的数据传输，但是数据的传输是可以在web页面上可以完全看到。对于很多开发者来说，并不想让其他人看到这些内容，容易引发对服务器的恶意攻击。

1. 技术栈

    cocos creator 

    AES加密

    XMLHttpRequest

    typeScript

2.  介绍XMLHttpRequest

            // 创建对象
            let xhr = new XMLHttpRequest();

            // 设置超时时间
            xhr.timeout = 3000;

            // 设置返回数据类型为二进制
            xhr.responseType = "arraybuffer";

            // 超时处理
            xhr.ontimeout = () => {
                
            };
            
            // 报错处理
            xhr.onerror =  () => {
               
            };

            // 请求中端时调用
            xhr.onabort =  () => {
                Log.error("request onabort");
                onDone(false, null);
            };
            xhr.onreadystatechange =  () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var json = JSON.parse(xhr.response);
                    
                    // 数据传输后的成功回调函数
                    onDone(true, json);
                }
            };
           
            // requestUrl 请求的路由地址url
            xhr.open("POST", requestUrl, true);

            // 设置xhr的请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            // send 将数据传出
            xhr.send(encodedStr);

     3. AES加密

var CryptoJS = require('crypto-js');

// 客户端与服务端协定字段key
var key = "123456";

// 加密的偏移量
//var iv = "123456";

// 以上两个字段均自定义value

var Cryptojs = function () { };

// 加密 （此处客户端将数据加密处理传至服务器二进制字段）

Cryptojs.encrypt = function (text) {
    var encryptedData = CryptoJS.AES.encrypt(text, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(key),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    })
    // base64 格式
    var encryptedBase64Str = encryptedData.toString();
    // base64 转二进制格式
    return base64toBlob(encryptedBase64Str);

    // return encryptedData.ciphertext.toString(); //密文
}



// 客户端将处理密文解密， 服务器传回的是二进制数据所以在此我将二进制转为64进制数据

Cryptojs.decryptWeb = function (bytes) {

    var base64 = blobToBase64(bytes);

    var result = CryptoJS.AES.decrypt(base64, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(key),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });

    return  result.toString(CryptoJS.enc.Utf8);
}

// 64转2进制
function base64toBlob(base64) {
    // 将base64转为Unicode规则编码
    var bString = atob(base64);
    var len = bString.length;
    var arr = new Uint8Array(len);
    while (len--) {
        arr[len] = bString.charCodeAt(len);
    }
    return arr;
}

// 2转64进制
function blobToBase64(bytes) {
    var bString = "";
    for (var i = 0, len = bytes.length; i < len; ++i) {
        bString += String.fromCharCode(bytes[i]);
    }
    return btoa(bString);
}

4. 两个文件结合

处理加密：在xhr.send函数前将传出的数据进行客户端加密，在将数据传输。

处理解密：在服务器成功返回时解密xhr.response, 将解密数据传入回调函数。

（注意：服务器返回的数据为二进制，所以要设置xhr的返回数据类型，否则会出现乱码，解密失败。 xhr.responseType = "arraybuffer"。解密是还需在设置数据格式转换。将arraybuffer格式处理为Uint8Array格式 new Uint8Array（xhr.response);

const decodeStr = decryptWebjs.(new Uint8Array(xhr.response));
）

效果：