[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.