在ExtJs的CellEditing插件中，如果我们放置安全字符串，则它将执行

Question

在ExtJs的（ExtJs 3.1）CellEditing插件中，如果我们在任何单元格中放置诸如><img src=0 onerror=alert(99)>之类的安全字符串，那么它将执行（将显示警告）。我们可以使用任何beforeEdit或Validateedit或edit事件来阻止这种情况吗？

Answer 1

您需要阻止输入中脚本的执行。为此，您需要清理输入单元格中的内容。您可以验证按键事件或更改事件的编辑。但是，如果在更改事件中使用此函数，那么即使在初始加载时也会触发它。 您可以使用正则表达式来查找脚本标签，一旦找到该标签，便会提醒用户或重置输入字段的值。

Answer 2

您可以在网格中的每个可编辑列上附加一个renderer函数，该函数使用Ext.htmlEncode对值进行编码。这样可以防止对注入的html进行评估，而是将其显示为文本。

来自Ext.htmlEncode function in the ExtJs docs：

  

将某些字符（＆，<，>，'和“）转换为它们的HTML字符等效项，以便在网页中按原样显示。

以下代码段将网格渲染到名称栏为可编辑的页面。 呈现器htmlEncode的值和输入的html显示为文本。 参见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()
});