SlickGrid/examples/example-html-sanitizer.html at 08f5dfc7d153b28c8f947da8f30d9de1c19c6f7b · 6pac/SlickGrid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example: Sanitizer</title>
  <link rel="stylesheet" href="../dist/styles/css/slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:700px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>blocking events in formatter HTML</li>
        <li>logs first 30 hits (where HTML is changed)</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-html-sanitizer.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>


<script src="../dist/browser/slick.core.js"></script>
<script src="../dist/browser/slick.interactions.js"></script>
<script src="../dist/browser/slick.editors.js"></script>
<script src="../dist/browser/slick.formatters.js"></script>
<script src="../dist/browser/slick.grid.js"></script>

<script>
   // a standard formatter returns a string
  function maliciousFormatter(row, cell, value, columnDef, dataContext) {
      return '<div onclick="maliciousFunction();">Click Me to Earn $' + value + '!!!</div>';
  }

  function niceFormatter(row, cell, value, columnDef, dataContext) {
      return '<div>Click Me to open your document #' + value + '</div>';
  }

  var grid;
  var data = [];
  var columns = [
    {id: "id", name: "Link", field: "id", width: 250, formatter: maliciousFormatter}
  ];

  var options = {
    editable: true,
    enableAddRow: false,
    enableCellNavigation: true,
    sanitizer: Slick.RegexSanitizer,
    logSanitizedHtml: true
  };

  document.addEventListener("DOMContentLoaded", function() {
    var id = 1;
    for (var i = 0; i < 500; i++) {
      var d = (data[i] = {});

      d["id"] = id++;
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });
</script>
</body>
</html>