在 HTML 中注入 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 helper

我的問題是它在客戶端 ui 中變形

<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

這是出於安全原因設計的，以防止腳本注入和攻擊。

允許將 HTML 插入 DOM 會使您的應用程序易受攻擊，因此默認情況下，輸入被轉義。

看起來 KendoUI 沒有內置的方法來取消轉義 HTML，但它很容易做到：

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

來自： 在 Javascript 中 Unescape HTML 實體？

Answer 2

試試這個 javascript 過濾器。

function filter(value) {
  const removeTag = new RegExp("(<[a-zA-Z0-9]+>)|(</[a-zA-Z0-9]+>)", "g");
  return value.replace(removeTag, "");
}

你可以在codepen上看到結果。

代碼筆