12

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.

Đinh Hồng Châu
  • 5,300
  • 15
  • 53
  • 90

3 Answers3

13

If you're using Ext.XTemplate, you can escape html in fields like this:

var tpl = new Ext.XTemplate(
    '<p>My Field: {myField:htmlEncode}</p>'
);
mockaroodev
  • 2,031
  • 1
  • 20
  • 24
7

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]);
    }
});
Janis Coders
  • 157
  • 1
  • 6
  • 2
    It appears the solution above breaks the date field, at least it does in ExtJS 4.2. A slight improvement would be to check if the value is a string prior to trying to HTML decode. So, like this: setValue: function(val) { if (typeof val == 'string') { val = Ext.util.Format.htmlDecode(val); } return this.callParent([val]); } – Rocket04 Feb 12 '15 at 15:36
3

This link has a excellent answer by jack.slocum : https://www.sencha.com/forum/showthread.php?13913

grid.on('validateedit', function(e){
   e.value = Ext.util.Format.stripTags(e.value);
});

Util method Ext.util.Format.stripTags() removes all the html/script tags.

code chimp
  • 359
  • 2
  • 8
  • 21
  • 1
    Encoding text (using the `htmlEncode`function) is preferred to stripping tags because valid input might contain tag like things and you want to view them as they are. Imagine people using nick names like "I X" or chat messages actually containing html code like this very comment does now . You wouldn't want Stackoverflow to remove the tags when displaying this comment. – NineBerry Mar 15 '18 at 14:28