kendo templates

by Trevor Power

HTML

<script src="http://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<p>
Safe HTML can be used as HTML content in the page.
</p>
<div id="content"></div>
<hr>
<p>
However care should be teken when using Safe HTML in other ways. Such as an attribute.
</p>
<div id="title"></div>


<hr>

<div id="grid">

</div>

CSS

body {
  margin: 20px;
}
div {
  background: lightgrey;
}

JavaScript

var safeHtml = "asdasd\\\" onclick=alert('xss')";

var data = { Name: safeHtml };

var contentTemplate = kendo.template('<span>#= Name # </span>');

$("#content").html(contentTemplate(data));

var titleTemplate = kendo.template('<span title="#: Name #">click</span>');

$("#title").html(titleTemplate(data));

var rawTitleTemplate = kendo.template('<span title="#= Name #">click</span>');


$('#grid').kendoGrid({
  dataSource: {
    data:[data]
  },
	columns: [
    {
      field: 'Name',
      title: 'Content',
      template: contentTemplate
    },
    {
      field: 'Name',
      title: 'Title Encoded',
      template: titleTemplate
    },
    {
      field: 'Name',
      title: 'Title Raw',
      template: rawTitleTemplate
    }
  ]
});