javascript图片隐写术,感觉可以用它来干点有想法的事情

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

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

声明:以上只是脑洞想法,本人不负由脑洞或者本隐写工具产生的任何责任!

时间: 2024-10-11 13:29:23

javascript图片隐写术,感觉可以用它来干点有想法的事情的相关文章

图片隐写术总结

一直比较喜欢做杂项(虽然还是很垃圾),就感觉很有意思.总结了一些关于图片隐写的姿势,一起学习~ 1.另存为图片 (还有直接看文件信息,可能就在文件信息里面)2.改后缀 zip / rar /txt3.扔winhex  这里要看文件头和文件结束的位置  Jpg文件头:FFD8FF,结尾都是FF D9  gif的开头是GIF8(47494638)  PNG (png),文件头:89504E47   ZIP Archive (zip),文件头:504B0304   RAR Archive (rar),

JavaScript 图片广告自动与手动的切换

?1.代码 <html> <head>   <script type="text/javascript" src="jquery-1.8.js"></script>   <script type="text/javascript" src="pictrue-con.js"></script>   <style>            #pic1

Javascript图片的懒加载与预加载

1. 缓载.预载的概念 这些技术不仅限于图片加载,但我们首先讨论最常用的图片加载. 缓载:延迟加载图片或符合某些条件时才加载某些图片. 预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力. 2. 缓载的意义与实现 缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 主要体现在三种模式上: 第一种是纯粹的延迟加载,使用setTimeOut

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

javascript图片等比例缩放代码

javascript图片等比例缩放代码: 图片的尺寸在初始的状态下往往不能够完美的适应网页的布局,这个时候就需要对图片进行缩放处理,当然不能够是无规则的进行缩放,否则可能出现图片变形现象,下面是一段能够对图片进行等比例缩放的实例代码. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

JavaScript 图片轮播

一.布局 <style> .container{ position: relative; width: 500px; height: 180px; margin:100px auto; } .container ul{ position: absolute; bottom: 0; width: 100%; height: 30px; background: rgba(0,0,0,0.4); } .container li{ width:10px; height: 10px; margin: 9

Steganography-图片隐写术

Steganography-图片隐写术 今天做DAM的作业,做到图片水印的时候,想起来当初小调同学把言页之庭的种子通过图片发给我.看到下面这个新闻真是觉得碉堡了!!技术宅又一次可以成功而隐晦的表白了!!哈哈哈!! http://war.163.com/10/0712/17/6BDLNUB90001123L.html 下面分享以下自己用python实现的隐写术,后面如果有时间会再更深入研究一下解码的问题!! 基本思路是: 1.每张图片都有RGB三个通道,每个像素点的值为3个8位的R/G/B值. 2

JavaScript图片缩放库Zooming

Zooming 是一款纯 javascript 图片缩放库,主要特点有: 不依赖其他库,纯 JavaScript 实现,支持移动设备: 流畅的动画: 可缩放高清图像: 易于集成和定制. 查看演示