像素化你的代码

提醒:本文最后更新于 3114 天前,文中所描述的信息可能已发生改变,请谨慎使用。

本文正式开始前,先跟大家玩一个小游戏:点击代码下方的「在新窗口运行以上代码」按钮,找找 md5 函数的定义在哪里。(使用阅读器的同学请猛击此处围观

<script>var Decode=function(b){var e=[],a=b.width,c=b.height,d=document.createElement("canvas");d.width=a;d.height=c;d=d.getContext("2d");d.drawImage(b,0,0);b=d.getImageData(0,0,a,c);for(d=0;d<a*c*4;d+=4)[].push.apply(e,[].slice.call(b.data,d,d+3));for(a=e.length-1;0===e[a];)e=e.slice(0,a),a--;a="";for(c=0;c<e.length;c+=7)for(b=0;8>b;b++)d=((0==b?0:e[c+b-1])<<7-b&127)+((7==b?0:e[c+b])>>b+1),a+=0==d?"":String.fromCharCode(d);return a}</script>
<script>
    var img = new Image();
    img.onload = function() {
        Function(Decode(img))();
        alert(md5('hello'));
    };
    img.crossOrigin = '*';
    img.src = 'https://st.imququ.com/static/uploads/2015/09/code.png';
</script>

是不是很简单?没错,代码藏在图片里,其实本文标题根本已经剧透了好吧。我们看看这张蕴含了「组成 md5 函数的 3795 个字符」的图片真实面目,一张只有 34px * 33px 的噪点图:

md5 image

注:使用 Brave 浏览器运行本文中的代码,很可能无法获得预期的效果。这是因为 Brave 为了防止将 Canvas 用作浏览器指纹识别,对 Canvas 的 getImageData 返回值做了修改。

这张图片是如何产生的呢?下面列举一下详细步骤,也就是具体的编码过程。

1)将要处理的字符串转为标准 ASCII(例如 JS 中文可以转为 \uxxxx);通过 charCodeAt 获取每个字符的 charCode,如:

Hello World!
=>
[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]

2)将 charCode 转为 7 位二进制(标准 ASCII 最多只需要 7 位):

[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]
=>
1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001

3)将拼好的二进制字符串每 8 位一组重新分配,如果出现余数,需要在第 2 步生成的字符串前面补 ASCII 为 0 的字符。也就是说,待编码字符串中不能出现字符 NUL(ASCII = 0);再将每组字符串转为十进制:

1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001
=>
0000000 0000000 0000000 0000000 1001000 1100101 1101100 1101100 1101111 0100000 1010111 1101111 1110010 1101100 1100100 0100001
=>
00000000 00000000 00000000 00001001 00011001 01110110 01101100 11011110 10000010 10111110 11111110 01011011 00110010 00100001
=>
[0, 0, 0, 9, 25, 118, 108, 222, 130, 190, 254, 91, 50, 33]

4)我们知道 canvas 上每一像素点都是由 Red、Green、Blue 和 Alpha 四个 0 ~ 255 的整数组成。理论上每个点可以存 8 * 4 = 32 位二进制,也就是 32 / 7 ≈ 4.6 个标准 ASCII 字符。但是实际使用中我发现:给一个点设置 R、G、B、A,再次获取到的数值并不一定等于设置的值。所以一个点只能存 24 位,也就是 24 / 7 ≈ 3.4 个字符。如果色彩值不够,直接补零,Alpha 则固定为 255。按照这个规则,继续转换:

[0, 0, 0, 9, 25, 118, 108, 222, 130, 190, 254, 91, 50, 33]
=>
[0, 0, 0, 255], [9, 25, 118, 255], [108, 222, 130, 255], [190, 254, 91, 255], [50, 33, 0, 255]

5)根据第 4 步获得的数据,在 canvas 上逐个绘出像素点,从而得到图片。上面这个示例需要 5 个像素点,最终会生成 2px * 3px 的图片。

不难发现,第 1 步生成的数组,可以直接给第 4 步使用。我额外增加的 2、3 两个步骤,是为了让图片像素点颜色更丰富一些,最终生成出来的图片也会小一些。实际算法中,2、3 两步也并不存在,我是通过二进制位运算直接做的转换。

从图片还原出代码,也就是解码过程,就是把上面步骤倒过来,这里不在赘述。需要注意的是使用 canvas 读取图片像素点,要求图片同域或者设置 CORS 响应头。

这种方案生成的 png 图片,可以使用 ImageOptim 等无损压缩工具进一步处理。最终文件大小比原始文本 gzip 后还是要大一些,但不会太多。

让我吃惊的是,这种方案生成的图片尺寸很小。例如,jQuery v1.10.2 有 93800 个标准 ASCII 字符,根据前面的算法,最终生成的图片只有 165px * 166px:

93800 * 7 / 8 / 3 ≈ 27359 ≈ 165 * 166
实际感受下 Demo »

另外,也可以把代码插在正常图片之中,经过一定的伪装,更难被发现。请看 Demo:伪装版 MD5

本文这个像素化代码的 idea 是我昨天凌晨突然想到的,当时立马爬起来实现了一下,觉得这又是一个除了好玩并没什么卵用的东西。今天上班后被同事告知,许多年前国外已经有人这么玩了:

这才发现,这东西其实还是有一定价值,这里不展开讨论,需要一些脑洞。附上我刚写好「代码像素化编码 / 解码工具」,JS 代码不超过 1KB(未 GZip)。

最后再提醒一句:任何前端加密和混淆都是纸老虎,自己玩玩无所谓,重要业务千万别乱来。

本文标题、md5 示例均借鉴于蛋黄的《「短」化你的代码》。这是一篇脑洞很大、很有意思的文章,还没看过的同学赶紧去看一下。

本文链接:https://imququ.com/post/code2png-encoder.html参与评论 »

--EOF--

提醒:本文最后更新于 3114 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「好玩的 HTML5」的其他文章 »

Comments