javascriptextjstagfield

ExtJS 7.1 Tag field is executing XSS tag


I am having an issue regarding the tagfield component when entering <img src=a onerror=alert('xss!')>. This tag is being executed after entering the whole value. I've tried preventing the tag execution on keyup, keypress, keydown, and beforequery events and it still executing. This block of code prevent the event from executing when it detects an XSS tag.

    Ext.application({
    name: 'Fiddle',

    launch: function () {

        var shows = Ext.create('Ext.data.Store', {
            fields: ['id', 'show'],
            data: []
        });

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: 'Sci-Fi Television',
            height: 200,
            width: 500,
            items: [{
                xtype: 'tagfield',
                itemId: 'tagField',
                fieldLabel: 'Select a Show',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: false,
                listeners: {
                    beforequery: function () {
                        var editor = Ext.ComponentQuery.query('#tagField')[0];
                        if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
                            editor.inputEl.dom.value = '';
                            return false;
                        }
                    },
                    keypress: function (textfield, event) {
                        var editor = Ext.ComponentQuery.query('#tagField')[0];
                        if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
                            editor.inputEl.dom.value = '';
                            return false;
                        }
                    },
                    keydown: function (textfield, event) {
                        var editor = Ext.ComponentQuery.query('#tagField')[0];
                        if (editor.inputEl.getValue().search(new RegExp('(<([^>]+)>)')) >= 0) {
                            editor.inputEl.dom.value = '';
                            return false;
                        }
                    },
                }
            }]
        });

    }
});

enter image description here


Solution

  • This took a little while to hunt down, but apparently in Ext.form.field.ComboBox, there's an onFieldMutation handler that really is the key to all of this. Take a look at this Fiddle and the code that takes care of handling this... I believe this is what you're looking for:

    Ext.define('ComboOverride', {
      override: 'Ext.form.field.ComboBox',
    
      onFieldMutation: function (e) {
        var inputDom = this.inputEl.dom;
        if (Ext.String.hasHtmlCharacters(inputDom.value)) {
          inputDom.value = '';
          alert('XSS Detected, Removing');
        }
        return this.callParent(arguments);
      }
    });