前端项目涉及很多安全性问题:用户账号信息、文件上传等。比较好的方式就是加密信息,这里采用得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加密:插件库、在线加密等。