dhtmlxEditor on a Form - Strips HTML-Tags on PHP-Connector

Suite and Optimus Suite 5
#1

Hi Community,

we have discovered an issue on the dhtmlXEditor-Component.
We try to combine it with dhtmlXForm, DataProcessor and PHP-Connector.

The form and connector is set up as shown in the many examples on the website.
The editor works well until data is sent to the server through the form.save() - method.

Somehow the render_sql() method on the server-side strips all html-tags created by the editor control.
In the beforeProcessing()-Event the tags are already missing.

Is there any way to avoid this behaviour (maybe ONLY for editor controls).

We appreciate any help on this. Feel free to ask for examples :wink: :smiling_imp:

#2

For better understanding I have created an example, where this issue can be reproduced.
Download: formDemo.zip (2.33 KB)

Just unzip and install the sql file from the folder db\ to your mysql database.
Then open up index.php and click “Load ID 1”. Edit the text and format it using the editor’s controls. After that click send and then Load ID 1 - the formattings disappear, as they were not stored in the database. The tags were filtered before the UPDATE was called on the db.
This renders the unusable for us, since we store the formatted texts in a mysql db. :cry:

dhtmlxComponents are stored in ./dhtmlx/. These are not contained in the ZIP-file. → see references in index.php for this.

The code of both files:
index.php

<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="./dhtmlx/dhtmlxform/codebase/skins/dhtmlxform_dhx_skyblue.css">
        <script src="./dhtmlx/dhtmlxform/codebase/dhtmlxcommon.js"></script>
        <script src="./dhtmlx/dhtmlxform/codebase/dhtmlxform.js"></script>
        <link rel="stylesheet" type="text/css" href="./dhtmlx/dhtmlxeditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">

        <script src="./dhtmlx/dhtmlxEditor/codebase/dhtmlxeditor.js"></script>
        <script src="./dhtmlx/dhtmlxForm/codebase/ext/dhtmlxform_item_editor.js"></script>
        <script src="./dhtmlx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js"></script>
        <script src="./dhtmlx/dhtmlxConnector/php/codebase/connector.js"></script>
    </head>
    <body onload="doOnLoad();">


        <div id="myform"></div>

        <script>
            function doOnLoad(){
                var formData = [
                    {type: "block", name: "editor", width:"100%", list:[    
                            {type:"settings", position:"label-left", labelWidth: 60, inputWidth: 600, labelAlign: "right" },
                            {type:"editor", name:"entrytext1", inputHeight:200, inputWidth:600},
                            {type:"input", name:"plaintextinfo"},
                        ]},
                    {type: "block", name:"buttons", list:[
                            {type:"button", name:"submitbtn", value:"Send"},
                            {type:"newcolumn", offset:10},
                            {type:"button", name:"load", value:"Load ID 1"},
                            {type:"button", name:"load2nd", value:"Load ID 2"},
                            {type:"newcolumn", offset:10},
                            {type:"button", name:"clear", value:"Clear Form"}
                        ]}
                ];
                var myForm = new dhtmlXForm("myform", formData);
                
                var dp = new dataProcessor("connect.php");
                dp.init(myForm);
                dp.setTransactionMode("POST", true);
                
                myForm.attachEvent("onButtonClick", function(name){
                    switch (name)
                    {
                        case "submitbtn":
                            myForm.save();
                            break;
                        case "load":
                            myForm.clear();
                            myForm.load("connect.php?id=1");
                            break;
                        case "clear":
                            myForm.clear();
                            break;
                        case "load2nd":
                            myForm.clear();
                            myForm.load("connect.php?id=2");
                            break;
                    }
                });
            }
        </script>
    </body>
</html>

connect.php

require_once('dhtmlx/dhtmlxConnector/php/codebase/form_connector.php');
$conn = mysql_connect("localhost","root","");
mysql_select_db("editdemo");
 
$form = new FormConnector($conn);//create connector for dhtmlxForm using connection to mySQL server
$form->render_table("texts","idtexts","entrytext1,plaintextinfo");//table name, id field name, fields to use to fill the form
#3 
Somehow the render_sql() method on the server-side strips all html-tags created by the editor control. In the beforeProcessing()-Event the tags are already missing.

This is part of XSS protection. You can disable this behavior.
docs.dhtmlx.com/doku.php?id=dhtm … rf_attacks

ConnectorSecurity::$xss = DHX_SECURITY_TRUSTED;
#4

Thanks for your reply, we’ll try that :wink: