In jQuery, I am returning HTML in a JSON result, what do I have to escape?

Question

In my Ajax request (using jQuery) I am returning a JSON response.

So json.Html will have a string of HTML I want to append inside a div.

On the server side, do I have to escape the HTML at all?

In my MVC action, I am returning:

return Content("{html: ???????}, "application/json");

Answer 1

An alternative solution would be to simply return the HTML and use jQuery's load():

$('#someDiv').load('servershtml.html');

To do it your way though, you would need only to escape double quotes and backslashes.

The specification is very readable and short.

Answer 2

You only need to add slashes to quotes and slashes (ala \" and \\) when escaping content to be put into a JSON string. HTML characters mean nothing inside a JSON string, so they're fine :)

Of course, make sure your string is itself well-formed (X)HTML so that it doesn't explode when inserted into the div.

Answer 3

When creating JSON with HTML you have to escape then double-quote character, and also the CLRF character and it will return HTML fine.

I worked with a pl/sql in oracle procedure that was called from a AJAX request. If you would like, i can post the implementation.

You should test your output at http://www.jsonlint.com/ to see if its valid.

So

{
    "id": "1",
    "html_value": "<a href=\"http://www.google.com\">test link returnin html code</a>"
}

is diffrent from

{
    "id": "1",
    "html_value": "<a href=\"http://www.google.com\">test link returnin
 html code</a>"
}

because of the CLRF character. You should replace that in the server side with &nbsp; or <br/>.

Hope this helps, Alex

Answer 4

I will post my experience with PHP. I hope it could helps.

Usually, one use the json_encode() function to encode the data, e.g.:

json_encode(array('data1' => 'String data with text',
              'data2' => '<a href="www.stackoverflow.com">The Site</a>'));

Since json_encode() works fine only with UTF-8 strings, I suggest to encode every string in UTF-8 through the function utf8_encode(), i.e.

json_encode(array(utf8_encode('data1') => utf8_encode('String data with text'),
              utf8_encode('data2') => utf8_encode('<a href="www.stackoverflow.com">The Site</a>')));

Moreover, if you are using special chars (like è and à in Italian words), I suggest to decode the returned json UTF8 encoded HTML. This is particularly useful if you need to use it in an HTML page (e.g. as a result of an AJAX call). To decode through Javascript, use:

decodeURIComponent(escape(html));

where html is the returned encoded HTML code.

Regards.

Answer 5

If you are using PHP json_encode does the trick for you:

$htmlSnippet = '<a href="#"></foo>';
return json_encode(array("html" => $htmlSnippet));

In jQuery you either declare the dataType 'json' (see answer above) or decoding by jQuery.parseJSON

Answer 6

If you set the dataType configuration option to 'json' then the object passed to the complete event will be that javascript object. Basically, jQuery will do the work of converting the response content (assuming its properly formatted JSON) to a javascript object. Example...

$.ajax({
    dataType: 'json',
    complete: function(myJsonObject) {
        alert(myJsonObject.someMember);
    }
}); //$.ajax({

If you're wondering how to generate properly formatted JSON from .net, then I would encourage you to explore Json.NET because it makes generating JSON very, very easy.