一般来说，ExtJS应用程序中最好的方法是避免HTML？ [英] What is the best way to escape HTML on ExtJS application generally?

问题描述

我正在使用ExtJS开发一个使用ExtJS构建GUI并通过RESTful Web服务与服务器进行通信（返回的数据格式为JSON对象）的Web应用程序。

现在我在处理数据时遇到问题其中包含HTML标签，Javascript代码;因为当我将这些值设置为Ext表单，标签，输入字段时，它们受到这些语法的影响。

我使用此函数从模型对象加载数据，形式如下：

  form.loadRecord（model）; 
  

我已经找到一个解决方案来转义HTML和JS：使用

  field.setValue（Ext.util.Format.htmlDecode（data））; 
  

但我认为这不是整个应用程序的一个很好的解决方案，因为开发人员必须做这么多事情：查看所有输入字段，标签，并将该片段放在他们身上。毕竟，这不是建立一个快速，强大和可维护的应用程序的美好方式。

那么，你能帮助我解决方案，以便它可以在一个地方修改，并影响到其余的。可以覆盖AbstractComponent的setValue / setLabel吗？还是应该在渲染之前对数据进行编码？并且如何解码这些数据？
（P / S：我在服务器端使用Grails框架）
非常感谢您。

解决方案

一切都取决于你的用例，但是我所做的是 - 在服务器端转义所有的HTML代码，这样就不会有错误的遗忘的地方。当然，这些数据需要在表单字段中加载，因为它们被转义了。
最简单的解决方案是覆盖所有表单域的setValue，并使用Extjs htmlDecode函数，这将使这些值恢复正常。

  Ext.override（Ext.form.field.Base，{
 setValue：function（val）{
 val = Ext.util.Format.htmlDecode（val）; 
 return this.callParent（[val]）; 
} 
}）; 
  

I am developing a web application using ExtJS to build GUI and communicate with server via RESTful web-service (the returned data is formatted as JSON objects).
Now I am having problems when processing with data which contains HTML tags, Javascript codes inside; because when I set those values to Ext forms, labels, input fields, they are affected by those syntaxes.
I used this function to load data from model object to form:

form.loadRecord(model);

I have found a solution to escape HTML and JS: using

field.setValue(Ext.util.Format.htmlDecode(data)); 

but I think that is not a good solution for whole application, because the developers must do so much things: review all input fields, labels, and put that snippet to them. And after all, that is not a beautiful way to build a fast, robust and maintainable application.
So, could you please help me solution so that it can be modified at one place, and affects to the rest. Can I override the setValue/ setLabel of AbstractComponent? Or should I encode the data before rendering them? And how to decode those data? (P/S: I uses Grails framework on the server-side) Thank you so much.

解决方案

Everything depends on your use case, but what I do is - escape all HTML code on server side, so that there are no 'forgotten' places by mistake. That of course creates problems, when these data need to be loaded in form fields, because they are escaped. The easiest solution is to override setValue for all form fields and use Extjs htmlDecode function, which will revert these values back to normal.

Ext.override(Ext.form.field.Base, {
    setValue: function(val) {
        val = Ext.util.Format.htmlDecode(val);
        return this.callParent([val]);
    }
});

这篇关于一般来说，ExtJS应用程序中最好的方法是避免HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！