用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;
}

至此，配置文件打包加密就操作完毕了！