用webpack打包加密静态配置文件
webpack处理静态文件,如json、xml等配置文件,可以采用 copy-webpack-plugin 插件直接复制到打包后的文件夹下,但如果想采用一些手段隐藏一下这些配置文件的内容怎么办呢?
虽然对于前端来说,你的代码没有什么隐蔽性可言,但加密处理一下还是可以防止简单盗用的。
我采用的方法是利用 copy-webpack-plugin 中的 transform方法,以及CryptpJS加密库。
参考文档:
https://blog.zhengxianjun.com/2015/05/javascript-crypto-js/
https://github.com/webpack-contrib/copy-webpack-plugin
1、copy-webpack-plugin插件
查看copy-webpack-plugin的使用文档可以发现,参数中除了to和from参数外,还有一个transform参数,可以传入一个Function,第一个参数是文件内容,第二个参数文件路径
2、transform方法中加密
直接贴在webpack中的代码:
var CopyWebpackPlugin = require('copy-webpack-plugin'); var CryptoJS = require("crypto-js"); /** * 对数据进行加密 * @param {String} content 加密 */ function encrypt(content, path) { var str = content.toString(); // 密钥 16 位 var key = '0123456789abcdef'; // 初始向量 initial vector 16 位 var iv = '0123456789abcdef'; // key 和 iv 可以一致 key = CryptoJS.enc.Utf8.parse(key); iv = CryptoJS.enc.Utf8.parse(iv); var encrypted = CryptoJS.AES.encrypt(str, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); // 转换为字符串 encrypted = encrypted.toString(); // mode 支持 CBC、CFB、CTR、ECB、OFB, 默认 CBC // padding 支持 Pkcs7、AnsiX923、Iso10126 // 、NoPadding、ZeroPadding, 默认 Pkcs7, 即 Pkcs5 return encrypted; } module.exports = { plugins: [ new CopyWebpackPlugin([ { from: './jsons', to: 'jsons', transform (content, path) { return encrypt(content, path) } } ]) ] }
这样就把json文件中的配置加密了,
{ "id": 1, "layer_name": "水利" }
// 加密后成这样了
AnTOaTIXcdgaZ2R1dmkt/r6mQHZh4/Ufgq9/PVt17q3BuKhPe5qn2tQ/9bDcIB10
3、解析
加密了之后,在浏览器运行时,还是得把从服务器down下来的加密文件解密,才能使用,可以根据自己的情况截获加密文件的请求,然后对其进行解密操作
function decrypt(content) { var key = '0123456789abcdef'; var iv = '0123456789abcdef'; key = Crypto.enc.Utf8.parse(key); iv = Crypto.enc.Utf8.parse(iv); // DES 解密 var decrypted = Crypto.AES.decrypt(content, key, { iv: iv, mode: Crypto.mode.CBC, padding: Crypto.pad.Pkcs7 }); // 转换为 utf8 字符串 decrypted = Crypto.enc.Utf8.stringify(decrypted); return decrypted; }
至此,配置文件打包加密就操作完毕了!