Updated to use the javascript-obfuscator@0.10.0 which includes the new Dead Code Injection option.

Author: slig

App/actions/index.js

@@ -87,3 +87,8 @@ export const setControlFlowFlatteningThreshold = (threshold) => ({
   'type': types.SET_CONTROL_FLOW_FLATTENING_THRESHOLD,
   threshold
 });
+
+export const setDeadCodeInjectionThreshold = (threshold) => ({
+  'type': types.SET_DEAD_CODE_INJECTION_THRESHOLD,
+  threshold
+});

App/constants/ActionTypes.js

@@ -32,3 +32,8 @@ export const SET_SEED = 'SET_SEED'
 
 export const SET_CONTROL_FLOW_FLATTENING_THRESHOLD = 'SET_CONTROL_FLOW_FLATTENING_THRESHOLD'
 export const TOGGLE_CONTROL_FLOW_FLATTENING = 'TOGGLE_CONTROL_FLOW_FLATTENING'
+
+export const SET_DEAD_CODE_INJECTION_THRESHOLD = 'SET_DEAD_CODE_INJECTION_THRESHOLD'
+export const TOGGLE_DEAD_CODE_INJECTION = 'TOGGLE_DEAD_CODE_INJECTION'
+
+export const TOGGLE_MANGLE = 'TOGGLE_MANGLE'

App/containers/OptionsContainer.js

@@ -42,6 +42,10 @@ const Options = ({dispatch, options}) =>
             checked={options.selfDefending}
             onChange={() => dispatch(actions.toggleOption(types.TOGGLE_SELF_DEFENDING)) } />
 
+          <Form.Checkbox
+            label='Mangle Variable Names'
+            checked={options.mangle}
+            onChange={() => dispatch(actions.toggleOption(types.TOGGLE_MANGLE)) } />
           <Divider />
 
           <Form.Checkbox
@@ -61,14 +65,21 @@ const Options = ({dispatch, options}) =>
 
           <Divider />
 
+          <Form.Checkbox
+            label='Dead Code Injection'
+            checked={options.deadCodeInjection}
+            onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DEAD_CODE_INJECTION)) } />
+
           <Form.Input
             type='number'
-            label='Seed'
-            defaultValue={options.seed}
+            label='Dead Code Injection Threshold'
+            defaultValue={options.deadCodeInjectionThreshold}
             min="0"
-            max="99999999"
-            step="1"
-            onChange={(event) => dispatch(actions.setSeed(parseInt(event.target.value))) } />
+            max="1"
+            step="0.1"
+            onChange={(event) => dispatch(actions.setDeadCodeInjectionThreshold(parseFloat(event.target.value))) }
+            disabled={!options.deadCodeInjection} />
+
 
         </Segment>
       </Grid.Column>
@@ -172,6 +183,17 @@ const Options = ({dispatch, options}) =>
             defaultValue={options.sourceMapFileName}
             placeholder='example' />
 
+          <Divider />
+
+          <Form.Input
+            type='number'
+            label='Seed'
+            defaultValue={options.seed}
+            min="0"
+            max="99999999"
+            step="1"
+            onChange={(event) => dispatch(actions.setSeed(parseInt(event.target.value))) } />
+
         </Segment>
       </Grid.Column>
 

App/index.js

