JavaScript-前端加密（广义），防止js篡改

好久没有写博客了，不是没有在学习新东西，是最近比较忙，没有总结。
今天聊的话题是防止js篡改。javascript代码和需要编译的代码有一点不同是，网页上会直接请求js文件源码，而编译的语言运行时使用的是编译后的文件。即使这样，很多编译语言（比如java）都会做源码混淆（obfuscation），前端这样的纯文本应用，更需要做点什么保护我们的逻辑代码不被篡改和窥探。
防止js篡改的原理也很简单，就是增加破解的代价。一下源码可以在我的github查看。

注意：我这里说的前端加密，是对浏览器端的js文件加密，不是传输过程中的加密，不涉及hash摘要等

1. 降低可读性

1.1 压缩（compression）

很好理解，就是去掉注释、多于的空格、简化标识符等等。工具很多，YUI Compressor、UglifyJS、Google Closure Compiler等等。

1.2 混淆（obfuscation）

保证不破坏代码执行结果的情况下，让代码变得难以阅读。常用混淆规则：拆分字符串、拆分数组、增加废代码、，压缩其实也有一定混淆功能。本质就是改变输入代码字符串的抽象语法树（AST）的结构。其他工具：v8就是一个，还有mozilla的SpiderMonkey, 知名的esprima，还有uglify；商业混淆服务有：jscramble。

1.3 加密（encryption）

这里的加密指文本可逆编码，是狭义的加密，也就是我们常说的加密啦。这个部分依然是借助一些工具，如： Packer 、bcrypt等等。

2. 代码不放置在JS文件中

将代码放在非js文件中，增加定位难度。这里常用的方式有两种：放置到png中，通过HTML Canvas 2D Context获取二进制数据的特性，可以用图片来存储脚本资源；放置到css文件中，利用content样式可以存放字符串的特性，同样可以。

2.1 png

用png保存js代码，首先需要对png进行编码，然后使用的时候进行解码。借助canvas及base64和二进制编码。

编码

1、字符串转换成ascii码；
2、创建足够存储空间的canvas；
3、将字符填入到像素中（忽略alpha值）；
4、获取data url；
canvas.toDataURL(“image/png”);
5、存为png图片。

function encodeUTF8(str) {  
    return String(str).replace(  
        /[\u0080-\u07ff]/g,  
        function(c) {  
            let cc = c.charCodeAt(0);
            return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
        }
    ).replace(  
        /[\u0800-\uffff]/g,  
        function(c) {  
            let cc = c.charCodeAt(0);
            return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3f, 0x80 | cc & 0x3f);
        }
    );
}

function request(url, loaded) {  
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {  
        if (xmlhttp.readyState == 4)  
            if (xmlhttp.status == 200)  
                loaded(xmlhttp);
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

void function(){  
    let source = '../image/test.js';
    request(source, function(xmlhttp){
        let text = encodeUTF8(xmlhttp.responseText);
        let pixel = Math.ceil((text.length + 2) / 3); // 1一个像素存3个字节,  
        let size = Math.ceil(Math.sqrt(pixel));
        //console.log([text.length, pixel, size, size * size * 3]);
        let canvas = document.createElement('canvas');
        canvas.width = canvas.height = size;
        let context = canvas.getContext("2d"),  
            imageData = context.getImageData(0, 0, canvas.width, canvas.height),  
            pixels = imageData.data;
        for(let i = 0, j = 0, l = pixels.length; i < l; i++){  
            if (i % 4 == 3) { // alpha会影响png还原
                pixels[i] = 255;
                continue;
            }
            let code = text.charCodeAt(j++);
            if (isNaN(code)) break;
            pixels[i] = code;
        }
        context.putImageData(imageData, 0, 0);
        document.getElementById('base64').src = canvas.toDataURL("image/png");
    });
}();

编码后的图片：

解码

1、加载png；
2、将png原尺寸绘制到canvas中；
3、读取像素中的字符串；
4、生成相应协议的data url使用。

void function(){  
    let source = '../image/test.png';
    let img = document.createElement('img');
    img.onload = function(){  
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        let context = canvas.getContext("2d");
        context.drawImage(img, 0, 0);
        let imageData = context.getImageData(0, 0, canvas.width, canvas.height),  
            pixels = imageData.data;

        let script = document.createElement('script');
        let buffer = [];
        for (let i = 0, l = pixels.length; i < l; i++) {  
            if (i % 4 == 3) continue; // alpha会影响png还原  
            if (!pixels[i]) break;
            buffer.push(String.fromCharCode(pixels[i]));
        }
        script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
        document.body.appendChild(script);
        script.onload = function(){  
            console.log('script is loaded!');
        }
        img = null;
    }
    img.src = source;
}();

这里需要手动下载编码后的图片，我没有写自动下载的函数，这又是另一个可以深入探讨的问题了，所以不过多扩展。

2.2 css

使用content就简单多啦。

let div = document.getElementById('content');
let content = window.getComputedStyle(div, ':before').content;

只需要和上面代码一样，新建一个srcript标签，利用data协议，就可以执行content内保存的js代码啦。

3. 防止代码执行被截获

• 截获 eval() / new Function() 的示例代码

eval = function() {
  console.log('eval', JSON.stringify(arguments));
};

eval('console.log("Hello world!")');

Function = function() {
  console.log('Function', JSON.stringify(arguments));
  return function() {};
};

new Function('console.log("Hello world!")')();

但是可能不是全局使用：

(function(){}).constructor('console.log("Hello world!")')()

• 截获 constructor 的示例代码

Function.prototype.__defineGetter__('constructor', function () {
    return function () {
        console.log('constructor', JSON.stringify(arguments));
    };
});
(function() {}).constructor('console.log("Hello world!")');

目前能想到的是判断 eval 是否被重定向

示例，如果 eval 被重定向 z 变量不会被泄露

(function(x){
    var z = 'console.log("Hello world!")';
    eval('function x(){eval(z)}');
    x();
})(function() { /* ... */ });

其实，还应该阻止使用者打开控制台，进行debug。参考stackoverflow中的讨论，很好用。

本来还想在这篇博客里总结下js的执行方式，限于篇幅，下次再说吧。