Question: DecodeForHTML during document.GetElementByID('input').value = 'data[0]', with dynamic array data

Question

DecodeForHTML during document.GetElementByID('input').value = 'data[0]', with dynamic array data

Answers 1
Added at 2017-11-07 20:11
Tags
Question

Good Afternoon.

So I learned today that a web application I developed, for my office to track some security report data, is suffering from the ability to add html tags into the mitigation field. These are saved to the database as a varchar, which is perfect. However, when the page reloads, and they are read again for display, it errors out because ColdFusion is reading those tags and stopping my DataTable from initializing properly.

After some playing I settled on <td>#EncodeForHTML(queryValue)#</td> for the DataTable initialization, which allows it to be visible. However the next step is getting that row data, from the DataTable, on click into the popup inputs that I am using for row modifications to be decoded. If I leave it as it is now, which is below, it will open the popup with the encoded data and is very hard to read. I've tried to use DecodeForHTML(data[#]), with and without outputs. Inside outputs I get an error that data is undefined on page load, because the array isn't created until you click on a row, and without outputs I get a syntax error.

To put it more clearly, my question is how can I decode this string when I display it in the <textarea> in my popup?

DataTable Creation Code:

<div id="allFindings" style="max-height:50%">
        <table id="dt_table_findings" class="display" style="table-layout:fixed; width:100%; font:calibri; font-size:11px; text-align:left;">
            <thead>
                <tr>
                    <th style="width:4%">Task Num</th>
                    <th style="width:5%">App</th>
                    <th style="width:5%">Priority</th>
                    <th style="width:5%">Vuln ID</th>
                    <th style="width:7%">Task</th>
                    <th style="width:5%">Status</th>
                    <th style="width:5%">Category</th>
                    <th>Document</th>
                    <th>Reasoning</th>
                    <th>Mitigation</th>
                    <th>Resources</th>
                    <th>Comments</th>
                    <th style="width:5%">Milestone Date</th>
                    <th style="width:5%">Follow-Up Date</th>
                    <th style="width:6%">Planned Completion</th>
                    <th style="width:5%">Closed</th>
                    <th style="width:5%">Last User</th>
                </tr>
            </thead>
            <tbody>
                <!---Fill datatable with Findings--->
                <cfloop query="#findingsQuery#">
                    <tr style="">
                        <td>#TASK_NUM#</td>
                        <td>#APPLICATION#</td>
                        <td>#PRIORITY#</td>
                        <td>#VULN_ID#</td>
                        <td>#TASK#</td>
                        <td>#STATUS#</td>
                        <td>#TASK_CATEGORY#</td>
                        <td>#DOCUMENT#</td>
                        <td>#REASONING#</td>
                        <td>#EncodeForHTML(MITIGATION)#</td>
                        <td>#RESOURCES#</td>
                        <td>#COMMENTS#</td>
                        <td>#MILESTONE_DATE#</td>
                        <td>#FOLLOWUP_DATE#</td>
                        <td>#PLANNED_COMPLETION#</td>
                        <td>#CLOSED#</td>
                        <td>#LAST_USER#</td>
                    </tr>
                </cfloop>
            </tbody>
        </table>
    </div>

Popup Div:

