❤
npm
Sign UpSign In

encrypt-loader

0.1.1 • Public • Published

介绍

encrypt-loader是Webpack的模块转码loader，能根据标签转码指定块、文件，可支持实时解码。 这个loader的本意是，让一些配置文件不那么显眼的存在文件里，让人一眼就找到，webpack构建的文件本身就带了混淆属性，加上转码解码过程，可以稍微增加点破解难度（心理上的?...）

使用

npm

npm i encrypt-loader -D

yarn

yarn add encrypt-loader -D

webpack.config.js

module.exports = {
    rules: [
        {
            test: /\.js$/,
            use: [{
                loader: 'babel-loader?cacheDirectory' // babel
            }, {
                loader: 'encrypt-loader',
                options: {
                    mode: 'block', // block mode
                    decode: true // decode(iife)
                }
            }]
        },
        {
            test: /\.json$/,
            use: {
                loader: 'encrypt-loader',
                options: {
                    mode: 'file', // file mode
                    decode: true, // decode(iife)
                    transform: 'aes' // aes|base64
                }
            }
        }
    ]
}

apis.js

const APIS = /*<encrypt>*/{
    info       : 'GET:/common/info',
    menu       : 'GET:/common/menu',
    login      : 'POST:/login',
    captcha    : 'GET:/captcha',
    banner     : 'GET:/banner/code'
}/*</encrypt>*/
 
export default APIS

mode=block时，loader将根据encrypt标签（可配置）识别需要转码的块

构建后：

exports.__esModule = true;
var APIS = function () {
    var Base64 = __webpack_require__("./node_modules/encrypt-loader/lib/base64.js");
    return Base64.Decrypt('ewoJaW5mbyAgICAgICA6ICdHRVQ6L2NvbW1vbi9pbmZvJywKCW1lbnUgICAgICAgOiAnR0VUOi9jb21tb24vbWVudScsCglsb2dpbiAgICAgIDogJ1BPU1Q6L2xvZ2luJywKCWNhcHRjaGEgICAgOiAnR0VUOi9jYXB0Y2hhJywKCWJhbm5lciAgICAgOiAnR0VUOi9iYW5uZXIvY29kZScKfQ==');
}();
exports.default = APIS;

var.json

{
    "view": 10,
    "cool": true,
    "users": [
        {
            "name": "Who am i?",
            "age": "??"
        },
        {
            "name": "东东",
            "age": 20
        },
        {
            "name": "丽丽",
            "age": 18
        }
    ]
}
 

mode=file时，loader将转码整个文件

构建后：

module.exports=(function() {
    var AES = __webpack_require__("./node_modules/encrypt-loader/lib/aes.js");
    return AES.Decrypt('U2FsdGVkX1+kWL42w6tkMHs3ls10g/WpxZtAOOedjzwRAVMeqhi/IeOonUbKAngR8iDUdDlz/U3DD3aDNJaH0HF7IL+ZimCeStIJHp4b1pvafuk83mFAc9h6etK3vPDs9eiKujh5F86XUGFInqDYqQNqLk7TX2U42P/NUfsvsKsFC6JinkrWZ+oS/kB8YUMteIC4tg8R/P5Omu4DtSQtqqzeOW95TJ6RIoDX5bmbN/0zkAZMRjIZBqKjYaSErDbrRB0Xfc61G9biiQvIBcrBxQ==');
})()

注意事项

配合babel-loader使用时，若encrypt-loader在babel-loader后调用，必须在末尾加上;分号。请看下例：

rules配置为

{
    test: /\.js$/,
    use: [
        'encrypt-loader'  // 再转码
        'babel-loader?cacheDirectory',  // 先babel转换
    ]
}

test.js

const APIS = /*<encrypt>*/{
    info       : 'GET:/common/info',
    menu       : 'GET:/common/menu',
    test : {
        user   : 'GET:/user/info'
    }
}/*</encrypt>*/

babel编译后会变成

var APIS = /*<encrypt>*/{
    info: 'GET:/common/info',
    menu: 'GET:/common/menu',
    test: {
        user: 'GET:/user/info'
    } /*</encrypt>*/
};

注释标签错乱了...这就会导致转码后webpack报错，因为转码后会留下一个}，语法错误了~~~

在末尾加个分号 test.js

const APIS = /*<encrypt>*/{
    info       : 'GET:/common/info',
    menu       : 'GET:/common/menu',
    test : {
        user   : 'GET:/user/info'
    }
};/*</encrypt>*/
// 上面这行末尾多了个分号

babel编译后，一切就恢复正常了~

var APIS = /*<encrypt>*/{
    info: 'GET:/common/info',
    menu: 'GET:/common/menu',
    test: {
        user: 'GET:/user/info'
    }
}; /*</encrypt>*/

所以 ，建议在babel-loader前转码，源码中不使用ES6语法~

压缩

现只会压缩需要转码的部分，大部分情况下，转码部分都会是值，但是Uglify-js不能压缩纯值，因此会加上module.exports=前缀后再进行压缩，若压缩失败，请检查下前缀加上后的语法是否正确。

流程如下：

const test = /*<encrypt>*/[
    // test
    "test",
    "abc"
];/*</encrypt>*/

转码部分识别为

[
    // test
    "test",
    "abc"
];

压缩前转换为

module.exports=[
    // test
    "test",
    "abc"
];

调用压缩

UglifyJS.minify(`module.exports=[
    // test
    "test",
    "abc"
];`, options.uglifyOptions)

截取压缩后的代码，最终为

["test","abc"];

选项

{
    mode: 'block', // 模式：支持block分块转码，file整个文件转码
    tag: 'encrypt', // 标签：mode==block时，识别转码块标识。示例：<encrypt>code</encrypt>
    decode: true, // 解码：iife返回解码值，设置为false，则直接返回转码后的值
    transform: 'base64', // 转码方法(string|fn)：内置支持base64、aes，可设置自定义方法fn(content, options)
    minify: true, // 启用压缩，uglify-js
    minifyPrefix: 'module.exports=', // 压缩部分将加上`module.exports=`前缀后再压缩（不要带空格，否则压缩后空格丢失，将截取错误）
    uglifyOptions: { // 压缩选项
        output: {
            beautify: false,
            comments: false,
            ascii_only: true
        }
    }
}

Readme

Keywords

Package Sidebar

Install

npm i encrypt-loader

Repository

github.com/mudoo/encrypt-loader

Homepage

github.com/mudoo/encrypt-loader#readme

Weekly Downloads

0

Version

0.1.1

License

MIT

Unpacked Size

10.3 kB

Total Files

5

Last publish

Collaborators

  • mudoo
Try on RunKit
Report malware