In the ExtJs's CellEditing plugin if we put security string, then it executes

Question

In the ExtJs's(ExtJs 3.1) CellEditing plugin if we put security string like ><img src=0 onerror=alert(99)> in any of the cell, then it executes (alert will be shown). Can we prevent this using any beforeEdit or Validateedit or edit events?

I think instead of executing this alert() directly can you write some function which can decide whether to execute or not. This function if called from rendering then dont execute it else proceed. Check and reply if it can be done. — Tejas, Dec 19 '18 at 06:04

score 1 · Answer 1 · answered Dec 19 '18 at 08:21

You need to block executing of script in input. For that you need to sanitize what is entered into cell. This you an do validate edit of key press event or change event. However if you use this in change event then it'll be triggered even at the time of initial load. You can use regular expression to find script tag and once found either alert user or reset the value of the input field.

score 1 · Answer 2 · answered Dec 20 '18 at 08:22

You can attach a renderer function to each editable column in the grid, which encodes the value with Ext.htmlEncode. This prevents the injected html to be evaluated and instead displayed as text.

From the Ext.htmlEncode function in the ExtJs docs:

Convert certain characters (&, <, >, ', and ") to their HTML character equivalents for literal display in web pages.

The following snippet renders a grid to the page with the name column to be editable. The renderer htmlEncode the value and the entered html is displayed as text. See the working Fiddle.

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
            header: 'Name', 
            dataIndex: 'name', 
            editor: 'textfield',
            renderer: function (value, metaData) {
                return Ext.htmlEncode(value);
            }
        },
    plugins: {
        cellediting: {
            clicksToEdit: 1
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

I have used the following method. `editor : new Ext.form.TextField({ allowBlank: false, listeners: { focus : function(component, e) { component.setValue(Ext.util.Format.htmlDecode(component.value)); }, blur: function(component, e){ component.setValue(Ext.util.Format.htmlEncode(component.value)); } } })` — Him Singhvi, Dec 20 '18 at 10:46

In the ExtJs's CellEditing plugin if we put security string, then it executes

2 Answers2