Angular 2 support?

[kodeine]

Hello,
Can you please let me know how to use this JS obfuscator for Angular2 Starter?

Thanks

[sanex3339]

You tried to follow readme? Any errors?

[kodeine]

@sanex3339
no errors are printed, it just stucks for like a minute and webpack shows Ok. but compiling fails as webpack cant find html.
Can you try at your end?

[sanex3339]

Later this day

[kodeine]

thank you

[sanex3339]

There a bunch of problems related to issue. One problem can be easyli fixed (plugin tried to obfuscate non .js formats).
But other problem causing to runtime error. As i understand, this error happening as result of chunk splitting by webpack. It takes a time to analyze this error and find a way to fix it.

[kodeine]

Ahh, i'd be very thankful if you could find the soltuion. I really want to use obfuscation. Thanks for ur hard work btw

[sanex3339]

Ok, i found all problems, but now i need a time to analyze a way to fix it.

First problem related to plugin.
Plugin trying to obfuscate non-.js extensions. I can easily fix this by improving logic. I will do during weekend.

Second problem related to javascript-obfuscator itself.
Runtime error after obfuscation happens as result of two things: wrapping a class with __decorate method call with some strange variable declarations. And result of uglifying of this wrapped class.

Take a look at code before uglifyjs:

/***/ 409:
/***/ function(module, exports, __webpack_require__) {

"use strict";
"use strict";
var core_1 = __webpack_require__(0);
/*
 * Directive
 * XLarge is a simple directive to show how one is made
 */
var XLarge = (function () {
    function XLarge(element, renderer) {
        // simple DOM manipulation to set font size to x-large
        // `nativeElement` is the direct reference to the DOM element
        // element.nativeElement.style.fontSize = 'x-large';
        // for server/webworker support use the renderer
        renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
    }
    XLarge = __decorate([
        core_1.Directive({
            selector: '[x-large]' // using [ ] means selecting attributes
        }), 
        __metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object, (typeof (_b = typeof core_1.Renderer !== 'undefined' && core_1.Renderer) === 'function' && _b) || Object])
    ], XLarge);
    return XLarge;
    var _a, _b;
}());
exports.XLarge = XLarge;


/***/ },

In the code you can see var _a, _b; line. Variables _a and _b is declared after __decorate method call and return statement but using before declaration.

Right now everything is ok, i have a test for this case:
Source code:
https://github.com/sanex3339/javascript-obfuscator/blob/master/src/node-obfuscators/VariableDeclarationObfuscator.ts#L58

Test:
https://github.com/sanex3339/javascript-obfuscator/blob/master/test/functional-tests/node-obfuscators/VariableDeclarationObfuscator.spec.ts#L57

But after minification with uglifyjs code becomes like that:

09: function (t, e, n) {
        "use strict";
        var o = n(0), a = function () {
            function XLarge(t, e) {
                e.setElementStyle(t.nativeElement, "fontSize", "x-large")
            }

            return XLarge = __decorate([o.Directive({selector: "[x-large]"}), __metadata("design:paramtypes", ["function" == typeof(t = "undefined" != typeof o.ElementRef && o.ElementRef) && t || Object, "function" == typeof(e = "undefined" != typeof o.Renderer && o.Renderer) && e || Object])], XLarge);
            var t, e
        }();
        e.XLarge = a
    },

