DevExtreme React - Security Considerations

This help topic describes how to avoid potential security vulnerabilities when you use DevExtreme components.

See Also

HTML Encoding

HTML encoding is a simple technique that helps protect your web application from cross-site scripting (XSS) attacks. In an XSS attack, the attacker injects a malicious script into your web application. Every time a user visits the infected part of the application, this script runs. To prevent the code injection, user input must always be encoded (converted to plain text).

Encoding Across Components

DevExtreme components always encode HTML. However, several components include API members that allow you to disable or bypass the encoding. The following sections describe these potentially vulnerable API members.

encodeHtml

encodeHtml is a Boolean property that you can set for a column in the DataGrid and TreeList components. Its default value is true, which means that column values are encoded. If you set it to false, the encoding is disabled, and malicious code can be executed. We recommend that you keep this property set to true.

Open the following example to learn how disabling the encodeHtml property can affect your application: HTML Encoding in DataGrid. In this example, malicious code is saved in the data source:

JavaScript
const products = [{
    "ProductID": 1,
    "ProductName": "<img src=1 onerror=alert('XSS') \/>",
    // ...
}, {
    "ProductID": 2,
    "ProductName": "<script>alert('XSS')<\/script>",
    // ...
},
// ...
];

When encodeHtml is true, the DataGrid interprets this code as text and simply displays it:

DevExtreme DataGrid with enabled HTML encoding

If you set encodeHtml to false, the malicious code will be interpreted as script, and you will see an alert pop-up window:

DevExtreme DataGrid with disabled HTML encoding

html

Items in collection UI components (List, SelectBox, Toolbar) can apply appearance based on data source fields (see the Default Templates article). html is one of such fields that specifies item markup. This field's values are not encoded, so ensure that they do not contain malicious code. Alternatively, you can use the text field. Unlike html values, text values are encoded.

The following example illustrates how the html field can lead to a potential vulnerability: HTML Encoding in List. In this example, both text and html values contain unsafe HTML, but html lines are commented out:

JavaScript
const products = [{
    "id": 1,
    "text": "<img src=1 onerror=alert('XSS') \/>",
    // "html": "<img src=1 onerror=alert('XSS') \/>"
}, {
    "ID": 2,
    "text": "<script>alert('XSS')<\/script>",
    // "html": "<script>alert('XSS')<\/script>"
}, {
    "id": 3,
    "text": "Product 1"
    // "html": "Product 1"
}];

When html is commented out, text applies. You can see that its values are interpreted as text and simply displayed:

DevExtreme List with enabled HTML encoding

Uncomment the html lines, and you will see an alert pop-up window. This is because unsafe HTML was interpreted as script and executed:

DevExtreme List with disabled HTML encoding

messageHtml

DevExtreme Dialog UI methods accept an HTML string as a dialog message. This string is not encoded. You can use the encodeHtml utility method to encode the HTML string before it is passed to a Dialog UI method. The following example illustrates this technique: HTML Encoding in a Dialog UI Method.

Encoding in Templates

Angular, Vue, and React always encode values interpolated in templates. Without these frameworks, use the encodeHtml utility method to encode the interpolated values:

JavaScript
$(function() {
    const encodeHtml = DevExpress.utils.string.encodeHtml;
    $("#tabs").dxTabs({
        dataSource: tabs,
        width: 600,
        itemTemplate: function (itemData) {
            return encodeHtml(itemData.content);
        }
    });
});

const tabs = [{     
    id: 0,
    content: "<img src=1 onerror=alert('XSS') \/>" 
}, { 
    id: 1,
    content: "<script>alert('XSS')<\/script>" 
}, { 
    id: 2, 
    content: "Tab content" 
}];

View on CodePen

When you insert unencoded content, it can open your application to XSS attacks:

DevExtreme Tabs with disabled HTML encoding

The encoded content is interpreted and displayed as text:

DevExtreme Tabs with enabled HTML encoding