Is returning HTML directly for an Ajax response best avoided?

Question

I am starting to do JS / HTML / CSS. Looking back, it seems that it is non-standard to return HTML from an external one (for example, an Ajax response) and directly display it (for example, assigning it to an innerHTML element). For example, I believe that the jQuery load () method is basically a shortcut to this.

Taking the approach bothers me for several reasons, but I'm not sure that I'm just not familiar with the approaches and idioms in these areas, and I'm just lagging behind in time or are these legitimate problems, My problems in particular:

1) It seems unsafe to directly assign HTML to an element. Or, at least, it’s dangerous, at least if there is the possibility of any user-generated content (or even third-party content).

2) Sending presentation information (HTML) directly seems like it could probably lead to a mix of presentations and models that are best avoided. Of course, it would be possible for this data to be completely separate from the background content and still return the HTML, but due to the few projects I saw, this is not the case.

So, to my question: does HTML return a legitimate HTTP response form in an Ajax application or is it better to avoid?

Answer 1

I think it will depend on the use case, to be honest. There is a rather heavy penalty on the client if he needs to build a lot of HTML based on some JSON or XML data.

Personally, I use a mixture of both - if it's just a small bit of data (an integer or a small string), I will use JSON or even just the original data myself.

If this is a complex data set (say, a bunch of user comments) that I have to format on the client side, I just send the html and save the client.

Personally, I would not worry about security, at least not for users who use malicious HTML code - you have to deal with this when it is sent anyway.

Edit: There is an exception to this - when bandwidth is a problem (for example, a mobile network), then sending as little data as possible over the wire is almost always better.

Answer 2

I don’t see the right or wrong way to do this, it depends on the amount of data that you send, and how quickly you want to visualize it. Inserting HTML directly is faster than creating elements from JSON or XML. XSS should not be a problem, because you should avoid user data regardless of the format you send it to.

If you look at Facebook, all the answers are XHR (as far as I saw, I just started looking when I saw your question :), this is something like:

for (;;);{"__ar":1,"payload":"\u003cdiv class=\"ego_column\">\u003cdiv class=\"ego_section\">\u003cdiv class=\"uiHeader uiHeaderTopAndBottomBorder mbs uiSideHeader\">\u003cdiv class=\"clearfix uiHeaderTop\">\u003ca class=\"uiHeaderActions rfloat\" href=\"http:\/\/www.facebook.com\/campaign\ /landing.php?placement=advf2&campaign_id=368901427978&extra_1=auto\"> Create an Ad\u003c\/a>\u003cdiv>\u003ch4 class=\"uiHeaderTitle\">Sponsored \u003c\/h4> [...]" } 

Their AJAX is content-heavy, so perhaps it expects to send HTML. Their architecture is probably dedicated to the separation of structure and presentation.