CSP Compliance

CSP Compliance

The library is now, at least mostly, CSP (Content Security Policy) compliant since v5.5.0, however there are some exceptions to be aware of. When using any html string as template (for example with Custom Formatter returning an html string), you will not be fully compliant unless you return TrustedHTML. You can achieve this by using the sanitizer method in combo with DOMPurify to return TrustedHTML as shown below and with that in place you should be CSP compliant.

import DOMPurify from 'dompurify';
import { SlickGrid } from 'slickgrid';

const options = {
  sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
  // ...
}
const grid = new SlickGrid('#myGrid', data, columns, options);

with this code in place, we can use the following CSP meta tag (which is what we use in the lib demo, ref: index.html)

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify">

If you also use the DataView, you could also enable a new useCSPSafeFilter flag to be CSP safe as the name suggest. However, please be aware that there a slight performance impact when enabling this option.

import DOMPurify from 'dompurify';
import { SlickGrid } from 'slickgrid';

const options = {
  sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
  // ...
}
const dataView = new SlickDataView({ useCSPSafeFilter: true });
const grid = new SlickGrid('#myGrid', data, columns, options);

Custom Formatter using native HTML

We now also allow passing native HTML Element to Custom Formatter instead of HTML string to avoid the use of innerHTML and stay CSP safe. We also have a new grid option named enableHtmlRendering, which is enabled by default and is allowing the use of innerHTML in the library (by Formatters and others), however when disabled it will totally restrict the use of innerHTML which will help to stay CSP safe.

You can take a look at this new Filtered DataView with HTML Formatter - CSP Header (Content Security Policy) example which uses this new approach.