Best practices for passing HTML as JSON

Question

According to what I've read (the below links for instance) you need to escape \ and " when sending HTML as JSON, but that's all you need to escape.

I have two ways of getting my data:

1) From Front-end

I am fetiching the html from the page like so:

$('#myDiv').html()

Which gives me a string containing html, newlines and white spaces.

<a class="some-class" href="somepage.html">
    <figure class="someClass">
        <img src="/img/pic.png" alt="">
    </figure>
</a>

I can now choose to either use JSON.stringify (which apparently is unnecessary as I only have to escape \ and ") to get:

"<a class=\"some-class\" href=\"somepage.html\">\n        <figure class=\"someClass\"> \n             <img src=\"/img/pic.png\" alt=\"\">\n        </figure>\n    </a>"

and then JSON.parse later to turn it back into HTML and insert into the DOM.

Or I can use escapeHTML() instead of JSON.Stringify:

escapeHTML: function(htmlString) {
         var chr = {
             '"': '&quot;',
             '&': '&amp;',
             "'": '&#39;',
             '/': '&#47;',
             '<': '&lt;',
             '>': '&gt;'
     };

    return html.htmlString(/[\"&'\/<>]/g, function (a) { return chr[a]; });
}

which gives me:

&lt;a class=&quot;some-class&quot; href=&quot;somepage.html&quot;&gt;
        &lt;figure class=&quot;someClass&quot;&gt; 
             &lt;img src=&quot;&#47;img&#47;pic.png&quot; alt=&quot;&quot;&gt;
        &lt;&#47;figure&gt;
    &lt;&#47;a&gt;

I can then unescape it by using the following Solution A:

return $('<textarea/>').html( response ).val();

2) From backend:

The above works great, but if the response I'm getting (from the backend service) looks like the following (escaped " and /), it doesn't work.

<a class=\"some-class\" href=\"somepage.html\">\n<figure class=\"someClass\">\n<img src=\"/img/pic.png\" alt=\"\">\n<\/figure>\n<\/a>

I first use Solution A. Then to to get rid of \" I use:

markup.replace('\\"', '"');

Clearly that doesn't remove \/. My question is therefor: how can I combine a regexp to unescape both \ and " if I am to use the escapeHTML() way?

Would it be better to use escapeHTML() or JSON.Stringify when passing HTML as JSON?

You don't need to do any of that. As long as you use a JSON serializer, everything will work fine. — SLaks, Nov 28 '14 at 14:03
"Any of that"? JSON.stringify is a JSON serializer. @OP there are edge cases, therefore I suggest JSON.stringify. One example: newlines are not allowed in JSON strings and must be encoded. — Boldewyn, Nov 28 '14 at 14:04
Just use `JSON.Stringify`. You have a string (whether it contains HTML or not) and want to encode it as JSON, so this is the appropriate method. Whether the HTML that is in the string should be escaped or not, and where to do that, depends on your application logic. — Bergi, Nov 28 '14 at 14:05
That first article you read is totally clueless. Points #2 and #3 have nothing to do with JSON specifically. #1 is already covered by #4. And #4 is just wrong, as @Boldewyn showed. — Bergi, Nov 28 '14 at 14:08

score 1 · Accepted Answer · answered Dec 02 '14 at 18:04

After a lot of researching and thinking, we've decided it's better to use Javascripts own built in functions, rather than doing something manually.

Therefore we are using JSON.stringify combined with JSON.parse, and told backend to simply html encode their markup, instead of escaping " and / manually.

Best practices for passing HTML as JSON

1 Answers1