Skip to content
This repository was archived by the owner on Dec 9, 2025. It is now read-only.

Commit a4fa0f4

Browse files
sligslig
committed
Fix the 'controlFlowFlattening' explanation and re-ordering of the options.
1 parent 15b96d6 commit a4fa0f4

2 files changed

Lines changed: 90 additions & 91 deletions

File tree

‎App/containers/OptionsContainer.js‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,19 @@ const Options = ({dispatch, options}) =>
4545
<Divider />
4646

4747
<Form.Checkbox
48-
label='Disable Console Output'
49-
checked={options.disableConsoleOutput}
50-
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DISABLE_CONSOLE_OUTPUT)) } />
51-
52-
<Divider />
53-
54-
<Form.Checkbox
55-
label='Debug Protection'
56-
checked={options.debugProtection}
57-
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DEBUG_PROTECTION)) } />
48+
label='Control Flow Flatteing'
49+
checked={options.controlFlowFlattening}
50+
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_CONTROL_FLOW_FLATTENING)) } />
5851

59-
<Form.Checkbox
60-
label='Debug Protection Interval'
61-
checked={options.debugProtectionInterval}
62-
disabled={!options.debugProtection}
63-
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DEBUG_PROTECTION_INTERVAL)) } />
52+
<Form.Input
53+
type='number'
54+
label='Control Flow Flattening Threshold'
55+
defaultValue={options.controlFlowFlatteningThreshold}
56+
min="0"
57+
max="1"
58+
step="0.1"
59+
onChange={(event) => dispatch(actions.setControlFlowFlatteningThreshold(parseFloat(event.target.value))) }
60+
disabled={!options.controlFlowFlattening} />
6461

6562
<Divider />
6663

@@ -113,46 +110,25 @@ const Options = ({dispatch, options}) =>
113110
<Grid.Column>
114111
<Segment basic>
115112

116-
<Form.Select
117-
label='Sourcemaps'
118-
value={options.sourceMapMode}
119-
onChange={(event, {value}) => dispatch(actions.setSourceMapMode(value)) }
120-
options={SOURCEMAP_OPTIONS} />
121-
122-
<Form.Input
123-
label='Source Map Base URL'
124-
disabled={!options.sourceMapSeparate}
125-
onBlur={(event) => dispatch(actions.setSourceMapBaseUrl(event.target.value)) }
126-
defaultValue={options.sourceMapBaseUrl}
127-
placeholder='http://localhost:3000' />
128-
129-
<Form.Input
130-
label='Source Map File Name'
131-
disabled={!options.sourceMapSeparate}
132-
onBlur={(event) => dispatch(actions.setSourceMapFileName(event.target.value)) }
133-
defaultValue={options.sourceMapFileName}
134-
placeholder='example' />
113+
<Form.Checkbox
114+
label='Disable Console Output'
115+
checked={options.disableConsoleOutput}
116+
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DISABLE_CONSOLE_OUTPUT)) } />
135117

136-
</Segment>
137-
</Grid.Column>
118+
<Divider />
138119

139-
<Grid.Column>
140-
<Segment basic>
120+
<Form.Checkbox
121+
label='Debug Protection'
122+
checked={options.debugProtection}
123+
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DEBUG_PROTECTION)) } />
141124

142125
<Form.Checkbox
143-
label='Control Flow Flatteing'
144-
checked={options.controlFlowFlattening}
145-
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_CONTROL_FLOW_FLATTENING)) } />
126+
label='Debug Protection Interval'
127+
checked={options.debugProtectionInterval}
128+
disabled={!options.debugProtection}
129+
onChange={() => dispatch(actions.toggleOption(types.TOGGLE_DEBUG_PROTECTION_INTERVAL)) } />
146130

147-
<Form.Input
148-
type='number'
149-
label='Control Flow Flattening Threshold'
150-
defaultValue={options.controlFlowFlatteningThreshold}
151-
min="0"
152-
max="1"
153-
step="0.1"
154-
onChange={(event) => dispatch(actions.setControlFlowFlatteningThreshold(parseFloat(event.target.value))) }
155-
disabled={!options.controlFlowFlattening} />
131+
<Divider />
156132

157133
<EntryInputContainer
158134
label='Domain lock'
@@ -173,6 +149,32 @@ const Options = ({dispatch, options}) =>
173149
</Segment>
174150
</Grid.Column>
175151

