Search code examples
javascriptjsonparsingvarnishesi

Most secure javascript JSON Inline technique

I'm using varnish+esi to return external json content from a RESTFul API. This technique allows me to manage request and refresh data without using webserver resources for each request.

e.g:

<head>
.... 
<script> 
 var data = <esi:include src='apiurl/data'>;
</script>
...

After include the esi varnish will return:

 var data = {attr:1, attr2:'martin'};

This works fine, but if the API returns an error, this technique will generate a parse error. 

var data = <html><head><script>...api js here...</script></head><body><h1 ... api html ....

I solved this problem using a hidden div to parse and catch the error:

...
<b id=esi-data style=display:none;><esi:include src='apiurl/data'></b>
<script>
  try{
    var data = $.parseJSON($('#esi-data').html());
  }catch{ alert('manage the error here');}
....

I've also tried using a script type text/esi, but the browser renders the html inside the script tag (wtf), e.g:

<script id=esi-data type='text/esi'><esi:include src='apiurl/data'></script>

Question:

Is there any why to wrap the tag and avoid the browser parse it ?

Solution

  • Let me expand upon the iframe suggestion I made in my comment—it's not quite what you think!

    The approach is almost exactly the same as what you're doing already, but instead of using a normal HTML element like a div, you use an iframe.

    <iframe id="esi-data" src="about:blank"><esi:include src="apiurl/data"></iframe>

    var $iframe = $('#esi-data');

try {
    var data = $.parseJSON($iframe.html());
} catch (e) { ... }

$iframe.remove();

    #esi-data { display: none; }

    How is this any different from your solution? Two ways:

    1. The data/error page are truly hidden from your visitors. An iframe has an embedded content model, meaning that any content within the <iframe>…</iframe> tags gets completely replaced in the DOM—but you can still retrieve the original content using innerHTML.

    2. It's valid HTML5… sort-of. In HTML5, markup inside iframe elements is treated as text. Sure, you're meant to be able to parse it as a fragment, and it's meant to contain only phrasing content (and no script elements!), but it's essentially just treated as text by the validator—and by browsers.

    3. Scripts from the error page won't run. The content gets parsed as text and replaced in the DOM with another document—no chance for any script elements to be processed.

    Take a look at it in action. If you comment out the line where I remove the iframe element and inspect the DOM, you can confirm that the HTML content is being replaced with an empty document. Also note that the embedded script tag never runs.

    Important: this approach could still break if the third party added an iframe element into their error page for some reason. Unlikely as this may be, you can bulletproof the approach a little more by combining your technique with this one: surround the iframe with a hidden div that you remove when you're finished parsing.