这篇文章发布于 2017年12月24日，星期日，16:04，归类于js实例。 阅读 264 次, 今日 264 次
byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6661
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。
一、这是一张包含特殊信息的加密图片
64像素*64像素原始加密图：
放大5倍呈现后：
这张64*64见方的图片实际上包含了一段4K大小的JavaScript脚本的信息。
相信如果不知道这张图片的加密算法，就算是爱因斯坦也很难短时间破解之。
二、JavaScript代码的图片加密与解密
加解密的原理如下：
- 加密： 获取文本字符的Unicode编码，范围是 0 – 65535 之间的整数。然后把这个整数转化成RGB色值，每一个字符对应一个像素值颜色，然后绘制成图片。
- 解密： 读取图片的像素信息，转化成对应的Unicode编码，再转换成对应字符。
加解密的媒介canvas
加密的图片生成，解密的图片信息读取，都是借助 canvas 实现的。
canvas API中的 putImageData 可以用来生成图片； canvas API中的 getImageData 可以用来读取图片中的像素信息。
对于通过web生成的数据，我们处理相对简单一些，因为都在同一个web平台上。
例如我们发表了一篇需要付费阅读的文章，可以这么处理：
- 将文章文本转换成RGB颜色信息绘制在canvas画布上；
- 通过
canvas的toDataURL()方法，将画布信息转为base64格式，发送给后端，后端以图片格式进行信息接收（或直接base64地址入库——大小都差不多）； - 当需要呈现文章的时候，通过读取这张图片信息进行解密，得到文章内容。然后再以画布的形式显示文章内容，这样页面源代码和实时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<size*size; start++) {
let charCode = data.charCodeAt(start);
if (Number.isNaN(charCode) == false) {
let hex = (charCode + '').padStart(6, '0');
for (var i=0; i<6; i+=2) {
imgData.data[index++] = parseInt('0x' + hex.slice(i, i + 2));
}
// 透明度
imgData.data[index++] = 255;
}
}
// 使用新颜色信息绘制
ctx.putImageData(imgData, 0, 0);
// 保存的PNG文件名
var imgFilename = filename.split('.')[0] + '.png';
let stream = canvas.pngStream();
// 输出PNG流
let out = fs.createWriteStream(__dirname + '/' + imgFilename);
stream.on('data', function(chunk) {
out.write(chunk);
});
stream.on('end', function(){
console.log('The '+ imgFilename +' stream ended');
});
});
};
使用示意，命名一个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.onload=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<e;b+=4){var k=a.data[b].toString(16),c=a.data[b+1].toString(16),d=a.data[b+2].toString(16);a.data[b+2].toString(16);1==c.length&&(c="0"+c);1==d.length&&(d="0"+d);0!=Number(k+c+d)&&h.push(String.fromCharCode(Number(k+
c+d)))}window.eval(h.join(""));g&&g()};e.src=l};
语法如下：
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代码镶了金镶了钻，非加密不可，想必多半会一笑而过吧。所以，平常的压缩混淆已经足够了。
所以标题才有“瞎折腾”字样。自己玩一玩试验试验，实际上实际开发的估计很少使用。但是用的少，并不一定没有价值，说不定遇到特殊项目特殊场景，就能高光一把。
感谢阅读！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： http://www.zhangxinxu.com/wordpress/?p=6661
（本篇完）
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。