CODEWITHSUNDEEP
javascripthtmljquerydompurify
Surendranatha Reddy T
Surendranatha Reddy T

Reputation: 294

How can I allow <td> and <tr> tags in DOMPurify?

I am using DOMPurify library in javascript file to prevent XSS attacks.

Here is the code.

main.html

<html>
    <head>
      <title>Online jQuery Editor</title>
    </head>
    <body>
      <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
      <script type = "module" src="myJS.js"></script>
      <h1>jQuery element Selector</h1>
      <k1 id="k1"></k1>
    </body>
</html>

myJS.js

import DOMPurify from './purify.js';

$(document).ready(function() {
      var tanCols1 = ''
      for (var i = 0; i<10; i++){
          tanCols1 += "<td>"+i+"</td>";
          }
      console.log('original--> ', tanCols1)
      var clean_data = DOMPurify.sanitize(tanCols1, {ALLOWED_TAGS:['option', 'td', 'tr', 'a', 'table']})
      console.log('cleaned--> ', clean_data)
      $("#k1").append(clean_data)

   });

original--> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

cleaned--> 0123456789

Expected Result--> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

How can I allow <td> and <tr> tags in DOMPurify??

Upvotes: 0

Views: 1431

Answers (1)

Zac Anger
Zac Anger

Reputation: 7787

This behavior might be an annoyance, but it's expected. DOMPurify relies on JSDOM or the browser DOM internally, and td/tr/th are not valid unless inside a table. The string you're passing doesn't include the table, so the DOM just throws those tags away. See also this, this, this, and other issues on the repo.

Upvotes: 2

Related Questions