我如何防止html元素逃离父级？ （安全）

Question

我尝试向Google进行此操作，但是所有内容都与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>标记内。我添加此标签是为了阻止转义，但是它不起作用。我还注意到我的受控html标签将在容器外部运行。我有另一个未转义的容器，但是转义第一个容器的问题意味着如果我在该容器外放置<pre>标签，则可以转义。我还尝试将容器加倍，但这也不起作用。

Here is an image of the [/pre] tag escaping the container

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

发布解决方案（在评论的帮助下）作为标记为已解决的答案。