javascript - 在 HTML 中注入(inject) Javascript 片段

Question

我有一个文本框，用户可以在其中输入 html 片段

示例:用户在字段中输入

// <![CDATA[
    <tr>
        <td>
            #= Position #
        </td>
        <td>
            #= Description #
        </td>
        <td>
            #= Location #
        </td>
        <td>
            <a href="@Url.Action("Delete")/#= Id #" class="delete-link">Delete</a>
        </td>
    </tr>
// ]]>

我将其保存到数据库，并在客户端 ui 中按需调用它作为 KTemplatePart.Script(KendoUI 模板)

查看

@Html.Script(
    @<script id="jobTemplate" type="text/javascript">
       @Model.KTemplatePart.Script
     </script>
)

其中 html.Script 是 html 助手

我的问题是它在客户端用户界面中变形

<script id="jobTemplate" type="text/javascript" >

    &lt;![CDATA[

        &lt;tr&gt;
            &lt;td&gt;
                #= Position #
            &lt;/td&gt;
            &lt;td&gt;
                #= Description #
            &lt;/td&gt;
            &lt;td&gt;
                #= Location #
            &lt;/td&gt;
            &lt;td&gt;
                &lt;a href=&quot;@Url.Action(&quot;Delete&quot;)/#= Id #&quot; class=&quot;delete-link&quot;&gt;Delete&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;

    // ]]&gt;

         </script>

有解决办法吗？

Answer 1

这是出于安全原因而设计的，以防止脚本注入(inject)和攻击。

允许将 HTML 插入 DOM 会使您的应用程序容易受到攻击，因此默认情况下，输入会被转义。

看起来 KendoUI 没有内置方法来转义 HTML，但它很容易做到:

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

来自: Unescape HTML entities in Javascript?