@@ -24,6 +24,10 @@ if (process.env.NODE_ENV !== 'production') {
 
 const persistedState = loadState();
 
+// should not be in the localState, but was saved there by a bug
+// now we need this here because some users will have this on their localState.
+delete persistedState.options.hydrated;
+
 const store = createStore(
   reducer,
   persistedState,
@@ -33,8 +37,10 @@ const store = createStore(
 // There's no need to throttle the saveState function because
 // we don't change the state very often
 store.subscribe(() => {
+  const options = store.getState().options;
+  delete options.hydrated;
   saveState({
-    options: store.getState().options
+    options,
   });
 })
 

App/reducers/options.js

@@ -34,6 +34,11 @@ const initialState = {
 
   controlFlowFlatteningThreshold: 0.75,
   controlFlowFlattening: false,
+
+  deadCodeInjectionThreshold: 0.4,
+  deadCodeInjection: false,
+
+  mangle: false,
 }
 
 export const options = (state = initialState, action) => {
@@ -48,43 +53,47 @@ export const options = (state = initialState, action) => {
 
   switch (action.type) {
 
-    case types.TOGGLE_COMPACT_CODE:
+    case types.TOGGLE_COMPACT_CODE: {
       const compact = !state.compact;
       return {
         ...state,
         compact,
         selfDefending: state.selfDefending && compact,
       }
+    }
 
-    case types.TOGGLE_SELF_DEFENDING:
+    case types.TOGGLE_SELF_DEFENDING: {
       const selfDefending = !state.selfDefending;
       return {
         ...state,
         selfDefending,
         compact: state.compact || selfDefending,
       }
+    }
 
     case types.TOGGLE_DISABLE_CONSOLE_OUTPUT:
       return {
         ...state,
         disableConsoleOutput: !state.disableConsoleOutput,
       }
 
-    case types.TOGGLE_DEBUG_PROTECTION:
+    case types.TOGGLE_DEBUG_PROTECTION: {
       const debugProtection = !state.debugProtection;
       return {
         ...state,
         debugProtection,
         debugProtectionInterval: state.debugProtectionInterval && debugProtection,
       }
+    }
 
     case types.TOGGLE_DEBUG_PROTECTION_INTERVAL:
       return {
         ...state,
         debugProtectionInterval: !state.debugProtectionInterval,
       }
 
-    case types.TOGGLE_STRING_ARRAY:
+    case types.TOGGLE_STRING_ARRAY: {
+      // Also change the TOGGLE_DEAD_CODE_INJECTION below if changed
       const stringArray = !state.stringArray;
       return {
         ...state,
@@ -93,6 +102,7 @@ export const options = (state = initialState, action) => {
         stringArrayThresholdEnabled: stringArray,
         stringArrayEncodingEnabled: stringArray,
       }
+    }
 
     case types.TOGGLE_ROTATE_STRING_ARRAY:
       return {
@@ -112,14 +122,15 @@ export const options = (state = initialState, action) => {
         stringArrayThreshold: action.threshold
       }
 
-    case types.SET_SOURCEMAP_MODE:
+    case types.SET_SOURCEMAP_MODE: {
       const mode = action.mode;
       return {
         ...state,
         sourceMap: mode !== SOURCEMAP_OFF,
         sourceMapMode: mode,
         sourceMapSeparate: mode === SOURCEMAP_SEPARATE
       }
+    }
 
     case types.SET_SOURCEMAP_BASE_URL:
       return {
@@ -133,7 +144,7 @@ export const options = (state = initialState, action) => {
         sourceMapFileName: action.fileName
       }
 
-    case types.ADD_DOMAIN_LOCK:
+    case types.ADD_DOMAIN_LOCK: {
       const domain = action.domain;
       if (state.domainLock.indexOf(domain) !== -1)
         return state;
@@ -142,14 +153,15 @@ export const options = (state = initialState, action) => {
         ...state,
         domainLock: [...state.domainLock, domain],
       }
+    }
 
     case types.REMOVE_DOMAIN_LOCK:
       return {
         ...state,
         domainLock: state.domainLock.filter((domain) => domain !== action.domain),
       }
 
-    case types.ADD_RESERVED_NAME:
+    case types.ADD_RESERVED_NAME: {
       const name = action.name;
       if (state.reservedNames.indexOf(name) !== -1)
         return state;
@@ -158,6 +170,7 @@ export const options = (state = initialState, action) => {
         ...state,
         reservedNames: [...state.reservedNames, name],
       }
+    }
 
     case types.REMOVE_RESERVED_NAME:
       return {
@@ -183,6 +196,32 @@ export const options = (state = initialState, action) => {
         controlFlowFlattening: !state.controlFlowFlattening
       }
 
+    case types.SET_DEAD_CODE_INJECTION_THRESHOLD:
+      return {
+        ...state,
+        deadCodeInjectionThreshold: action.threshold
+      }
+
+    case types.TOGGLE_DEAD_CODE_INJECTION: {
+      // Also change the TOGGLE_STRING_ARRAY above if changed
+      const deadCodeInjection = !state.deadCodeInjection;
+      const stringArray = state.stringArray || deadCodeInjection;
+      return {
+        ...state,
+        stringArray,
+        deadCodeInjection: deadCodeInjection,
+        rotateStringArrayEnabled: stringArray,
+        stringArrayThresholdEnabled: stringArray,
+        stringArrayEncodingEnabled: stringArray
+      }
+    }
+
+    case types.TOGGLE_MANGLE:
+      return {
+        ...state,
+        mangle: !state.mangle
+      }
+
     default:
       return state
   }

package.json

@@ -30,7 +30,7 @@
     "extract-text-webpack-plugin": "^2.0.0-beta",
     "graceful-fs": "^4.1.9",
     "inert": "^4.0.2",
-    "javascript-obfuscator": "0.9.1",
+    "javascript-obfuscator": "0.10.0",
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "react": "^15.3.1",

templates/index.html

@@ -27,7 +27,7 @@
         <div class="column">
           <div class="ui basic segment">
             <h1>JavaScript Obfuscator Tool</h1>
-            <p>A free and efficient obfuscator for JavaScript (including ES6). Make your code harder to copy and prevent people from stealing your work. This tool is a Web UI to the excellent (and open source) <a href="https://github.com/javascript-obfuscator/javascript-obfuscator" target="_new">JavaScript Obfuscator</a> created by Timofey Kachalov.</p>
+            <p>A free and efficient obfuscator for JavaScript (including ES6). Make your code harder to copy and prevent people from stealing your work. This tool is a Web UI to the excellent (and open source) <code><a href="https://github.com/javascript-obfuscator/javascript-obfuscator" target="_new">JavaScript Obfuscator</a>@0.10.0</code> created by Timofey Kachalov.</p>
           </div>
         </div>
       </div>
@@ -88,6 +88,13 @@ <h3>Sounds great!</h3>
                 </td>
               </tr>
 
+              <tr>
+                <td class="collapsing">Mangle Variable Names</td>
+                <td>
+                  Mangles the variable names. (For instance, instead of having this random pattern <code>0x123456</code>, they become <code>a</code>, <code>b</code>, and so on.)
+                </td>
+              </tr>
+
               <tr>
                 <td class="collapsing">Control Flow Flattening</td>
                 <td>
@@ -118,9 +125,32 @@ <h3>Sounds great!</h3>
               </tr>
 
               <tr>
-                <td class="collapsing">Seed</td>
+                <td class="collapsing">Dead Code Injection</td>
                 <td>
-                  <p>By default (<code>seed = 0</code>), each time you obfuscate your code you'll get a new result (i.e: different variable names, different variables inserted into the <code>stringArray</code>, etc). If you want repeatable results, set the <code>seed</code> to a specific integer.</p>
+
+                  <div class="ui tiny message">
+                    <p><i class="warning sign icon"></i> This option increases the size of the obfuscated code greatly (up to 200%).</p>
+                  </div>
+
+                  <p>
+                    This feature adds random blocks of dead code (i.e: code that won't be executed) to the obfuscated output, making it harder to be reverserd-engineered. See the docs on <a href="https://github.com/javascript-obfuscator/javascript-obfuscator#deadcodeinjection" target="_new">JavaScript's obfuscator GH page</a> for an example of how this feature works.
+                  </p>
+
+                  <p><small>requires the <strong>String Array</strong> option.</small></p>
+
+                  <table class="ui definition table">
+                    <tbody>
+
+                      <tr>
+                        <td class="collapsing">Dead Code Injection Threshold</td>
+                        <td>
+                          <p>You can use this setting to adjust the probability (from 0 to 1) that a node will be affected by the <code>deadCodeInjection</code> option.</p>
+                        </td>
+                      </tr>
+
+                    </tbody>
+                  </table>
+
                 </td>
               </tr>
 
@@ -240,6 +270,14 @@ <h3>Sounds great!</h3>
                 </td>
               </tr>
 
+              <tr>
+                <td class="collapsing">Seed</td>
+                <td>
+                  <p>By default (<code>seed = 0</code>), each time you obfuscate your code you'll get a new result (i.e: different variable names, different variables inserted into the <code>stringArray</code>, etc). If you want repeatable results, set the <code>seed</code> to a specific integer.</p>
+                </td>
+              </tr>
+
+
             </tbody>
           </table>