如何防止來自 escaping 父級的 html 元素？ （安全）

Question

我試圖谷歌這個，但一切都與 css 有關，而不是安全。

我有這個作為評論表：

<pre name="comment">
    <comment-content>
        This is a sample comment by a user
    </comment-content>
</pre>

我允許一些包含[pre][/pre]的受控 html 標簽，這就是問題開始的地方。

如果我做這樣的事情：

<pre name="comment">
    <comment-content>
        This is a sample comment by a user
        [/pre]
        This text will be outside the comment container
    </comment-content>
</pre>

注釋轉義了 pre 標記，並忽略了它在<comment-content></comment-content>標記中的內容。 我添加這個標簽是為了試圖阻止 escaping，但它不起作用。 我還注意到我控制的 html 標簽將在容器外運行。 我有第二個沒有轉義的容器，但是第一個容器 escaping 的這個問題意味着如果我在該容器之外放置一個<pre>標記，它可能會被轉義。 我也嘗試將容器加倍，但這也不起作用。

這是 [/pre] 標簽 escaping 容器的圖像

這是 javascript 在后台執行的操作的快速示例：

//I added .cleanHTML() as a similar function to php htmlentities() and .clean() is similar to php strip_tags()
let content = $(this).html().cleanHTML().clean();

commentHtml += '<pre name="comment" type="text/plain"><comment-content>'+setUserCommentHtml(content.clean())+'</comment-content></pre>';

$(this).html(commentHtml);

注意：我知道大多數安全性應該在服務器端完成，但也希望保持客戶端的安全。

我基本上需要一種方法來強制 html 在第二個父母結束標簽起作用之前要求第一個結束標簽。

Answer 1

發布解決方案（在評論的幫助下）作為標記為已解決的答案。

Jared Farrish 在評論中回答了問題。

將我的 javascript 更改為類似這樣可以解決問題：

//I added .cleanHTML() as a similar function to php htmlentities() and .clean() is similar to php strip_tags()
let content = $(this).html().cleanHTML().clean();

let setContentId = Math.floor(Math.random()*10000);
commentHtml += '<pre name="comment" type="text/plain"><comment-content set-content="'+setContentId+'"></comment-content></pre>';

$(this).html(commentHtml);

$('comment-content[set-content="'+setContentId+'"]').html(setUserCommentHtml(content.clean()));

我還在setUserCommentHtml() function 中添加了這個方法。

let htmlOpenTags = [];

//in a loop
if(tagType === 'close' && htmlOpenTags.includes(commentTag)){
    htmlOpenTags.splice(htmlOpenTags.lastIndexOf(commentTag));
    //close tag here
    ...
}else if(tagType === 'open'){
    htmlOpenTags.push(commentTag);
    //open tag here
    ...
}

如果我推送到一個數組，每次用戶打開一個標簽時，我可以在關閉它之前驗證打開的標簽是否存在於該數組中，並從列表中刪除該標簽。

編輯：堆棧溢出說我必須等待 2 天才能標記為答案