直接返回HTML作为Ajax响应是最好避免的吗？

Question

我开始学习JS/HTML/CSS。从周围观察来看，从后端返回HTML（例如Ajax响应）并直接显示它（例如将其分配给元素的innerHTML）似乎并不罕见。例如，我相信jQuery的load()方法基本上是一个快捷方式来做这个。

采用这种方法让我感到担忧，原因有几个，但我不确定是不是因为我不熟悉这些领域的方法和惯例，或者这些是合理的问题。我的担忧具体如下：

1）直接将HTML分配给元素似乎不安全。如果存在任何用户内容（甚至第三方内容）的可能性，至少是危险的。

2）直接发送表示信息（HTML）似乎可能导致最好避免的表示/模型混合。当然，在后端上可以将它们清晰地分开并仍然返回HTML，但在我看过的几个项目中，情况并非如此。

所以，我的问题是，返回HTML是否是Ajax应用程序中合法的HTTP响应形式，还是最好避免使用？

- AlwaysLearning

Answer 1

说实话，我认为这取决于使用情况。如果客户端必须基于某些JSON或XML数据构建大量HTML，则需要支付相当高的代价。

个人而言，我会混合使用 - 如果只是一小部分数据（整数或小字符串），我会使用JSON甚至只用原始数据。

如果它是一组复杂的数据（例如一组用户评论），我将在客户端上格式化它，然后仅发送HTML以节省客户端工作时间。

个人而言，我不会担心安全性，至少不会担心用户注入恶意HTML - 无论如何，在提交时都应该处理它。

编辑：有一个例外情况 - 当带宽成为问题时（例如移动web），那么尽可能少地发送数据通常是最好的选择。

- Dan Smith

---

谢谢！关于移动设备的观点很好。我同意在提交时尝试过滤输入，但我认为这不可能完全做到，因为它将被用于的上下文并不总是可知的 - 可能是HTML、JS或CSS上下文（例如）。 - AlwaysLearning

Answer 2

我认为没有正确或错误的方法来做这件事，这取决于您发送的数据量以及您希望呈现的速度。直接插入HTML比从JSON或XML构建元素更快。无论您发送的格式如何，都应该转义用户数据，因此XSS不应该成为问题。

如果您看一下Facebook，所有XHR响应（就我所见，当我看到您的问题时才开始查看 :)）都是这样的：

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> [...]" }

他们的AJAX内容很重，因此对他们来说发送HTML可能会得到回报。可能他们的架构处理结构-表现分离。

- Alex Ciminian

---

有趣。开头的无限循环（'for (;;);'）必须是为了防止JSON劫持，我模糊地记得读过这方面的内容。是的，输出应该始终被转义，但返回HTML不会在这方面留下任何错误的余地，而使用DOM API似乎更加安全。但我相信Facebook非常小心谨慎。 - AlwaysLearning