152+
<Grid.Column>
153+
<Segment basic>
154+
155+
<Form.Select
156+
label='Sourcemaps'
157+
value={options.sourceMapMode}
158+
onChange={(event, {value}) => dispatch(actions.setSourceMapMode(value)) }
159+
options={SOURCEMAP_OPTIONS} />
160+
161+
<Form.Input
162+
label='Source Map Base URL'
163+
disabled={!options.sourceMapSeparate}
164+
onBlur={(event) => dispatch(actions.setSourceMapBaseUrl(event.target.value)) }
165+
defaultValue={options.sourceMapBaseUrl}
166+
placeholder='http://localhost:3000' />
167+
168+
<Form.Input
169+
label='Source Map File Name'
170+
disabled={!options.sourceMapSeparate}
171+
onBlur={(event) => dispatch(actions.setSourceMapFileName(event.target.value)) }
172+
defaultValue={options.sourceMapFileName}
173+
placeholder='example' />
174+
175+
</Segment>
176+
</Grid.Column>
177+
176178
</Grid>
177179
</Form>
178180

‎templates/index.html‎

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -89,28 +89,25 @@ <h3>Sounds great!</h3>
8989
</tr>
9090

9191
<tr>
92-
<td class="collapsing">Disable Console Output</td>
92+
<td class="collapsing">Control Flow Flattening</td>
9393
<td>
94-
Disables the use of <code>console.log</code>, <code>console.info</code>, <code>console.error</code> and <code>console.warn</code> by replacing them with empty functions. This makes the use of the debugger harder.
95-
</td>
96-
</tr>
9794

98-
<tr>
99-
<td class="collapsing">Debug Protection</td>
100-
<td>
10195
<div class="ui tiny message">
102-
<p><i class="warning sign icon"></i> Can freeze your browser if you open the Developer Tools.</p>
96+
<p><i class="warning sign icon"></i> This option greatly affects the performance up to 1.5x slower runtime speed.</p>
10397
</div>
104-
<p>This option makes it almost impossible to use the <strong>Console</strong> tab of the Developer Tools (both on Google Chrome and Mozilla Firefox).</p>
98+
99+
<p>
100+
Enables code control flow flattening. Control flow flattening is a structure transformation of the source code that hinders program comprehension. See the docs on <a href="https://github.com/javascript-obfuscator/javascript-obfuscator#controlflowflattening" target="_new">JavaScript's obfuscator GH page</a> for an example of how the transformation works.
101+
</p>
105102

106103
<table class="ui definition table">
107104
<tbody>
108105

109106
<tr>
110-
<td class="collapsing">Debug Protection Interval</td>
107+
<td class="collapsing">Control Flow Flattening Threshold</td>
111108
<td>
112-
<p>If checked, an interval is used to force the debug mode on the <strong>Console</strong> tab, making it harder to use other features of the Developer Tools.</p>
113-
<p>How does it works? A special code that calls <code>debugger;</code> repeatedly is inserted throughout the obfuscated source code.</p>
109+
<p>You can use this setting to adjust the probability (from 0 to 1) that a <code>controlFlowFlattening</code> transformation will be applied to a node.</p>
110+
<p>In larger codebases it's advised to lower this value, because larger amounts of control flow transformations can increase the size of your code and slow it down.</p>
114111
</td>
115112
</tr>
116113

@@ -173,49 +170,28 @@ <h3>Sounds great!</h3>
173170
</tr>
174171

175172
<tr>
176-
<td class="collapsing">Source Map</td>
173+
<td class="collapsing">Disable Console Output</td>
177174
<td>
178-
<div class="ui tiny message">
179-
<p><i class="warning sign icon"></i> Be sure not to upload the obfuscated source code with the inline source map embedded on it, as it contains your original source code.</p>
180-
</div>
181-
182-
<p>Source maps can be useful to help you debug your obfuscated Java Script source code. If you want or need to debug in production, you can upload the separate source map file to a secret location and then point your browser there. <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps" target="_new">Read more about source maps on the Google Chrome Developer Tools website</a>.</p>
183-
184-
<strong>Inline Source Map</strong>
185-
<p>This embeds the source map of your source in the result of the obfuscated code. Useful if you just want to debug locally on your machine.</p>
186-
187-
<strong>Separate Source Map</strong>
188-
<p>This generates a separate file with the source map. Useful to debug code in production, as this enables you to upload the source map to a secret location on your server and then point your browser to use it.</p>
189-
190-
<p>Use the <strong>Source Map Base URL</strong> and <strong>Source Map File Name</strong> to customize the <code>sourceMappingURL</code> property that will get appended to the end of your obfuscated code.</p>
191-
192-
<p>For instance, if you set the <strong>Base URL</strong> to <code>"http://localhost:9000"</code> and <strong>File Name</strong> to <code>"example"</code>, you'll get: <code>//# sourceMappingURL=http://localhost:9000/example.js.map</code>. appended to the end of your obfuscated code.</p>
193-
175+
Disables the use of <code>console.log</code>, <code>console.info</code>, <code>console.error</code> and <code>console.warn</code> by replacing them with empty functions. This makes the use of the debugger harder.
194176
</td>
195177
</tr>
196178

