title: Most secure javascript JSON Inline technique
body: <p>I'm using <em>varnish+esi</em> to return external <em>json</em> content from a RESTFul API. 
  This technique allows me to manage request and refresh data without using webserver resources for each request.</p>
  
  <p>e.g:</p>
  
  <pre><code>&lt;head&gt;
  .... 
  &lt;script&gt; 
   var data = &lt;esi:include src='apiurl/data'&gt;;
  &lt;/script&gt;
  ...
  </code></pre>
  
  <p>After include the esi varnish will return:</p>
  
  <pre><code> var data = {attr:1, attr2:'martin'};
  </code></pre>
  
  <p>This works fine, but if the API returns an error, this technique will generate a parse error. </p>
  
  <pre><code>var data = &lt;html&gt;&lt;head&gt;&lt;script&gt;...api js here...&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 ... api html ....
  </code></pre>
  
  <p>I solved this problem using a hidden div to parse and catch the error:</p>
  
  <pre><code>...
  &lt;b id=esi-data style=display:none;&gt;&lt;esi:include src='apiurl/data'&gt;&lt;/b&gt;
  &lt;script&gt;
    try{
      var data = $.parseJSON($('#esi-data').html());
    }catch{ alert('manage the error here');}
  ....
  </code></pre>
  
  <p>I've also tried using a script type text/esi, but the browser renders the html inside the script tag (wtf), e.g:</p>
  
  <pre><code>&lt;script id=esi-data type='text/esi'&gt;&lt;esi:include src='apiurl/data'&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Question</strong>:</p>
  
  <p>Is there any why to wrap the  tag and avoid the browser parse it ?</p>