[Solved] How to achieve obfuscation like https://obfuscator.io/ in CLI



  • (window["webpackJsonp"] = window["webpackJsonp"] || []).push([
        ["1731436c"], {
            "47ef": function(e, t, o) {},
            e725: function(e, t, o) {
                "use strict";
                var n = o("47ef"),
                    i = o.n(n);
                i.a
            },
            ea31: function(e, t, o) {
                "use strict";
                o.r(t);
                var n = function() {
                        var e = this,
                            t = e.$createElement,
                            o = e._self._c || t;
                        return o("q-page", [
                            [o("div", {
                                staticClass: "q-pa-sm"
                            }, [o("q-expansion-item", {
                                attrs: {
                                    "expand-separator": "",
                                    icon: "check_box",
                                    label: "Exam groups",
                                    group: "leaveattendancesetup",
                                    "header-class": e.isLightMode ? "text-black" : "text-white"
                                },
                                on: {
                                    "before-show": function(t) {
                                        return e.getExamgroups()
                                    }
                                }
                            }, [o("div", {
                                staticStyle: {
                                    "max-width": "1500px"
                                }
                            }, [o("q-toolbar", {
                                class: e.isLightMode ? "light_toolbar" : "dark_toolbar"
                            }, [o("q-toolbar-title", [e._v("Groups")]), o("q-btn", {
                                staticClass: "q-ma-md",
                                attrs: {
                                    loading: e.loading,
                                    rounded: "",
                                    color: "accent",
                                    size: "sm",
                                    icon: "add"
                                },
                                on: {
                                    click: function(t) {
                                        return e.prompt("", "Create", "Enter new group", "createExamgroup", "")
                                    }
                                }
                            })], 1), o("q-list", {
                                staticClass: "rounded-borders transhalf",
                                attrs: {
                                    separator: ""
                                }
                            }, e._l(e.examgroups, (function(t) {
                                return o("q-item", {
                                    key: t.attendance_id
                                }, [o("q-item-section", [o("q-chip", [o("div", {
                                    staticClass: "text-weight-medium"
                                }, [e._v(e._s(t.name))]), o("q-separator", {
                                    attrs: {
                                        inset: ""
                                    }
                                })], 1)], 1), o("q-item-section", {
                                    attrs: {
                                        side: ""
                                    }
                                }, [o("q-btn", {
                                    class: e.isLightMode ? "" : "halfTransWhiteBg",
                                    attrs: {
                                        round: "",
                                        color: "accent",
                                        flat: "",
                                        icon: "edit",
                                        size: "sm"
                                    },
                                    on: {
                                        click: function(o) {
                                            return e.prompt(t.name, "Rename", "Enter new group name", "renameExamgroup", t.id)
                                        }
                                    }
                                })], 1), o("q-item-section", {
                                    attrs: {
                                        side: ""
                                    }
                                }, [o("q-btn", {
                                    class: e.isLightMode ? "" : "halfTransWhiteBg",
                                    attrs: {
                                        round: "",
                                        color: "negative",
                                        flat: "",
                                        icon: "delete",
                                        size: "sm"
                                    },
                                    on: {
                                        click: function(o) {
                                            return e.deleteit(t.id, "group")
                                        }
                                    }
                                })], 1)], 1)
                            })), 1)], 1)])], 1)]
                        ], 2)
                    },
                    i = [],
                    a = {
                        data: function() {
                            return {
                                loading: !1,
                                attendancename: "",
                                examgroups: null
                            }
                        },
                        mounted: function() {},
                        created: function() {},
                        beforeRouteEnter: function(e, t, o) {
                            o((function(e) {
                                !0 !== e.$store.getters["example/getAllPermission"]().Academic_Setup && o(t)
                            }))
                        },
                        computed: {
                            isLightMode: function() {
                                return this.$store.getters["example/getisLightmode"]
                            },
                            permissions: function() {
                                return this.$store.getters["example/getAllPermission"]()
                            }
                        },
                        watch: {},
                        methods: {
                            getExamgroups: function() {
                                var e = this;
                                this.showLoading(), this.$axios.get("ddd/api/acad/examgroup").then((function(e) {
                                    return e.data
                                })).then((function(t) {
                                    e.examgroups = t.data, e.$q.loading.hide()
                                })).catch((function(t) {
                                    e.$q.loading.hide(), e.relogin_mixin(t)
                                }))
                            },
                            renameExamgroupName: function(e, t) {
                                var o = this;
                                this.showLoading(), this.$axios.put("ddd/api/acad/examgroup", {
                                    data: {
                                        name: t,
                                        id: e
                                    }
                                }).then((function(e) {
                                    return e.data
                                })).then((function(e) {
                                    o.getExamgroups(), o.$q.loading.hide(), o.$q.notify({
                                        position: "top",
                                        color: "positive",
                                        message: "Group successfully renamed"
                                    })
                                })).catch((function(e) {
                                    o.$q.loading.hide(), o.$q.notify({
                                        position: "top",
                                        color: "negative",
                                        message: "Failed"
                                    }), o.relogin_mixin(e)
                                }))
                            },
                            createExamgroup: function(e) {
                                var t = this;
                                this.showLoading(), this.$axios.post("ddd/api/acad/examgroup", {
                                    data: {
                                        name: e
                                    }
                                }).then((function(e) {
                                    return e.data
                                })).then((function(e) {
                                    t.getExamgroups(), t.$q.notify({
                                        position: "top",
                                        color: "positive",
                                        message: "Group successfully created"
                                    })
                                })).catch((function(e) {
                                    t.$q.loading.hide(), t.$q.notify({
                                        position: "top",
                                        color: "negative",
                                        message: "Failed"
                                    }), t.relogin_mixin(e)
                                }))
                            },
                            deleteGroup: function(e) {
                                var t = this;
                                this.showLoading(), this.$axios.delete("ddd/api/acad/examgroup/".concat(e)).then((function(e) {
                                    return e.data
                                })).then((function(e) {
                                    t.getExamgroups(), t.$q.loading.hide(), t.$q.notify({
                                        position: "top",
                                        color: "positive",
                                        message: "Group successfully deleted"
                                    })
                                })).catch((function(e) {
                                    t.$q.loading.hide(), t.$q.notify({
                                        position: "top",
                                        color: "negative",
                                        message: "Failed"
                                    }), t.relogin_mixin(e)
                                }))
                            },
                            prompt: function(e, t, o, n, i) {
                                var a = this;
                                this.$q.dialog({
                                    title: t,
                                    message: o,
                                    prompt: {
                                        model: e,
                                        type: "text"
                                    },
                                    cancel: !0,
                                    persistent: !0,
                                    color: "accent"
                                }).onOk((function(e) {
                                    "renameExamgroup" === n && a.renameExamgroupName(i, e), "createExamgroup" === n && a.createExamgroup(e)
                                })).onCancel((function() {
                                    console.log(">>>> Cancel")
                                }))
                            },
                            deleteit: function(e, t) {
                                var o = this;
                                this.$q.dialog({
                                    title: "Confirm",
                                    message: "Would you really like to delete?",
                                    ok: {
                                        push: !0
                                    },
                                    cancel: {
                                        color: "negative"
                                    },
                                    persistent: !0
                                }).onOk((function() {
                                    console.log(">>>> OK"), "group" === t && o.deleteGroup(e)
                                })).onOk((function() {
                                    console.log(">>>> second OK catcher")
                                })).onCancel((function() {
                                    console.log(">>>> Cancel")
                                }))
                            }
                        }
                    },
                    s = a,
                    r = (o("e725"), o("2877")),
                    c = Object(r["a"])(s, n, i, !1, null, "84d26612", null);
                t["default"] = c.exports
            }
        }
    ]);
    

    Above code is generated in dist/spa/js on quasar build command. But anyone can inspect this code in browser and get the idea of working. On the other hand(see code below) i used https://obfuscator.io/ to obfuscate the code of .vue file inside script tag. i want the result like this directly from CLI without manual work. How can i achieve this.

    var a = ['post', 'Group\x20successfully\x20created', 'delete', 'ddd/api/acad/examgroup/', 'Group\x20successfully\x20deleted', 'dialog', 'accent', 'renameExamgroup', 'renameExamgroupName', 'createExamgroup', 'onCancel', '>>>>\x20Cancel', 'Confirm', 'Would\x20you\x20really\x20like\x20to\x20delete?', 'log', '>>>>\x20OK', 'deleteGroup', 'onOk', '>>>>\x20second\x20OK\x20catcher', 'example/getAllPermission', 'Academic_Setup', '$store', 'getters', 'example/getisLightmode', 'showLoading', '$axios', 'get', 'ddd/api/acad/examgroup', 'then', 'data', 'examgroups', 'loading', 'hide', 'catch', 'relogin_mixin', 'put', 'getExamgroups', 'top', 'positive', 'notify', 'negative', 'Failed'];
    (function(c, d) {
        var e = function(f) {
            while (--f) {
                c['push'](c['shift']());
            }
        };
        e(++d);
    }(a, 0xbb));
    var b = function(c, d) {
        c = c - 0x0;
        var e = a[c];
        return e;
    };
    export default {
        'data'() {
            return {
                'loading': ![],
                'attendancename': '',
                'examgroups': null
            };
        },
        'mounted'() {},
        'created'() {},
        'beforeRouteEnter'(c, d, e) {
            e(f => {
                if (f['$store']['getters'][b('0x0')]()[b('0x1')] !== !![]) {
                    e(d);
                }
            });
        },
        'computed': {
            'isLightMode'() {
                return this[b('0x2')][b('0x3')][b('0x4')];
            },
            'permissions'() {
                return this[b('0x2')][b('0x3')][b('0x0')]();
            }
        },
        'watch': {},
        'methods': {
            'getExamgroups'() {
                this[b('0x5')]();
                this[b('0x6')][b('0x7')](b('0x8'))[b('0x9')](g => g[b('0xa')])['then'](h => {
                    this[b('0xb')] = h[b('0xa')];
                    this['$q'][b('0xc')][b('0xd')]();
                })[b('0xe')](i => {
                    this['$q'][b('0xc')][b('0xd')]();
                    this[b('0xf')](i);
                });
            },
            'renameExamgroupName'(j, k) {
                this['showLoading']();
                this[b('0x6')][b('0x10')](b('0x8'), {
                    'data': {
                        'name': k,
                        'id': j
                    }
                })[b('0x9')](l => l['data'])['then'](m => {
                    this[b('0x11')]();
                    this['$q']['loading'][b('0xd')]();
                    this['$q']['notify']({
                        'position': b('0x12'),
                        'color': b('0x13'),
                        'message': 'Group\x20successfully\x20renamed'
                    });
                })[b('0xe')](n => {
                    this['$q'][b('0xc')]['hide']();
                    this['$q'][b('0x14')]({
                        'position': 'top',
                        'color': b('0x15'),
                        'message': b('0x16')
                    });
                    this[b('0xf')](n);
                });
            },
            'createExamgroup'(o) {
                this['showLoading']();
                this[b('0x6')][b('0x17')](b('0x8'), {
                    'data': {
                        'name': o
                    }
                })[b('0x9')](p => p[b('0xa')])[b('0x9')](q => {
                    this[b('0x11')]();
                    this['$q'][b('0x14')]({
                        'position': b('0x12'),
                        'color': b('0x13'),
                        'message': b('0x18')
                    });
                })['catch'](r => {
                    this['$q'][b('0xc')][b('0xd')]();
                    this['$q'][b('0x14')]({
                        'position': b('0x12'),
                        'color': b('0x15'),
                        'message': b('0x16')
                    });
                    this[b('0xf')](r);
                });
            },
            'deleteGroup'(s) {
                this[b('0x5')]();
                this[b('0x6')][b('0x19')](b('0x1a') + s)[b('0x9')](t => t[b('0xa')])[b('0x9')](u => {
                    this[b('0x11')]();
                    this['$q'][b('0xc')][b('0xd')]();
                    this['$q'][b('0x14')]({
                        'position': 'top',
                        'color': 'positive',
                        'message': b('0x1b')
                    });
                })[b('0xe')](v => {
                    this['$q'][b('0xc')][b('0xd')]();
                    this['$q'][b('0x14')]({
                        'position': b('0x12'),
                        'color': b('0x15'),
                        'message': b('0x16')
                    });
                    this[b('0xf')](v);
                });
            },
            'prompt'(w, x, y, z, A) {
                this['$q'][b('0x1c')]({
                    'title': x,
                    'message': y,
                    'prompt': {
                        'model': w,
                        'type': 'text'
                    },
                    'cancel': !![],
                    'persistent': !![],
                    'color': b('0x1d')
                })['onOk'](B => {
                    if (z === b('0x1e')) {
                        this[b('0x1f')](A, B);
                    }
                    if (z === 'createExamgroup') {
                        this[b('0x20')](B);
                    }
                })[b('0x21')](() => {
                    console['log'](b('0x22'));
                });
            },
            'deleteit'(C, D) {
                this['$q']['dialog']({
                    'title': b('0x23'),
                    'message': b('0x24'),
                    'ok': {
                        'push': !![]
                    },
                    'cancel': {
                        'color': 'negative'
                    },
                    'persistent': !![]
                })['onOk'](() => {
                    console[b('0x25')](b('0x26'));
                    if (D === 'group') {
                        this[b('0x27')](C);
                    }
                })[b('0x28')](() => {
                    console['log'](b('0x29'));
                })[b('0x21')](() => {
                    console[b('0x25')](b('0x22'));
                });
            }
        }
    };
    

    i have some creative code for in browser document(.docx) editing/modification, which i want to protect from naive competitors.



  • Use npm install --save-dev webpack-obfuscator.

    Here’s a sample from my quasar.conf.js:

    let JavaScriptObfuscator=require('webpack-obfuscator');
    ...
    build:{
    ...
    extendWebpack(cfg,{isServer,isClient}){
    if(!ctx.dev&&!ctx.debug){
    cfg.plugins.push(new JavaScriptObfuscator({
    debugProtection: true,
    debugProtectionInterval: true,
    rotateStringArray: true,
    renameGlobals: true,
    stringArrayEncoding: 'rc4',
    stringArrayThreshold: 1
    }));
    ...
    }
    ...
    }
    


  • @walfin Thanks for quick help. i will try this and let you know.🙂



  • @walfin It worked as expected. Thank you so much. Can i include service-worker also in obfuscation?



  • Don’t know, haven’t tried before. I think for that you may have to manually obfuscate the service worker js file since it is a separate file. Or maybe there’s some other rule you can add to webpack for that.


Log in to reply