Search code examples
javascripthtmlextjsextjs4extjs6

Extjs form and text area cannot handle input with angular brackets('<>'). Weird behavior, the UI just dies

I have a extjs form and a text field inside it.

When ever input is given to the the text field inside the form and 'Save' button is pressed, the value is passed to the server side and some operations are done with it.

Every thing worked fine until I put an input in the text field something like:

enter image description here

With this input, when the 'Save' button is pressed, the entire UI just dies. And infact whenever the input contains an angular bracket('<' or '>'), this same thing happens. The 1st line of my 'Save' button handler looks something like this :

var form = Ext.ComponentQuery.query('#formPanel')[0];

On debugging I saw, the control never goes beyond this line. Something is clearly breaking clearly.

Also a more weird thing, when I tried to write that input in the editor of stackoverflow here, it just removed the angular brackets, the reason why posted a pic for the input.

For sure I am missing something here.

On top of that, not only the UI dies, it logs the session out, to make things even worse for me.

I am using extjs 6.0.2, if that helps.

Could someone please help me out with this?

Solution

  • ComponentQuery parses the entire DOM and it breaks because it interprets the <yyyymmdd> string as an HTML tag. (Note that the brackets are displayed because I didn't wrote the actual characters - they are HTML encoded)

    You should get your component in other ways. I suggest using references because it just searches through the view owner's reference cache. Also, it's also a lot faster.

    For details see this link from the docs. Btw, the lookupReference() function can also be called on a parent container.

    In addition to these changes you should always escape your input to avoid issues like yours and most importantly: to avoid code injections. For example, you can use the htmlEncode() function.