释放双眼，带上耳机，听听看~！
Javascript网络编程常用的两种方式
短连接xmlhttprequest
长连接websocket
都需要考虑安全性
以下总结两个项目中所使用的相关技术
传输类型
xmlhttprequest
xmlhttprequest.responseType
"text"（默认）
"json"（对象）
"arraybuffer"（二进制字节流）
服务端选择UTF-8编码返回JSON字符串
因此在不加密的情况下
可以设置responseType = "json"直接解析得到对象
websocket
websocket可以接收文本、ArrayBuffer、Blob类型的对象
取决于服务端推送的真实数据类型
2
3
4
5
6
2 if(msg.data instanceof ArrayBuffer) // ...
3 if(msg.data instanceof Blob) // ...
4 if(typeof msg.data == 'string') // ...
5}
6
websocket可以在向服务端传输数据时选择文本或字节流
文本十分简单就不提了
字节流传输可以自行编辑头部结构等等
注意若传输中文，需要先做encodeURI
2
3
4
5
6
2for (var i = 0; i < content.length; i++) {
3 uintArray[i] = content.charCodeAt(i);
4}
5this._ws.send(uintArray.buffer);
6
加密解密
服务端客户端共用RC4算法对接口的返回结果做加密、解密
RC4算法加密、解密共用一套代码，首次执行加密，再次执行解密（异或）
服务端用密钥操作明文得到密文
客户端用密钥操作密文得到明文
需要注意的是，网上可以找到多种RC4算法的实现
包括各种语言的版本，实现细节往往不同
而服务端客户端往往使用不同语言
务必保证两端的RC4算法实现完全一致（可能需要自己手写）
随便抄两个版本的话往往对不上（比如网上搜到的PHP版本与JS版本就对不上）
PHP实现如下
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2 * 相对应的 PHP 版本 RC4
3 * rc4加密
4 * @param string $data 数据
5 * @param string $password 密码
6 * @param bool $outBase64 是否返回base64
7 * @return string
8 */
9public function rc4Encrypt($data, $password, $outBase64 = FALSE) {
10 $cipher = '';
11 $key[] = '';
12 $box[] = '';
13 $lengthData = strlen($data);
14 $lengthPass = strlen($password);
15 for ($i = 0; $i < 256; $i++) {
16 $key[$i] = ord($password[$i % $lengthPass]);
17 $box[$i] = $i;
18 }
19 for ($j = $i = 0; $i < 256; $i++) {
20 $j = ($j + $box[$i] + $key[$i]) % 256;
21 $tmp = $box[$i];
22 $box[$i] = $box[$j];
23 $box[$j] = $tmp;
24 }
25 for ($a = $j = $i = 0; $i < $lengthData; $i++) {
26 $a = ($a + 1) % 256;
27 $j = ($j + $box[$a]) % 256;
28 $tmp = $box[$a];
29 $box[$a] = $box[$j];
30 $box[$j] = $tmp;
31 $k = $box[(($box[$a] + $box[$j]) % 256)];
32 $cipher .= chr(ord($data[$i]) ^ $k);
33 }
34 return $outBase64 ? base64_encode($cipher) : $cipher;
35}
36
编码问题
RC4编码往往会产生乱码
异或操作二进制文本的结果是随机的字节流
JS中默认使用UTF-16编码
而我们的服务端使用UTF-8编码
xmlhttprequest.responseType == 'text' 时
收到的密文貌似是被截断的（字节流自动转为文本时，由于编码不一致而截断）
因此需要已字节流的方式接收密文
xmlhttprequest.responseType = 'arraybuffer'
2
3
4
5
6
7
8
9
10
11
12
13
14
2arrayBuffer = xhr.response
3// 对应UTF-8的字节流数组
4byteArray = new Uint8Array(arrayBuffer)
5// 拼装密文
6encodedString = String.fromCharCode.apply(null, byteArray)
7// RC4解码得到明文(会有中文字符乱码问题)
8decodedString = rc4Encrypt(encodedString , 'secret')
9// 处理中文乱码
10escapedString = escape(decodedString)
11finalString = decodeURIComponent(escapedString)
12// 解析得到JSON对象
13json = JSON.parse(finalString)
14
如果一定要用文本的方式传输数据的话
可能需要服务端在加密后做一遍encodeURI避免乱码
客户端收到密文后先做一遍decodeURI
签名校验
服务端客户端共用一个密钥做md5签名运算
客户端发起请求时在header中加入参数的md5签名
服务端时候请求时，对参数做签名并与header中传入的签名做比较
以此排除非法请求
Javascript中设置header需要处理一些跨域问题
2
3
4
5
6
7
8
9
2xhr.open("GET", url, true);
3xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
4xhr.setRequestHeader('sign',strSign);
5xhr.send();
6// 跨域问题服务端
7// Access-Control-Allow-Headers: *
8// Access-Control-Allow-Origin: *
9
JS版本的MD5算法如下
2
3
4
5
2//# sourceMappingURL=md5.min.js.map
3//https://github.com/blueimp/JavaScript-MD5
4// eg. md5('abc')
5
数据压缩
数据压缩可以一定程度上减小传输压力
加快传输速度
只需要服务端、客户端共同开启压缩和解压即可
常用的有gzip压缩，gzip对于中文也是支持的不会产生乱码
2
3
4
5
6
7
8
9
10
11
12
13
2 if (SOCKET.bGzip) {
3 var encodedString = String.fromCharCode.apply(null, uintArray),
4 decodedString = pako.inflate(encodedString, {to: "string"});
5 return decodedString;
6 }
7 else{
8 var encodedString = String.fromCharCode.apply(null, uintArray),
9 decodedString = decodeURIComponent(escape(encodedString));
10 return decodedString;
11 }
12}
13
下载地址
https://github.com/nodeca/pako/blob/master/dist/pako.min.js
参考文献
https://stackoverflow.com/questions/17191945/conversion-between-utf-8-arraybuffer-and-string
