js十大邪术之一 图片隐写术

1、什么是图片隐写术？

权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。”，图片隐写术简而言之就是利用图片来隐藏某些数据，让人一眼看去以为是很普通很正常的图片，但其实里面隐藏着某些“机密”数据。

据传911事件里，KB份子就是通过黄色图片来传递信息而躲过了FBI的监控。还有大众点评也是通过图片隐写术来保护自身合法权益。所以图片隐写术是一个双刃剑，就看你用它做什么了。

比如下面这张图片：

看起来是一张很漂亮的风景照片，但其实它里面却藏着一张美女图（注：美女图片来源于淘宝某店），如下：

是不是很惊艳？看得你热血沸腾鼻血都往外冲呢？这就是图片隐写术的历害之处，“机密”隐藏于无形之中！

2、图片隐写术是怎么做到的？

　　 图片隐写有多种方式，我这里介绍的是采用图片的最低有效位（LSB）进行隐写。其原理就是图片的像素点都是由三原色（RGB）构成（如下图），由这三原色可以组成各种颜色，如CSS里的颜色定义#FFFFFF，即是三原色的16进制值写法，每个颜色各占用8bit。而LSB隐写就是修改像素中每个颜色值的最低位值，而这些修改，人眼一般是分辨不出来的，从而达到数据隐藏的目的。

　　譬如我们想把’A’隐藏进来的话，如下图，就可以把A转成16进制的0x61再转成二进制的01100001，再修改为红色通道的最低位为这些二进制串。

（注：以上图片和示例来源于Wooyun）

3、Javascript实现的图片隐写术

　　代码项目见GitHub：https://github.com/kingthy/imagemask

• 在线演示 https://ipfs.io/ipfs/QmUG1TKotQYsp6bSw6pX4crFWfhJRNTnJre7buEaYYBV72
• 使用示例

`<``script` `type="text/javascript" src="imagemask.js"></``script``>``<``script` `type="text/javascript">``var mask = new ImageMask({``    ``debug: false,   //是否开启调试模式``    ``charSize: 16,   //字符的字节位数，默认为16，即字符最大值为0xFFFF``    ``mixCount: 2,    //隐写数据要混合到图片颜色值里的最低位数，值范围在1-5，默认为2，如果大于3，则图片会失真很严重``    ``lengthSize: 24  //数据长度值的占用字节位数，默认为24，也即数据长度最大值为16777215``});``</``script``>`

• 隐写文本

`//脚本里传入页面的canvas对象和要隐写的文本``var output = document.getElementById('output');``var canvas = document.getElementById('canvas');``mask.hideText(canvas, '要隐写的文本');``output.src = canvas.toDataURL();`

• 隐写文件

`//脚本里传入页面的canvas对象和要隐写的文件``var` `output = document.getElementById(``'output'``);``var` `canvas = document.getElementById(``'canvas'``);``var` `file = document.getElementById(``'file'``);``mask.hideFile(canvas, file.files[0], , ``function``(result){``        ``if``(result.success){``            ``output.src = canvas.toDataURL();``        ``}``else``{``            ``alert(result.message);``        ``}``});`

• 读出图片里隐写的文本

`var` `canvas = document.getElementById(``'canvas'``);``var` `message = mask.revealText(canvas);`

• 读出图片里隐写的文件

`var` `canvas = document.getElementById(``'canvas'``);``var` `file = mask.revealFile(canvas);       ``//file.name = 文件名称， file.data = 文件数据`

4、示例图片

• 原图

• 隐写一章3千多字的小说内容后的图片效果

（隐写什么小说内容，各位有兴趣的将图片保存下来，然后在演示页面里读出来即可知道。）

以上两张（包括上面有美女的那张）图片效果几乎是一样的，人眼是看不出来有任何变化。

5、附加说明

　　1）、LSB方式的隐写图片只能存储为PNG或者BMP图片格式，并且不允许再采用有损压缩（比如JPEG），否则会丢失隐写的数据！

2）、图片里可以隐写任何数据，并且可以存储的数据多少由图片的大小（长宽）来决定。也许一张图片就能存储下一部圣经的所有文字。

6、脑洞时间

　　工具是有了，我们可以用来做些什么呢？发挥你的想象吧：）

1）、防采集：将文本内容隐写到图片里，这样就能防直接的采集（比如小说网站、内容原创网站） ，当然了，只能防君子了。

2）、版权水印：将版权水印（文字或者图片）或者其它身份识别标记（如公司里防泄密）隐写到图片里，如果对方直接盗用，则可以起到鉴别作用（如大众点评网案例）。当然了，如要防“攻击”（压缩，变形，涂改等）则需要更高深的隐写方式。有兴趣的可阅读啊里月饼事件引发的知乎讨论贴里的牛人回复。

传递门：https://www.zhihu.com/question/50735753/answer/122717091

3）、防监控：将文本或图片隐写到图片里，可以防机器（某墙？）监控（比如整网站都是好孩子图片或风景图，但其实都是坏孩子图片或者XX小说、XX内容）

4）、文件下载：直接将文件存于图片里，绕过文件格式限制问题。比如很多图床只能传图片，但经过隐写后就可以图片里藏任意文件了，比如大家都喜欢的种子，当然了，要求图床不会再进行图片再次压缩。