title: Security considerations using "new Function(...)" (during rendertime, expression coming from my Javascript sources)
body: <p>I'd like to use <code>new Function(...)</code> to generate a function from very reduced code. I'l like to do this to </p>
  
  <ul>
  <li>avoid parsing the expression on my own and</li>
  <li>being as flexible as possible.</li>
  </ul>
  
  <p>I avoid <code>eval()</code> whenever possible. But I'm not sure if it's secure enough to use <code>new Function(...)</code> which is also known as being liable to security holes.</p>
  
  <h2>Background</h2>
  
  <p>I want to manage the states of menu buttons. So, while defining the buttons, I'd like to write something like</p>
  
  <pre><code> {
   ..., // More button definition
   state: "isInEditmode &amp;&amp; (isWidgetSelected || isCursorInWidget),
   ...
   }
  </code></pre>
  
  <p>While handling the statechange during several events I'll check (summarize) the states of the <em>current</em> overall state object against those in the <code>states</code> attribute.</p>
  
  <p>So I'll generate a Function during rendertime and attaching it as a DOM object attribute, <em>not DOM attribute</em> this way:</p>
  
  <pre><code> ...
   $el.stateFn = new Function("stateObj", "with (stateObj) {return " + item.state + ";}");
   ...
  </code></pre>
  
  <p>Testing state:</p>
  
  <pre><code> visible = $el.stateFn.call(currentStates, currentStates);
  </code></pre>
  
  <p>The <code>with</code> statement helps me providing the current <code>state</code> object's attributes as variables so that the above expression does not need something like <code>obj.isInEditmode</code>.</p>
  
  <h2>Security question</h2>
  
  <p>In my opinion this does not introduce security holes as the function attached to the DOM object is generated during render time and read from source. Or am I wrong? Should I avoid this?</p>
  
  <p>Performance hints are appreciated (comment) (I think as long as I evaluating a new <code>Function</code> once during render time, this is acceptable).</p>
  
  <h1>Edit 1</h1>
  
  <ul>
  <li>I'm using Backbone.js. Using another Framework is out of question.</li>
  <li>Some menu items need to be bound to different or even multiple models.</li>
  <li>Delegation (or facade / proxy?) models are considerable.</li>
  </ul>