DecodeForHTML during document.GetElementByID('input').value = 'data[0]'，带动态数组数据

Question

下午好。

所以我今天了解到，我开发的一个 Web 应用程序，用于我的办公室跟踪一些安全报告数据，无法将 html 标记添加到缓解字段中。这些以varchar的形式保存到数据库中，这很完美。但是，当页面重新加载并再次读取它们以进行显示时，它会出错，因为 ColdFusion 正在读取这些标签并阻止我的 DataTable 正确初始化。

经过一番尝试后，我选择 <td>#EncodeForHTML(queryValue)#</td> 进行 DataTable 初始化，这使其可见。但是，下一步是从 DataTable 获取该行数据，单击进入我用于解码行修改的弹出输入。如果我将它保持原样，如下所示，它将打开包含编码数据的弹出窗口，并且很难阅读。我试过使用 DecodeForHTML(data[#])，带和不带输出。在输出内部，我收到一个错误消息，指出页面加载时数据未定义，因为在您单击一行之前不会创建数组，如果没有输出，我会收到语法错误。

更清楚地说，我的问题是当我在弹出窗口的 <textarea> 中显示这个字符串时，我如何解码它？

数据表创建代码：

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

弹出 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 初始化脚本和行单击操作：

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

Answer 1

如果我正确阅读了你的问题和代码，你会在缓解字段中获得 html 标记，然后在以弹出的形式显示它们时遇到问题。如果你正在为 html 编码输出，那么它看起来很糟糕并且可能不可读，因为本来是 html 的标签会变成类似 %lt;b%gt;something%lt;/b%gt; 的东西。我想你在这里有几个选择......

删除所有 html 标签或
使用能够解释 html 的 control/wysiwyg 编辑器。

这两个中最简单的是选项 1。如果您运行通过这样的文本：

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

这将去除所有 html 标签，并允许您在不向用户显示任何样式的情况下显示基本信息。选项 2，您需要查看是否可以安装并让 CKEditor 作为弹出窗口的一部分工作（更困难，但可能并非不可能）。

编辑由于您表示希望在字符串中保留 html 标签，因此正如您所说，最好的方法是取出 < > 值，以便呈现文本。

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

需要注意的一件事是，这将删除字符串中的所有 > 和 < 值。因此，如果有人在字符串之外使用这些值，您最终会错过这些值。即 x >= 34 最终会变成 x = 34。

DecodeForHTML during document.GetElementByID('input').value = 'data[0]'，带动态数组数据

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

javascript

coldfusion

datatable