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

Question

I tried to Google this, but everything is related to css, not security.

I have this as a comment form:

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

I allowed some controlled html tags that include [pre][/pre] and this is where the problem starts.

if I do something like this:

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

The comment escapes the pre tag, and ignores that its inside the <comment-content></comment-content> tag. I added this tag as an attempt to block escaping, but it doesn't work. I also notice my controlled html tags will run outside the container. I have a second container that is not escaped, but this issue with escaping the first container means if I put a <pre> tag outside that container, it could be escaped. I also tried doubling up the container, but that did not work either.

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

here is a quick sample of what javascript is doing in the background:

//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);

Note: I am aware that most security should be done server side, but would also like to keep client side secure as well.

I basically need a way to force html to require the first closing tag before the second parents closing tag will work.

Answer 1

Posting solutions (with help from comments) as an answer to mark as solved.

Jared Farrish answered question in comments.

changing my javascript to something like this fixes the issue:

//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()));

I also added this method Inside the 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
    ...
}

If I push to an array, every time the user opens a tag, Then I can verify the opened tag exists in that array before closing it and remove that tag from the list.

edit: stack overflow says I must wait 2 days before marking as answer