197179
<tr>
198-
<td class="collapsing">Control Flow Flattening</td>
180+
<td class="collapsing">Debug Protection</td>
199181
<td>
200-
201182
<div class="ui tiny message">
202-
<p><i class="warning sign icon"></i> This option will decrease the performance of your code.</p>
183+
<p><i class="warning sign icon"></i> Can freeze your browser if you open the Developer Tools.</p>
203184
</div>
204-
205-
<p>
206-
Control flow flattening is a structure transformation of the source code that hinders program comprehension by removing functions definitions from its original locations and placing them inside a dispatch table. Arguments from those functions are also hidden inside a string array.
207-
</p>
208-
209-
<p>Since this transformation makes the affected nodes' function calls dynamic, it will likely disable optimizations that the JavaScript engine can do and will slow down your code.</p>
185+
<p>This option makes it almost impossible to use the <strong>Console</strong> tab of the Developer Tools (both on Google Chrome and Mozilla Firefox).</p>
210186

211187
<table class="ui definition table">
212188
<tbody>
213189

214190
<tr>
215-
<td class="collapsing">Control Flow Flattening Threshold</td>
191+
<td class="collapsing">Debug Protection Interval</td>
216192
<td>
217-
<p>You can use this setting to adjust the probability (from 0 to 1) that a <code>controlFlowFlattening</code> transformation will be applied to a node.</p>
218-
<p>In larger codebases it's advised to lower this value, because larger amounts of control flow transformations will increase the size of your code and slow it down significantly.</p>
193+
<p>If checked, an interval is used to force the debug mode on the <strong>Console</strong> tab, making it harder to use other features of the Developer Tools.</p>
194+
<p>How does it works? A special code that calls <code>debugger;</code> repeatedly is inserted throughout the obfuscated source code.</p>
219195
</td>
220196
</tr>
221197

@@ -242,6 +218,27 @@ <h3>Sounds great!</h3>
242218
</td>
243219
</tr>
244220

221+
<tr>
222+
<td class="collapsing">Source Map</td>
223+
<td>
224+
<div class="ui tiny message">
225+
<p><i class="warning sign icon"></i> Be sure not to upload the obfuscated source code with the inline source map embedded on it, as it contains your original source code.</p>
226+
</div>
227+
228+
<p>Source maps can be useful to help you debug your obfuscated Java Script source code. If you want or need to debug in production, you can upload the separate source map file to a secret location and then point your browser there. <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps" target="_new">Read more about source maps on the Google Chrome Developer Tools website</a>.</p>
229+
230+
<strong>Inline Source Map</strong>
231+
<p>This embeds the source map of your source in the result of the obfuscated code. Useful if you just want to debug locally on your machine.</p>
232+
233+
<strong>Separate Source Map</strong>
234+
<p>This generates a separate file with the source map. Useful to debug code in production, as this enables you to upload the source map to a secret location on your server and then point your browser to use it.</p>
235+
236+
<p>Use the <strong>Source Map Base URL</strong> and <strong>Source Map File Name</strong> to customize the <code>sourceMappingURL</code> property that will get appended to the end of your obfuscated code.</p>
237+
238+
<p>For instance, if you set the <strong>Base URL</strong> to <code>"http://localhost:9000"</code> and <strong>File Name</strong> to <code>"example"</code>, you'll get: <code>//# sourceMappingURL=http://localhost:9000/example.js.map</code>. appended to the end of your obfuscated code.</p>
239+
240+
</td>
241+
</tr>
245242

246243
</tbody>
247244
</table>

0 commit comments

Comments
 (0)