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

 

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