extjs - 在 ExtJs 的 CellEditing 插件中，如果我们放入安全字符串，那么它会执行

Question

在 ExtJs(ExtJs 3.1) 的 CellEditing 插件中，如果我们像><img src=0 onerror=alert(99)>在任何单元格中一样放置安全字符串，那么它就会执行（将显示警报）。我们可以使用任何 beforeEdit 或 Validateedit 或编辑事件来防止这种情况发生吗？

Answer 1

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

Answer 2

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

来自ExtJs 文档中的 Ext.htmlEncode 函数：

将某些字符（&、<、>、' 和 "）转换为相应的 HTML 字符，以便在网页中进行文字显示。

以下代码段向页面呈现了一个网格，其中 name 列是可编辑的。渲染器htmlEncode将​​值和输入的 html 显示为文本。请参阅正在工作的 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()
});