admin 管理员组文章数量: 1184232
2024年4月29日发(作者：traceback英文)
基于canvas的前端数据加密
作者：夏凡 崔艳荣
来源：《电脑知识与技术》2018年第35期
摘要：前端在数据加密方面一直不是强项，数据加密的工作一直放在后端执行，该文利用
的html5中的canvas元素的操作像素点的特性，将数据通过某种特定的方式转换成像素点所对
应的值，将数据存储在像素点中，然后用canvas操作像素点的特性绘制成加密后的像素点图
片，达到对数据加密安全保护的效果。
关键词： canvas; 数据加密; 前端; 像素点; 安全
中图分类号：TP393; ; ;文献标识码：A; ; ;文章编号：1009-3044（2018）35-0033-02
Abstract：The front end has not been a strong point in data encryption. The work of data
encryption has always been performed on the back end. This article uses the characteristics of the
operation pixel of the canvas element in html5 to convert the data into pixel points in a specific way.
Value， store the data in the pixel， and then use the characteristics of the canvas operation pixel to
draw the encrypted pixel image to achieve the effect of data encryption security protection.
Key words： canvas; data encryption; front-end; Pixel; safety
1 概述
在web开发中，一直以来前端加密就是很薄弱的一个环节，前端领域是完全透明和公开的
[1]，所以，前端的加密有的时候意义不大，前端将数据利用某种算法进行变换后，还是一串
具有某些特点的数据串，在公网上这些数据串被截获后，对于这些有一定规律的数据串，通过
不断的尝试，还是很有可能找出破解的方法的。特别对于前端文件（比如js文件），这些文件
是直接在公网请求，所以可以完全获取源代码。
实现数据加密的复杂性，之前一直就是靠算法的复杂性来保证数据在短时间内不容易破
解，来保证数据的安全，如果换一种思维，将数据和文件不是加密成数据串来保存，而是变成
另一种形式，比如说加密成一张图片，用图片来保存整个数据（或文件），那么第三方就算在
网络上截获了这个图片，估计也很难看出图片中装的是什么数据，因为图片上就是一些像素点
（如果将图片只为透明，那么更加分析不出来其中的规律）。
在HTML5中，正好有个叫canvas的组件提供了这个能力，所以在前端，可以利用canvas
将数据绘制到一张图片中，通过js将数据生成一张像素点图，用图片保存数据。
2 HTML5中canvas介绍
Canvas是HTML5中新引入的一个标签，canvas标签本身没有什么能力，但是通过js就可
以发挥巨大的能量[2]，Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。
开发者可以通过javascript脚本实现任意绘图[3]。
简单来说，canvas就是一张画布，通过js可以动态改变画布的大小，在画布上对画布区域
中的每个像素点进行渲染[4]，canvas对象中getContext（） 方法可返回一个对象，该对象提供
了用于在画布上绘图的方法和属性。主要使用 getContext（“2d”） 对象属性和方法，用于在画
布上绘制文本、线条、矩形、圆形等等。
getContext方法可以返回一个具有绘画能力的一个对象，该对象可以在画布上进行绘画，
这个对象下面有两个方法，一个是getImageData（用于获取画布上的所有的像素点的信息），
另一个是putImageData（用于对画布上进行像素点的操作，可以将准备好的包含像素点信息的
数组绘制到画布上）。通过getImageData获得的对象下面有一个data属性，这个属性下面包
含的是一个Uint8ClampedArray数组，存储了canvas中所有像素点的信息，包含每个像素点的
rgba的值。
3 基于canvas的前端数据加密方案
Canvas容器就是一张画布，canvas可以直接操作每一个像素点，每个像素点有四个属性组
成，只要确定每个像素点的rgba的值，这个像素点就唯一确定，canvas容器中所有像素点的
rgba确定下来，那么整个画布的内容就确定下来，就形成一张完整的图片。
对于要加密的字符串（或js文件），首先只需要对加密的字符串进行转义[5]，然后采用
对称加密算法，对字符串进行加密，对加密后的字符串遍历，获得每个字符对应的ASCII码，
存放到数组CodeStr中，这样就获得了对数据加密后得到的数组CodeStr[6]。
一个像素点需要有4个ASCII码值对应，根据CodeStr可以得到需要多少个像素点来存储
这些加密的数据，得到需要的像素点个数pixelSize，对pixSize开方再向上取整，可以得到
canvas容器需要的宽和高canvasWidth，最后完善CodeStr不足的像素点的rgba都补0。
創建canvas容器，然后设置canvas的宽和高为canvasWidth，通过canvas容器对象获得图
像数据数组[7]，然后将CodeStr一个一个赋值给canvas图像数据数组，将修改后的数组设置给
canvas对象，数据加密形成图片信息，加密完成。
对图1的数据加密，形成的canvas图像数据如图2，对于图2的信息，在短时间内很难将
数据还原成图1。
在这个过程中，如果加密算法复杂[8]，形成的图片数据会更加没有规律，这样解密的难
度会更大。
参考文献：
[1] 安全手册[M]. 谢文亮，马睿倩，译.北京：清华大学出版社， 2005
[2] 周爱民.JAVASCRIPT语言精髓与编程实践[M]. 北京：电子工业出版社， 2008.
[3] [美]DavidFlanagan，.张铭泽，等，译.JavaScript权威指南[M]. 北京：机械工业出版社，
2003.
[4] 陆凌牛.HTML 5与CSS 3权威指南[M]. 北京：机械工业出版社， 2013.
[5] 马洪亮，王伟，韩臻.混淆恶意JavaScript代码的检测与反混淆方法研究[J]. 计算机学
报，2017（7）.
[6] 马欢，徐进.JavaScript代码加密与解密方法剖析[J]. 科技创新导报， 2008（22） .
[7] （美） 基瑞 （Geary，D.）.HTML5 Canvas核心技术[M].北京：机械工业出版社，
2013.
[8] 赵雪梅.AES加密算法的实现及应用[J]. 现代经济信息， 2009（23）.
[通联编辑：梁书]
版权声明：本文标题：基于canvas的前端数据加密 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1714393111a678276.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论