用JavaScript编写HTML的良好实践

http://ejohn.org/blog/javascript-micro-templating/ 是一个非常聪明的黑客。最终结果是非常清楚的。

我也更喜欢带有客户端HTML创建逻辑的JSON响应。

不幸的是,大多数真实的客户端HTML编写脚本都被破坏了,其中包含许多HTML注入缺陷,这些缺陷很容易成为跨站点脚本安全漏洞。我认为这是因为你在和自己的服务器交谈,而不是直接和一个敌对的用户交谈,你在某种程度上是“安全”的,并且在将它们插入HTML时,可以在没有正确字符串的情况下逃脱。这当然是胡说八道。

我总是看到这样的东西:

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

或:

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

或者确实是Resig的微模板化黑客,默认情况下没有HTML转义。来 在 人们!我们刚刚开始清理为服务器端XSS提供服务的坏掉的PHP脚本的遗留问题,现在您想介绍一个全新的大量客户端XSS漏洞?

叹息。这就是弦的诱惑。我们认为我们理解他们,可以随意地把他们吊在一起。但是字符串是危险的,具有隐藏的上下文和转义的需求。如果必须在客户端生成HTML,则需要这样的函数:

function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;

但我个人更喜欢dom方法。与SQL的参数化一样,使用DOM方法通过直接将原始字符串与将使用它们的组件进行对话,将字符串从公式中删除。好的,dom的问题是它相当冗长:

var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

但是,您可以定义helper函数来减少这一点,例如:

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(jquery 1.4中的新元素创建工具使用了类似的样式。)

+一年前,我们启动了一个新的Web应用程序,需要一种在浏览器中从JSON数据呈现HTML的方法。
我们希望它与XML/XSLT转换一样快。

我们的答案是JS模板引擎 PURE .

与大多数JS模板化libs不同,它使HTML保持不变(根本没有奇怪的标签),除了一些符号之外,它没有带来新的语言来学习,只有JS和HTML。

我使用它的方式:

• 直接在页面中生成静态HTML
• 然后逐步添加JS逻辑,HTML逐渐活跃起来。
• 一旦习惯了它,HTML和JS都可以有一个安全的独立的开发生命周期,并且可以在设计器和JS开发人员工作之间进行划分。

我们有一个系统,其中很多数据作为JSON从服务器传递,然后通过客户机端的JavaScript模板引擎进行处理。在.NET 4.0中(可能甚至是3.5 SP1,我不确定),可以使用 Client Templates .

比起发送HTML,我更喜欢传递JSON。将数据和视图分开总是好的。

如果您想要保留MVC框架,您应该让您的模板框架进行模板化。 Ajax应该只执行服务器请求,服务器请求执行所有数据库和业务逻辑,然后将URL返回到应该加载的模板。