DevExtreme Vue - Security Considerations

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

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)
    });
});

<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}
        />
    );
}

<template>
    <DxDataGrid ...
        @exporting="onExporting">
        <DxExport
            :enabled="true"
            :formats="['csv']"
        />
    </DxDataGrid>
</template>

<script>
// ...
import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';

export default {
    components: {
        DxDataGrid,
        DxExport
    },
    methods: {
        onExporting(e) {
            const workbook = new Workbook();
            const worksheet = workbook.addWorksheet('Employees');

            exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                encodeExecutableContent: true,
            }).then(function() {
                workbook.csv.writeBuffer().then((buffer) => {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.csv');
                });
            });
            e.cancel = true;
        }
    }
}
</script>

import React, { useCallback } from 'react';
// ...

import DataGrid, { Export } from 'devextreme-react/data-grid';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
import { exportDataGrid } from 'devextreme/excel_exporter';

const App = () => {
    const onExporting = useCallback((e) => {
        const workbook = new Workbook();
        const worksheet = workbook.addWorksheet('Employees');

        exportDataGrid({
            component: e.component,
            worksheet: worksheet,
            encodeExecutableContent: true,
        }).then(function() {
            workbook.csv.writeBuffer().then((buffer) => {
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.csv');
            });
        });
        e.cancel = true;
    }, []);

    return (
        <DataGrid ...
            onExporting={onExporting}>
            <Export 
                enabled={true}
                formats={['csv']}
            />
        </DataGrid>
    );
}

export default App;