You can see what names in first line with function parameters 09: function (t, e, n) { and in line with variables var t, e are the same.

After obfuscation it breaks code, because obfuscator thinking what variables with names t and e inside __decorate method are function parameters and obfuscate it with function parameters names, but they are should be as undefined variables which was declared later inside var t, e line.

409: function (_0x417d70, _0x52763a, _0x3789ca) {
        '\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74';
        var _0x5e6873 = _0x3789ca(0x0), _0x282e30 = function () {
                function _0x2c5c63(_0x3abb4d, _0x1a7d4d) {
                    _0x1a7d4d['\x73\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x53\x74\x79\x6c\x65'](_0x3abb4d['\x6e\x61\x74\x69\x76\x65\x45\x6c\x65\x6d\x65\x6e\x74'], '\x66\x6f\x6e\x74\x53\x69\x7a\x65', '\x78\x2d\x6c\x61\x72\x67\x65');
                }
                return _0x2c5c63 = __decorate([
                    _0x5e6873['\x44\x69\x72\x65\x63\x74\x69\x76\x65']({ '\x73\x65\x6c\x65\x63\x74\x6f\x72': '\x5b\x78\x2d\x6c\x61\x72\x67\x65\x5d' }),
                    __metadata('\x64\x65\x73\x69\x67\x6e\x3a\x70\x61\x72\x61\x6d\x74\x79\x70\x65\x73', [
                        '\x66\x75\x6e\x63\x74\x69\x6f\x6e' == typeof (_0x417d70 = '\x75\x6e\x64\x65\x66\x69\x6e\x65\x64' != typeof _0x5e6873['\x45\x6c\x65\x6d\x65\x6e\x74\x52\x65\x66'] && _0x5e6873['\x45\x6c\x65\x6d\x65\x6e\x74\x52\x65\x66']) && _0x417d70 || Object,
                        '\x66\x75\x6e\x63\x74\x69\x6f\x6e' == typeof (_0x52763a = '\x75\x6e\x64\x65\x66\x69\x6e\x65\x64' != typeof _0x5e6873['\x52\x65\x6e\x64\x65\x72\x65\x72'] && _0x5e6873['\x52\x65\x6e\x64\x65\x72\x65\x72']) && _0x52763a || Object
                    ])
                ], _0x2c5c63);
                var _0x152228, _0x43c001;
            }();
        _0x52763a['\x58\x4c\x61\x72\x67\x65'] = _0x282e30;
    },

So, i looking for a solution.

[kodeine]

aaa makes sense. I kept wondering what could be causing this. But thank God you were able to find out the issue. Thanks for working on this to find a solution. hopefully it will help all angular users =) Best.

[sanex3339]

Looks like i understand how i can change algorythm to fix this, but this just a theory now.

[sanex3339]

Looks like i fixed runtime error. Need time to test it because this is core changes to few node obfuscators. Fix will be in javascript-obfuscator@0.8.0-dev.1 version today/tomorrow + i should fix plugin. Minor patch for 0.7.* version will be later.

[sanex3339]

Runtime error fixes here:
javascript-obfuscator/javascript-obfuscator@5469d4d
javascript-obfuscator/javascript-obfuscator@3809f54

Also after obfuscation i applying https://github.com/nolanlawson/optimize-js to output code.
It gives me about 2x time boost to load angular 2 starter pack. From 2.5 sec to 1.1-1.2 sec

[kodeine]

├── UNMET PEER DEPENDENCY webpack@2.1.0-beta.22
└── webpack-obfuscator@0.7.1

and in config/webpack.dev.js i put

// main 
const WebpackObfuscator = require('webpack-obfuscator');

// in plugins array.
    new WebpackObfuscator({
      rotateUnicodeArray: true
    }, ['excluded_bundle_name.js'])

its the same as before ? am i doing this right?

[sanex3339]

I didn't released update to plugin or for javascript-obfuscator. Plugin will be updated today. Obfuscator will be updated today/tomorrow.

[kodeine]

@sanex3339 let me know when should i test it. also did i setup the obfuscator correctly? like i mentioned above?

[sanex3339]

webpack-obfuscator@0.7.2 is out. Try it and say - your problem has been fixed or not?

[kodeine]

@sanex3339 works like a charm bro, thanks a lot for this update!

[sanex3339]

nice!

[kodeine]

@sanex3339 is it possible to just encrypt a single Class file that doing a whole project?
For example in this repo i just want encrypt a single class, how would i define that in webpack config? Can you please help.

[sanex3339]

Hi. This is plugin, so it works with output bundle files. In your case you can try to make this file as separate chunk with https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin and exclude every bundle/chunk except this one in plugin config.

[molimpio]

https://ourcodeworld.com/articles/read/607/how-to-obfuscate-javascript-code-with-node-js