<div id="edit_findings" class="modal" style="min-width:550px;">
      <cfform id="form_updateFindings">
            <!---Hidden Popup Identifier for Submit Page--->
            <cfinput type="hidden" name="view" id="view" value="findings">
            <!--- Hidden Task Num --->
            <cfinput type="hidden" name="h_taskNum" id="h_taskNum" />
            <!---Shown Task Number--->
            <p><label>Task Num: </label>&nbsp;
            <cfinput type="text" name="taskNum" id="taskNum" disabled="disabled" /></p>
            <!---Shown Application Name--->
            <p><label>App: </label>&nbsp;
            <cfinput type="text" name="app" id="app" /></p>
            <!---Shown Priority--->
            <p><label>Priority: </label>&nbsp;
            <cfinput type="text" name="priority" id="priority" /></p>
            <!---Shown Vulnerability ID--->
            <p><label>Vuln ID: </label>&nbsp;
            <cfinput type="text" name="vuln_id" id="vuln_id" /></p>
            <!---Shown Task--->
            <p><label>Task: </label>&nbsp;
            <cfinput type="text" name="task" id="task" size="45" /></p>
            <!---Shown Status--->
            <p><label>Status: </label>&nbsp;
            <cfinput type="text" name="status" id="status" /></p>
            <!---Shown Category--->
            <p><label>Category: </label>&nbsp;
            <cfinput type="text" name="category" id="category" /></p>
            <!---Shown Document Location--->
            <p><label>Document: </label>&nbsp;
            <cfinput type="text" name="document" id="document" size="45" /></p>
            <!---Shown Resources--->
            <p><label>Resources: </label>&nbsp;
            <cfinput type="text" name="resources" id="resources" size="45" /></p>
            <!---Shown Reasoning Box--->
            <p><label>Reasoning: </label>&nbsp;
            <textarea name="reasoning" id="reasoning" cols="35" rows="5"></textarea></p>
            <!---Shown Mitigation Box--->
            <p><label>Mitigation: </label>&nbsp;
            <textarea name="mitigation" id="mitigation" cols="35" rows="5"></textarea></p>
            <!---Shown Milestone Date Box--->
            <p><label>Milestone Date: </label>&nbsp;
            <textarea name="milestone" id="milestone" cols="35" rows="5"></textarea></p>
            <!---Shown Comments Box--->
            <p><label>Comments: </label>&nbsp;
            <textarea name="comments" id="comments" cols="35" rows="5"></textarea></p>
            <!---Shown Follow Up Date--->
            <p><label>Follow-Up Date: </label>&nbsp;
            <cfinput type="text" name="followup" id="followup" /></p>
            <!---Shown Planned Completion--->
            <p><label>Planned Completion: </label>&nbsp;
            <cfinput type="text" name="plannedcomplete" id="plannedcomplete" /></p>
            <!---Shown Closed--->
            <p><label>Closed: </label>&nbsp;
            <cfinput type="text" name="closed" id="closed" /></p>
            <!---Shown Last User--->
            <p><label>Last User: </label>&nbsp;
            <cfinput type="text" name="lastuser" id="lastuser" disabled="disabled"/></p>
            <br />
            <!---Submit Button for Update Query--->
            <cfinput type="button" class="btn" id="submitEditFindings" name="submitEditFindings" value="Submit" onClick="fn_updFindings();">

      </cfform>
    </div>

DataTable Initialization Script and Row Click action:

$(document).ready( function () {
        var table = $('#dt_table_findings').DataTable( {
        "bLengthChange": false,
        "pageLength": 10,
        "dom": 'frti<"toolbar">p',
        initComplete: function(){
            $("div.toolbar").html('<input type="button" name="addButton" class="add-new-button" onclick="fn_OpenModal()"><input type="submit" name="downButton" class="download-button">');

        }
    } );    

        <!--- Actions on Datatable Row Click --->
        $('#dt_table_findings tbody').on('dblclick', 'tr', function () {
            var data = table.row( this ).data();
            <!--- Set hidden variables for popup 
            alert(data);--->
            document.getElementById('h_taskNum').value = data[0];
            document.getElementById('taskNum').value = data[0];
            document.getElementById('app').value = data[1];
            document.getElementById('priority').value = data[2];
            document.getElementById('vuln_id').value = data[3];
            document.getElementById('task').value = data[4];
            document.getElementById('status').value = data[5];
            document.getElementById('category').value = data[6];
            document.getElementById('document').value = data[7];
            document.getElementById('comments').value = data[11];
            document.getElementById('reasoning').value = data[8];
            document.getElementById('mitigation').value = data[9];
            document.getElementById('resources').value = data[10];
            document.getElementById('milestone').value = data[12];
            document.getElementById('followup').value = data[13];
            document.getElementById('plannedcomplete').value = data[14];
            document.getElementById('closed').value = data[15];
            document.getElementById('lastuser').value = data[16];
            <!--- Show popup --->
            $('#edit_findings').modal();
        } );
    } );
Answers to

DecodeForHTML during document.GetElementByID(&#39;input&#39;).value = &#39;data[0]&#39;, with dynamic array data

nr: #1 dodano: 2017-11-07 21:11

If I'm reading your question and code properly, you are getting html tags in the mitigation field and then experiencing problems when displaying them in the form that gets popped up. If you are encoding the output for html, then it looks bad and perhaps unreadable because what would have been an html tag will get turned into something like %lt;b%gt;something%lt;/b%gt;. I think you have a couple of alternatives here...

  1. Strip out all html tags or
  2. Use a control/wysiwyg editor that will be able to interpret the html.

The easiest of these two is option 1. If you run the text through something like this:

REReplaceNoCase(text, "<[^[:space:]][^>]*>", "", "ALL");

that will strip out all of the html tags and allow you to display the base information without any styling to the users. Option number 2, you would need to see if you could install and get CKEditor working as part of the popup (more difficult, but likely not impossible).

edit Since you indicated that you would like to keep the html tags present in the string, then as you said, the best way to go would be to take out the < > values so the text will render.

REReplaceNoCase(text, "<|>", "", "ALL");

one thing to be aware of though is that this will remove all > and < values through the string. so if someone uses those values outside of the string, you'll end up missing out on those values. ie x >= 34 would end up being x = 34.

Source Show
◀ Wstecz