title: How do I prevent html element from escaping parent? (security)
body: <p>I tried to Google this, but everything is related to css, not security.</p>
  
  <p>I have this as a comment form: </p>
  
  <pre><code>&lt;pre name="comment"&gt;
      &lt;comment-content&gt;
          This is a sample comment by a user
      &lt;/comment-content&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>I allowed some controlled html tags that include <code>[pre][/pre]</code> and this is where the problem starts.</p>
  
  <p>if I do something like this:</p>
  
  <pre><code>&lt;pre name="comment"&gt;
      &lt;comment-content&gt;
          This is a sample comment by a user
          [/pre]
          This text will be outside the comment container
      &lt;/comment-content&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>The comment escapes the pre tag, and ignores that its inside the <code>&lt;comment-content&gt;&lt;/comment-content&gt;</code> 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 <code>&lt;pre&gt;</code> tag outside that container, it could be escaped. I also tried doubling up the container, but that did not work either.</p>
  
  <p><a href="https://i.stack.imgur.com/hMfoN.png" rel="nofollow noreferrer">Here is an image of the [/pre] tag escaping the container</a></p>
  
  <p>here is a quick sample of what javascript is doing in the background:</p>
  
  <pre><code>//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 += '&lt;pre name="comment" type="text/plain"&gt;&lt;comment-content&gt;'+setUserCommentHtml(content.clean())+'&lt;/comment-content&gt;&lt;/pre&gt;';
  
  $(this).html(commentHtml);
  </code></pre>
  
  <p>Note: I am aware that most security should be done server side, but would also like to keep client side secure as well.</p>
  
  <p>I basically need a way to force html to require the first closing tag before the second parents closing tag will work.</p>