Obfuscation of my code

[mark0978]

I'm looking at the code I'm writing using SmartClient (not SmartGWT) and wondering just how much good obfuscation will do.

here is the input code

isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});

isc.ToolStripMenuButton.create({
    ID: "menuButton",
    title: "File",   
    menu: menu
});

isc.ToolStripButton.create({
    ID: "printButton",    
    icon: "other/printer.png",  
    title: "print"
    
});
isc.ToolStripButton.create({
    ID: "alignLeft",   
    icon: "[SKIN]/RichTextEditor/text_align_left.png",    
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "alignRight",   
    icon: "[SKIN]/RichTextEditor/text_align_right.png", 
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "alignCenter",   
    icon: "[SKIN]/RichTextEditor/text_align_center.png", 
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "bold",    
    icon: "[SKIN]/RichTextEditor/text_bold.png",    
    actionType: "checkbox"
});
isc.ToolStripButton.create({
    ID: "italics",    
    icon: "[SKIN]/RichTextEditor/text_italic.png",
    actionType: "checkbox"
});
isc.ToolStripButton.create({
    ID: "underlined",    
    icon: "[SKIN]/RichTextEditor/text_underline.png", 
    actionType: "checkbox"
});

isc.DynamicForm.create({
    ID: "fontSelector",
    showResizeBar:true,
    width:100, minWidth:50,
    numCols:1,
    fields: [
        {name: "selectFont", showTitle: false, width:"*",
         valueMap: {
            "courier": "<span style='font-family:courier'>Courier</span>",
            "verdana": "<span style='font-family:verdana'>Verdana</span>",
            "times": "<span style='font-family:times'>Times</span>"
         }, defaultValue:"courier" }
    ]    
});

isc.DynamicForm.create({
    ID: "zoomSelector",
    width:100, minWidth:50,
    numCols:1,
    fields: [
        {name: "selectZoom", showTitle: false, width:"*",
         valueMap: ["50%", "75%", "100%", "150%", "200%", "Fit"],
         defaultValue:"100%" }
    ]
});

isc.ToolStrip.create({
    width: 450, height:24, 
    members: [menuButton, "separator", printButton, 
              "resizer", bold, italics, underlined, 
              "separator",
              alignLeft, alignRight, alignCenter,
              "separator",
              fontSelector, "resizer", zoomSelector]
});

and here is the obfuscated version using http://marijnhaverbeke.nl/uglifyjs

isc.Menu.create({ID:"menu",autoDraw:!1,showShadow:!0,shadowDepth:10,data:[{title:"New",keyTitle:"Ctrl+N",icon:"icons/16/document_plain_new.png"},{title:"Open",keyTitle:"Ctrl+O",icon:"icons/16/folder_out.png"},{isSeparator:!0},{title:"Save",keyTitle:"Ctrl+S",icon:"icons/16/disk_blue.png"},{title:"Save As",icon:"icons/16/save_as.png"},{isSeparator:!0},{title:"Recent Documents",icon:"icons/16/folder_document.png",submenu:[{title:"data.xml",checked:!0},{title:"Component Guide.doc"},{title:"SmartClient.doc",checked:!0},{title:"AJAX.doc"}]},{isSeparator:!0},{title:"Export as...",icon:"icons/16/export1.png",submenu:[{title:"XML"},{title:"CSV"},{title:"Plain text"}]},{isSeparator:!0},{title:"Print",enabled:!1,keyTitle:"Ctrl+P",icon:"icons/16/printer3.png"}]}),isc.ToolStripMenuButton.create({ID:"menuButton",title:"File",menu:menu}),isc.ToolStripButton.create({ID:"printButton",icon:"other/printer.png",title:"print"}),isc.ToolStripButton.create({ID:"alignLeft",icon:"[SKIN]/RichTextEditor/text_align_left.png",actionType:"radio",radioGroup:"textAlign"}),isc.ToolStripButton.create({ID:"alignRight",icon:"[SKIN]/RichTextEditor/text_align_right.png",actionType:"radio",radioGroup:"textAlign"}),isc.ToolStripButton.create({ID:"alignCenter",icon:"[SKIN]/RichTextEditor/text_align_center.png",actionType:"radio",radioGroup:"textAlign"}),isc.ToolStripButton.create({ID:"bold",icon:"[SKIN]/RichTextEditor/text_bold.png",actionType:"checkbox"}),isc.ToolStripButton.create({ID:"italics",icon:"[SKIN]/RichTextEditor/text_italic.png",actionType:"checkbox"}),isc.ToolStripButton.create({ID:"underlined",icon:"[SKIN]/RichTextEditor/text_underline.png",actionType:"checkbox"}),isc.DynamicForm.create({ID:"fontSelector",showResizeBar:!0,width:100,minWidth:50,numCols:1,fields:[{name:"selectFont",showTitle:!1,width:"*",valueMap:{courier:"<span style='font-family:courier'>Courier</span>",verdana:"<span style='font-family:verdana'>Verdana</span>",times:"<span style='font-family:times'>Times</span>"},defaultValue:"courier"}]}),isc.DynamicForm.create({ID:"zoomSelector",width:100,minWidth:50,numCols:1,fields:[{name:"selectZoom",showTitle:!1,width:"*",valueMap:["50%","75%","100%","150%","200%","Fit"],defaultValue:"100%"}]}),isc.ToolStrip.create({width:450,height:24,members:[menuButton,"separator",printButton,"resizer",bold,italics,underlined,"separator",alignLeft,alignRight,alignCenter,"separator",fontSelector,"resizer",zoomSelector]})

If I were to add the newlines back in, the UI of the code is well, completely understandable. Is there some other way to do smartClient code that wouldn't leave my code out in the open so much?

We are still in the eval phase, and I'm not wanting to go to far down a path that has these kind of problems. Yes, our logic is not all the UI code, but considering the fact that anyone could buy/use smartClient and then drop our UI code in is still a bit scary.....

[solstice]

That's not obfuscation, that's compression. What you have done is simply removed the whitespace in your code. Obfuscation would give you something closer to this:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('f.o.h({n:"w",B:a,g:2,i:k,b:[{0:"y",7:"8+N",1:"4/5/j.3"},{0:"l",7:"8+O",1:"4/5/m.3"},{6:2},{0:"e",7:"8+p",1:"4/5/q.3"},{0:"e r",1:"4/5/s.3"},{6:2},{0:"t u",1:"4/5/v.3",c:[{0:"b.x",d:2},{0:"z A.9"},{0:"C.9",d:2},{0:"D.9"}]},{6:2},{0:"E F...",1:"4/5/G.3",c:[{0:"H"},{0:"I"},{0:"J K"}]},{6:2},{0:"L",M:a,7:"8+P",1:"4/5/Q.3"}]});',53,53,'title|icon|true|png|icons|16|isSeparator|keyTitle|Ctrl|doc|false|data|submenu|checked|Save|isc|showShadow|create|shadowDepth|document_plain_new|10|Open|folder_out|ID|Menu|S|disk_blue|As|save_as|Recent|Documents|folder_document|menu|xml|New|Component|Guide|autoDraw|SmartClient|AJAX|Export|as|export1|XML|CSV|Plain|text|Print|enabled||||printer3'.split('|'),0,{}))

There are a couple of reasons why you should not bother with obfuscation. The first is that it is very easy to unobfuscate. If someone wants to decrypt your code, it's trivial to do.

Second, obfuscation relies on JavaScript's eval() function. This will significantly impact your application's performance, is known to have issues on some platforms and some obfuscators are known to break code. If you must obfuscate your code, make sure that your research some of the Dos and Don'ts of JavaScript obfuscation.