How to keep your JavaScript code more safely

How to keep your javascript code more safely


Obfuscating javascript used to be complex. However, with the help of javascript obfuscator,the process has become significantly easier.
javascript obfuscator is a powerful free obfuscator for javascript with a wide number of features which provides protection for your source code.

The following steps introduce how to use javascript obfuscator to keep your code safe from prying eyes.

Install javascript-obfuscator


You can install the package with NPM and add it to your dependencies or devDependencies.the actual deployment process should be done in a few seconds.
$ npm install --save-dev javascript-obfuscator

Create a sample for test

Testing obfuscation works best if we have some 'real' code. So let us start out with a small HTML webpage. It does some calculations. Then output the variable value in the console.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
    <!-- <script src="./node_modules/javascript-obfuscator/dist/index.browser.js"></script> -->
</head>
<body>
    <script>
        (function(){
            var variable1 = '5' - 3;
            var variable2 = '5' + 3;
            var variable3 = '5' + - '2';
            var variable4 = ['10','10','10','10','10'].map(parseInt);
            var variable5 = 'foo ' + 1 + 1;
            console.log(variable1);
            console.log(variable2);
            console.log(variable3);
            console.log(variable4);
            console.log(variable5);
        })();
    </script>
</body>
</html>

Implement the encryption


Performing an obfuscation run of the code is simple. just put your sourceCode in the function obfuscate(sourceCode, options)
Returns ObfuscationResult object which contains two public methods:
getObfuscatedCode() - returns string with obfuscated code;
getSourceMap() - if sourceMap option is enabled - returns string with source map or an empty string if sourceMapMode option is set as inline.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
</head>
<body>
    <script>
        // var javascriptObfuscator = require('javascript-obfuscator');

        var obfuscationResult = javascriptObfuscator.obfuscate(
            `
                (function(){
                    var variable1 = '5' - 3;
                    var variable2 = '5' + 3;
                    var variable3 = '5' + - '2';
                    var variable4 = ['10','10','10','10','10'].map(parseInt);
                    var variable5 = 'foo ' + 1 + 1;
                    console.log(variable1);
                    console.log(variable2);
                    console.log(variable3);
                    console.log(variable4);
                    console.log(variable5);
                })();
            `,
            {
                compact: false,
                controlFlowFlattening: true
            }
        );

        console.log(obfuscationResult.getObfuscatedCode());
    </script>
</body>
</html>

This shows the result :

var _0x1646 = [
    'GpCcd',
    'iWMpg',
    'map',
    'foo\x20',
    '4|0|2|8|5|9|3|6|7|1',
    'log'
];
(function (_0x3ee1d1, _0x22518a) {
    var _0x5d961c = function (_0x56eb66) {
        while (--_0x56eb66) {
            _0x3ee1d1['push'](_0x3ee1d1['shift']());
        }
    };
    _0x5d961c(++_0x22518a);
}(_0x1646, 0x13b));
var _0x31a7 = function (_0x309e91, _0x1efcc7) {
    _0x309e91 = _0x309e91 - 0x0;
    var _0x2d162c = _0x1646[_0x309e91];
    return _0x2d162c;
};
(function () {
    var _0x43ed5d = {
        'uNWjV': function (_0x453c50, _0x5b759a) {
            return _0x453c50 + _0x5b759a;
        },
        'GpCcd': function (_0x19ba89, _0x2e9a33) {
            return _0x19ba89 + _0x2e9a33;
        },
        'MEDRe': function (_0x3c583c, _0xddf2c3) {
            return _0x3c583c - _0xddf2c3;
        },
        'TTsyI': function (_0x196160, _0x3d980a) {
            return _0x196160 + _0x3d980a;
        },
        'iWMpg': _0x31a7('0x0')
    };
    var _0x4ae22d = _0x31a7('0x1')['split']('|'), _0x23e812 = 0x0;
    while (!![]) {
        switch (_0x4ae22d[_0x23e812++]) {
        case '0':
            var _0x424b63 = _0x43ed5d['uNWjV']('5', 0x3);
            continue;
        case '1':
            console[_0x31a7('0x2')](_0xd8e836);
            continue;
        case '2':
            var _0x454174 = _0x43ed5d[_0x31a7('0x3')]('5', -'2');
            continue;
        case '3':
            console[_0x31a7('0x2')](_0x424b63);
            continue;
        case '4':
            var _0x3f1d62 = _0x43ed5d['MEDRe']('5', 0x3);
            continue;
        case '5':
            var _0xd8e836 = _0x43ed5d['TTsyI'](_0x43ed5d[_0x31a7('0x4')] + 0x1, 0x1);
            continue;
        case '6':
            console['log'](_0x454174);
            continue;
        case '7':
            console[_0x31a7('0x2')](_0x10fffb);
            continue;
        case '8':
            var _0x10fffb = [
                '10',
                '10',
                '10',
                '10',
                '10'
            ][_0x31a7('0x5')](parseInt);
            continue;
        case '9':
            console['log'](_0x3f1d62);
            continue;
        }
        break;
    }
}());

Test the results


put the obfuscated code in a html for testing.

<body>
    <script>
        // obfuscated code
    </script>
</body>

Everything works well:

index.html:87 2
index.html:63 53
index.html:72 5-2
index.html:75 (5) [10, NaN, 2, 3, 4]
index.html:57 foo 11

more


there are some other options  and cli commands, you can can check them on website:
github.com/javascript-obfuscator/javascript-obfuscator

date2019-04-04 23:57:05 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *