SlickGrid/examples/example-csp-header.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
<!DOCTYPE HTML>
<html>
<head>
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <link rel="stylesheet" href="./example-csp-header.css" type="text/css"/>
  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
  <meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' https://cdn.jsdelivr.net 'nonce-browser-sync';
    style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script';
    trusted-types dompurify
  ">
</head>
<body>
<h2 class="title">Example - CSP Header</h2>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid"></div>
    </td>
    <td valign="top">
      <label id="search-label">And search including:</label>
      <input type=text id="search">
      <h2>
        <a href="/examples/index.html" id="link">&#x2302;</a>
        Demonstrates:
      </h2>
      <ul>
        <li>CSP header, currently using
          <code>
            <pre>
              default-src 'self';
              script-src 'self' https://cdn.jsdelivr.net 'nonce-browser-sync';
              style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script';
              trusted-types dompurify;
            </pre>
          </code>
        </li>
        <li>
          <strong>Do not use <code>https://cdn.jsdelivr.net</code> as CSP since that is too broad and risky. We only do it for demo purposes</strong>
        </li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-csp-header.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>

<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>

<script src="../dist/browser/slick.core.js"></script>
<script src="../dist/browser/slick.interactions.js"></script>
<script src="../dist/browser/slick.formatters.js"></script>
<script src="../dist/browser/slick.editors.js"></script>
<script src="../dist/browser/plugins/slick.rowselectionmodel.js"></script>
<script src="../dist/browser/slick.grid.js"></script>
<script src="../dist/browser/slick.dataview.js"></script>
<script src="../dist/browser/controls/slick.pager.js"></script>
<script src="../dist/browser/controls/slick.columnpicker.js"></script>

<!-- <script src="./example-csp-policy.js"></script> -->
<script src="./example-csp-header.js"></script>
</body>
</html>