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)); ）

效果：