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?

Answer 1

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.

Answer 2

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()
});