Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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>"

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search