CODEWITHSUNDEEP
javascripthtmltabulatorformatter
Charly 9000
Charly 9000

Reputation: 1

Why does Tabulator give an error with data with "</script>" word?

Using Tabulator, if for example, I have data from a record with this value it works: '<button>Hello</button>' but if instead I put: '<script>Hello</script>' it breaks. The problem is specifically in </script>.

<!DOCTYPE html>
<html lang="en">
    <head>      
        <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>  
    </head>
    
    <body>
        <div id="example-table"></div>

        <script> 
                
            //sample data
            var tabledata = [
                {id:1, name:"Oli Bob" },
                {id:2, name:"Mary May"},
                {id:3, name:"Christine Lobowski"},
                {id:4, name:"<button>Margret Marmajuke</button>"}           
            ];
            
            var table = new Tabulator("#example-table", {
                height:200, // set height of table to enable virtual DOM
                data:tabledata, //load initial data into table
                layout:"fitColumns", //fit columns to width of table (optional)
                columns:[ //Define Table Columns                    
                    {title:"Name", field:"name", sorter:"string", formatter: 'text'}
                ],
            });
            
            //trigger an alert message when the row is clicked
            table.on("rowClick", function(e, row){
                alert("Row " + row.getIndex() + " Clicked!!!!");
            });
        </script>

    </body>
</html>

If I add this line it doesn't work

{id:5, name:"<script>alert(1)</script>"}

but maybe if I escape it like this, yeah

{id:5, name:"<script>alert(1)<\/script>"}

Is it correct to do it like this? Should I escape </script> ?

Do you know if there is a way to format or solve it?

I hope to be able to display this literal in a column -> "<script>Hello</ script>"

Upvotes: 0

Views: 119

Answers (3)

traktor
traktor

Reputation: 19366

The specific issue is not because of Tabulator, it's the HTML parser.

When the HTML parser encounters an opening script tag <script> in HTML source, it looks ahead for the closing script tag </script> and, when found, passes everything in between the tags to the script language engine for processing, along with information about any attribute values provided on the opening script tag.

While skipping through HTML source, the (HTML) parser makes no determination of the validity of script code, and, when execution resumes after the script engine is done with the code, resumes processing the HTML source stream from where it left off.

Hence if you put the character sequence </script> inside an HTML script block as part of a JavaScrtipt string, the HTML parser finds it and treats as the closing tag of the script block.

Predictably,

  • JavaScript errors will be thrown about the unterminated string that </script> was meant to be in,
  • The HTML parser will render "code" following the </script> tag it found in HTML source as text in the document body if it doesn't parse as HTML source.

Solutions:

  • Backslash escape the forward slash in code to make it <\/script> - JavaScript ignores the backslash in \/ within a string and treats it as a single forward slash.
  • Less practically you could compute the string value of </script> by concatenating some substrings of "</script>" in code.
  • Put the JS code in an external file that is loaded by the HTML file using a src attribute on the opening script tag - the HTML parser doesn't parse the code loaded.

Upvotes: 0

muzzletov
muzzletov

Reputation: 688

you cannot use the string sequence inside of your html anywhere if it may close a tag. thats because html is an optimistic language.

that means, as soon as it encounters a tag sequence it assumes its meant to start/end the tag. therefore it needs escape, that is, you need to parse the tag and escape it, as it has been suggested in the other answers.

Upvotes: 0

SELA
SELA

Reputation: 6858

String escaping can be used for the closing </script> tag by using a extra backslash (\), like this: <\/script>. Refer the sample data in array tabledata name property value.

Refer the code below:

var tabledata = [{
    id: 1,
    name: "Oli Bob"
  },
  {
    id: 2,
    name: "Mary May"
  },
  {
    id: 3,
    name: "Christine Lobowski"
  },
  {
    id: 4,
    name: "<button>Margret Marmajuke</button>"
  },
  {
    id: 5,
    name: "<script>alert(1)<\/script>" // Used escaped characters
  } 
];

var table = new Tabulator("#example-table", {
  height: 200,
  data: tabledata,
  layout: "fitColumns",
  columns: [{
    title: "Name",
    field: "name",
    sorter: "string",
    formatter: 'text'
  }],
});

table.on("rowClick", function(e, row) {
  alert("Row " + row.getIndex() + " Clicked!!!!");
});
<html lang="en">
<head>
  <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>
  <script>
  </script>
</body>

</html>

Upvotes: 0

Related Questions