如何防止来自 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 天才能标记为答案