前端md5加密、校验内容是否被篡改

        前端项目涉及很多安全性问题:用户账号信息、文件上传等。比较好的方式就是加密信息,这里采用得md5加密:

        前端目前好用得md5加密插件时spark-md5.js,下载方式直接在前端项目中npm add spark-md5下载依赖库。如果项目比较老,可以在一个node前端项目中用这种方式下载下来依赖包,然后找到node_modules模块下得spark-md5文件夹下得spark-md5.js(或spark-md5.min.js)。将这个文件直接放到老项目中,然后引入就行(<script src='../xxx/spark-md5.js'></script>)。

        用途:校验文件内容是否被修改、加密用户账号等。

        用法(这里以文件为例、字符串是一样的只是不需要拆分内容了):拿到文件里面得内容,直接调用函数得到一个md5值。

                1.监听上传文件:

$("#set-update-file").change(function() {
    var file = this.files[0];
    if(!file) {
        return false;
    }
    cobj.GetG(file);
})

                2.获取文件内容,大文件需要拆分内容,生成md5

GetG: function(ofile) {
			var cobj = this;
			var file = ofile;
			var tmp_md5;
			cobj.Frame.DisplayLoadding();
			var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
				chunkSize = 8097152, // 将内容拆分为2MB
				chunks = Math.ceil(file.size / chunkSize),
				currentChunk = 0,
				spark = new SparkMD5.ArrayBuffer(),
				fileReader = new FileReader();
 
			fileReader.onload = function(e) {
				spark.append(e.target.result);
				currentChunk++;
				var md5_progress = Math.floor((currentChunk / chunks) * 100);
				if (currentChunk < chunks) {
					loadNext();
				} else {
					tmp_md5 = spark.end();	// 生成md5值
					cobj.gmd5 = tmp_md5;
					cobj.Frame.HideLoadding();
					Dialog.alert("提示", "升级包MD5值计算完成!");
				}
			};
 
			fileReader.onerror = function() {
				console.warn('文件异常');
			};
			function loadNext() {	// 将文件内容差分
				var start = currentChunk * chunkSize,
					end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
				fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
			}
			loadNext();
		},

        验证文件是否被修改过就直接将初始文件生成得md5值与现的文件生成得md5做下对比就知道文件是否被修改(只要文件内容有一点不同生成的值都是不同的)。

        相关知识:

                md5只能生成一个比较唯一的值,不能解码。相同的内容、编码方式一样生成的md5是相同的。

                liunx下加密md5两种方式:md5sum '字符串'/文件名echo -n '字符串'/文件名|md5sum(-n加密时不把换行符转换为'\n');

                windows加密:插件库、在线加密等。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值