DevExtreme Vue - Security Considerations

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

See Also

• Security in Angular
• Security in React
• Security in Vue

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).

Text editors, such as TextBox, Autocomplete, and HtmlEditor, do not encode user input. We recommend that you apply third-party sanitizing tools to the user input before you submit it to the server:

$(function() {
    const editorInstance = $("#html-editor").dxHtmlEditor({
        // ...
    }).dxHtmlEditor("instance");

    $("#button").dxButton({
        useSubmitBehavior: true,
        text: "Submit the Form"
    });

    $("#form-container").on("submit", function(e) {
        const editorValue = editorInstance.option("value");
        // ...
        // Encode editorValue here with your favorite sanitizing tool before sending this value to the server 
        // ...

        e.preventDefault();
    });
});

<form action="your-action" id="form-container">
    <div id="html-editor"></div>
    <div id="button"></div>
</form>

<form
    action="your-action"
    (submit)="onFormSubmit($event)">
    <dx-html-editor ...
        [(value)]="editorValue">
    </dx-html-editor>

    <dx-button
        [useSubmitBehavior]="true"
        text="Submit the Form">
    </dx-button>
</form>

import { Component, ViewChild } from '@angular/core';
import { DxHtmlEditorComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    editorValue = '';

    onFormSubmit (e) {
        // ...
        // Encode this.editorValue here with your favorite sanitizing tool before sending this value to the server 
        // ...

        e.preventDefault();
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule, DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule,
        DxButtonModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <form
        action="your-action"
        @submit="handleSubmit">
        <DxHtmlEditor ... 
            v-model:value="editorValue"
        />

        <DxButton
            :use-submit-behavior="true"
            text="Submit the Form"
        />
    </form>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxHtmlEditor } from 'devextreme-vue/html-editor';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxHtmlEditor, 
        DxButton
    },
    data: {
        editorValue: ''
    },
    methods: {
        handleSubmit(e) {
            // ...
            // Encode this.editorValue here with your favorite sanitizing tool before sending this value to the server 
            // ...

            e.preventDefault();
        }
    }
}
</script>

import React, { useCallback, useState } from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor } from 'devextreme-react/html-editor';
import { Button } from 'devextreme-react/button';

const App = () => {
    const [editorValue, setEditorValue] = useState("");

    const onFormSubmit = useCallback((e) => {
        // ...
        // Encode editorValue here with your favorite sanitizing tool before sending this value to the server 
        // ...

        e.preventDefault();
    }, []);

    const handleValueChange = (e) => {
        setEditorValue(e.value);
    };

    return (
        <form
            action="your-action"
            onSubmit={onFormSubmit}
            <HtmlEditor ... 
                value={editorValue}
                onValueChanged={handleValueChange}
            />

            <Button
                useSubmitBehavior={true}
                text="Submit the Form"
            />
        </form>
    );
}

export default App;

Angular, Vue, and React always encode values interpolated in templates. With other frameworks and libraries, use a third-party sanitizing tool as follows:

$(function() {
    $("#tabs").dxTabs({
        dataSource: tabs,
        width: 600,
        itemTemplate: function (itemData) {
            const encodedContent = // encode the itemData.content value; 
            return encodedContent;
        }
    });
});

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

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

The encoded content is interpreted and displayed as text:

Several components include API members that allow you to insert unencoded HTML. The following sections describe these potentially vulnerable API members.

The customizeTooltip callback function allows you to customize tooltips in SVG components. This function should return an object with individual tooltip settings. This object can include the html field that accepts an HTML string. If this string contains JavaScript code, the UI component executes it. This capability makes the component vulnerable to XSS attacks.

To guard against the attacks, ensure that the html value does not contain malicious code. Alternatively, you can use the text field. Unlike html values, text values are encoded. Refer to the following example to see the difference: customizeTooltip - Potential XSS Vulnerability.

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:

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:

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

Items in collection UI components (List, SelectBox, Toolbar, and similar components) 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:

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:

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

The Map component can contain multiple markers. Each marker can display a tooltip. Its content is taken from the marker's tooltip.text property. This property can accept an HTML string that the component evaluates. Note that if the HTML contains JavaScript commands, they will be executed. Attackers can exploit this behavior for XSS. The following example illustrates such a case: Map.markers[].tooltip.text - Potential XSS Vulnerability

If markers data comes from an untrusted source, encode the tooltip.text value as follows:

const markers = [ ... ];
const encodeMessage = (message) => {
    // ...
    // Encode the `message` string with your favorite sanitizing tool
    // ...
    return encodedMessage;
};

const sanitizeMarkers = (markers) => {
    markers.forEach(marker => {
        marker.tooltip.text = encodeMessage(marker.tooltip.text);
    })
    return markers;
};

DevExtreme Dialog UI methods accept an unencoded HTML string as a dialog message. Encode this string in the following manner:

const message = "Are you sure?<script>alert('XSS')</script>";
// ...
// Encode the `message` string with your favorite sanitizing tool
// ...
DevExpress.ui.dialog.confirm(messageEncoded, "Confirm changes");

This code produces the following output:

The noDataText property specifies text to display when the UI component does not contain any data. This property can accept an HTML string that the component evaluates. This evaluation, however,makes the noDataText property potentially vulnerable to XSS attacks. If the noDataText value comes from a third party (loaded from a data source, inputted by a user), encode this value to protect against harmful code.

The following example illustrates how an unsafe noDataText value can affect your application: noDataText - Potential XSS Vulnerability. You should encode the value as follows:

const noDataTextUnsafe = "No data to display<img src=1 onerror=alert('XSS') \/>";
const encodeMessage = (message) => {
    // ...
    // Encode the `message` string with your favorite sanitizing tool
    // ...
    return encodedMessage;
};

$(function() {
    $("#simpleList").dxList({
        // ...
        noDataText: encodeMessage(noDataTextUnsafe)
    });
});

<dx-list ...
    [noDataText]="noDataTextEncoded">
</dx-list>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    noDataTextEncoded: string;
    constructor() {
        const noDataTextUnsafe = "No data to display<img src=1 onerror=alert('XSS') \/>";
        this.noDataTextEncoded = this.encodeMessage(noDataTextUnsafe);
    }
    encodeMessage (message) {
        // ...
        // Encode the `message` string with your favorite sanitizing tool
        // ...
        return encodedMessage;
    };

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxList ...
        :no-data-text="noDataTextEncoded"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList from 'devextreme-vue/list';

const noDataTextUnsafe = "No data to display<img src=1 onerror=alert('XSS') \/>";

const encodeMessage = (message) => {
    // ...
    // Encode the `message` string with your favorite sanitizing tool
    // ...
    return encodedMessage;
};

export default {
    components: {
        DxList
    },
    data() {
        return {
            // ...
            noDataTextEncoded: encodeMessage(noDataTextUnsafe)
        }
    }
}
</script>

import React, { useState } from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';

const encodeMessage = (message) => {
    // ...
    // Encode the `message` string with your favorite sanitizing tool
    // ...
    return encodedMessage;
};

export default function App() {
    const noDataTextUnsafe = "No data to display<img src=1 onerror=alert('XSS') \/>";
    const noDataTextEncoded = encodeMessage(noDataTextUnsafe);

    return (
        <List ...
            noDataText={noDataTextEncoded}
        />
    );
}