瞎折腾：把JS,CSS任意文本文件加密成一张图片

一、这是一张包含特殊信息的加密图片

64像素*64像素原始加密图：

放大5倍呈现后：

这张64*64见方的图片实际上包含了一段4K大小的JavaScript脚本的信息。

相信如果不知道这张图片的加密算法，就算是爱因斯坦也很难短时间破解之。

二、JavaScript代码的图片加密与解密

加解密的原理如下：

• 加密：获取文本字符的Unicode编码，范围是 0 – 65535 之间的整数。然后把这个整数转化成RGB色值，每一个字符对应一个像素值颜色，然后绘制成图片。
• 解密：读取图片的像素信息，转化成对应的Unicode编码，再转换成对应字符。

加解密的媒介canvas

加密的图片生成，解密的图片信息读取，都是借助canvas实现的。

canvas API中的putImageData可以用来生成图片；canvas API中的getImageData可以用来读取图片中的像素信息。

对于通过web生成的数据，我们处理相对简单一些，因为都在同一个web平台上。

例如我们发表了一篇需要付费阅读的文章，可以这么处理：

1. 将文章文本转换成RGB颜色信息绘制在canvas画布上；
2. 通过canvas的toDataURL()方法，将画布信息转为base64格式，发送给后端，后端以图片格式进行信息接收（或直接base64地址入库——大小都差不多）；
3. 当需要呈现文章的时候，通过读取这张图片信息进行解密，得到文章内容。然后再以画布的形式显示文章内容，这样页面源代码和实时DOM都没有文章文字信息。可以大大提高盗版的门槛。

---

如果是本地开发的源代码想要加密呢？

则需要借助本地工具对这些文件进行图片格式转换，对于前端开发同学而言，可以自己写一个node.js小工具。

下面这段node.js代码就是我自己写自己用的，大家有兴趣可以作为参考：

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');
const file2Img = function (filename) {
    fs.readFile(filename, {
        encoding: 'utf8'
    }, function (err, data) {
        let length = data.length;
        let size = Math.ceil(Math.sqrt(length));
        // 绘制canvas
        const canvas = createCanvas(size, size);
        const ctx = canvas.getContext('2d');
        // 获取透明像素数据
        var imgData = ctx.getImageData(0, 0, size, size);
        // 透明像素数据替换为实色数据
        var index = 0;
        for (var start=0; start 
  
使用示意，命名一个file2img.js文件，复制并粘贴上面JS代码，代码最后加上下面一句（js文件名换成你希望转换的）：
 
  
file2Img('colorful-min.js');
 
  
然后执行：
 
  
node file2img
 
  
此时，就会把colorful-min.js变成colorful-min.png图片了。
 
  
 
  
本地实现麻烦之处
 看代码量，似乎觉得本地文件转图片也是洒洒水的程度。
 
  
事非经过不知难，本地文件转图片，麻烦的其实并不是代码实现本身，而是node-canvas模块的安装（node-canvas项目地址见这里），尤其在windows系统下的安装，我看网上还有人折腾了一整天才弄好的。
 
  
我自己折腾了好几个小时，完全按照官方的步骤，一个个的安装，甚至为了安装node-gyp，还下载了占用了3.29G的Microsoft Visual C++ Build Tools，结果还是狗屎。
 
  
什么binding.gyp not found，c2373 __pfnDliNotifyHook2之类错误。
 
  
我跟大家讲，官方的安装教程，很不靠谱，漏了一个非常重要的东西。
 
  
第1步并不是安装node-gyp，而是升级Node.js到最新版。
 
  
我折腾这么久，就是因为Node.js还是老版本的原因， 。
 
  
然后，我使用的是2.0的用法，默认安装还是1.x版本，因此，canvas包安装时候，要走下面：
 
  
npm install canvas@next
 
  
三、解密图片并执行实际案例
 
  
下面这段JS可以对图片进行解密并直接执行其对应的JavaScript脚本：
 
  
var jsParseImg=function(l,g){var e=document.createElement("img"),f=document.createElement("canvas");e.οnlοad=function(){f.width=this.width;f.height=this.height;var a=f.getContext("2d");a.drawImage(this,0,0,this.width,this.height);for(var a=a.getImageData(0,0,this.width,this.height),e=a.data.length,h=[],b=0;b 
  
语法如下：
 
  
jsParseImg(imgurl, callback);
 
  
其中，imgurl只图片的URL地址，可以是普通协议地址，也可以是base64地址，甚至是Blob地址；callback为解密并解析成功后的回调。
 
  
眼见为实，您可以狠狠地点击这里：JS解析解密图片并执行demo
 
  
在原demo页面中，炫彩背景的colorfulBackground()方法是在colorful-min.js中声明的；但是，在这里，有的仅仅是一个colorful-min.png图片请求。
 
  
但，这并不妨碍我们执行：
 
  
jsParseImg('colorful-min.png', function () {
    colorfulBackground({
      container: document.getElementById('container'),
      animation: false,
      size: [400, 800]
    });    
});
 
  
来实现我们想要的效果。
 
  
 
  
想必那些喜欢扒代码的伸手党，看了这个页面之后，一定是一脸懵逼。
 
  
 
  
四、结束语
 
  
有小伙伴可能会担心，加密和解密的东西呀，最宝贵的就是算法了，你这里基本上原封不动就暴露了，那基本上就没啥用了呀。
 
  
这个其实大可不必担心。
 
  
本文所展示的颜色处理只是抛砖引玉，属于最基本最简单的，从头往后线性的颜色绘制。
 
  
如果在实际项目中应用，肯定就不会想这么简单的策略了。
 
  
颜色信息的起点可以从中间，圆环的形式；或者逐行绘制的方式。
 
  
或者更近一步，每一个像素点藏更多的信息。因为字符最大Unicode编码是65535，但是一个像素点RGBA所能包含的数值范围信息是256^4，也就是4294967296，完全不是一个数量级的。如果采用像素通道组合方式，一个像素点藏2个字符信息，是完全可行的。一个像素通道范围0~255，其中两个组合，则范围大小256*256为65536，排除掉认为是无效像素信息的0,0组合正好涵盖65535。
 
  
恩，有时间可以再试试。
 
  
这样，图片的尺寸可以进一步缩小。
 
  
本文展示的JS和生成图片尺寸对比为：3.94K VS 5.33K。静态资源成本是有所增加的，如何权衡，还要看大家自己。
 
  
 
  
在前端领域，是没有百分之百的加密的，只要花足够多的时间和耐心，总会窥探到到门路的。而且对前端技术这种东西，都是开放的，尤其web这种项目，你说你JS代码镶了金镶了钻，非加密不可，想必多半会一笑而过吧。所以，平常的压缩混淆已经足够了。
 
  
所以标题才有“瞎折腾”字样。自己玩一玩试验试验，实际上实际开发的估计很少使用。但是用的少，并不一定没有价值，说不定遇到特殊项目特殊场景，就能高光一把。
 
  
感谢阅读！