[ANGULAR] htmlEncode and Unicode Escaping

[sfreeland]

Hello,

We set htmlEncode to false because we use custom html on the grid record renderings. The data we receive to the grid is sanitized through c# Newtonsoft Json escapeHTML, which converts to Unicode characters. I have noticed that when Unicode characters are used in a field like Name, the Unicode characters get interpreted and rendered as html code. For example, the following comes in like this as the record.name:

SLAST3\u003cimg src=\u0027x\u0027 onerror=\u0027alert(3)\u0027\u003eTest\u003c/img\u003e

This will cause the script onError to be executed. On normal renderings of HTML the unicode characters are displayed as escaped, legible characters. Is this expected behavior for the grid to interpret Unicode here as html?

Thanks,
Stephen

[sergey.maltsev]

Hi!

According to docs https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-htmlEncode if you disable htmlEncode, then you should preprocess data before rendering on your own to avoid XSS issues.

If you configure Grid like this:

new Grid({
    columns : [
        {
            text  : 'Name',
            field : 'name',
            htmlEncode : false
        }],

    data : [
        { name : 'SLAST3\u003cimg src=\u0027x\u0027 onerror=\u0027alert(3)\u0027\u003eTest\u003c/img\u003e\n'}

    ]
});

This will show alert. It is expected because Grid won't process data before placing to DOM.

GridNoEncodeHtml.png (19.46 KiB) Viewed 146 times

To avoid this you should prepare data before sending to Grid or use XSS protection with https://bryntum.com/products/grid/docs/api/Core/helper/StringHelper#function-encodeHtml-static or https://bryntum.com/products/grid/docs/api/Core/helper/StringHelper#function-xss-static to fix that in https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-renderer Column config

For example

new Grid({
    columns : [
        {
            text       : 'Name',
            field      : 'name',
            htmlEncode : false,
            renderer   : ({ value }) => {
                const isHtml = () => {
                    // Here you can add some conditions to return true of false.
                    return false; // or true
                };
                return isHtml() ? value : StringHelper.encodeHtml(value);
            }
        }],

    data : [
        { name : 'SLAST3\u003cimg src=\u0027x\u0027 onerror=\u0027alert(3)\u0027\u003eTest\u003c/img\u003e\n' }

    ]
});

This will encode potentially unsafe XSS content.

GridEncodeHtml.png (6.88 KiB) Viewed 146 times

[sfreeland]

Hi Sergey,

Thanks for the reply. I didn't see there was a String Helper built-in and was able to use it to sanitize the incoming strings.

But the data source coming in from the json serializer claims this unicode data should be treated as escaped and not markup because of the \u before the Unicode? I don't know much about the Unicode standard.

Thanks,
Stephen

[sergey.maltsev]

Hi!

Data format which comes from your server, depends on its configuration, Grid component can not guarantee that any format is safe when you disable htmlEncode column flag.
You should process data as stated above to handle XSS sanity.