DomSanitization Support

[gandevijay]

Does the current version of the Angular-Slickgrid supports the DomSanitizatoin? If yes please help me how to do it.

Requirement: From the API call I get the rich text as data which has html elements in it. Need to display the rich text into the grid as is to have the formatting e.g. bold, underline.
Here is the sample data that comes from the API:
name: <strong><underline>John K Paul</underline></strong>\

Here is a similar ask from another person.
https://stackoverflow.com/questions/58039071/how-can-i-resolve-safehtml-pipe-not-working-in-angular-8

[ghiscoding]

Angular-Slickgrid (Slickgrid-Universal) uses DOMPurify internally, that is what you should use in a Custom Formatter, you can see it implemented in this TreeFormatter for example.

import * as DOMPurify_ from 'dompurify';
const DOMPurify = DOMPurify_; // patch to fix rollup to work
// ...
const sanitizedOutputValue = DOMPurify.sanitize(outputValue);
return sanitizedOutputValue;

It is recommended to use Custom Formatter instead of Angular Pipe (which would require asyncPostRenderer and are much slower (hence why it's not recommended, better stick with Custom Formatter).

Please consider asking such questions on Stack Overflow when possible.
Thanks ⭐

[alexartwww]

Please use https://www.npmjs.com/package/isomorphic-dompurify instead. I can't build Angular SSR with your lib.

ERROR in ./node_modules/angular-slickgrid/fesm2020/angular-slickgrid.mjs 266:59-77
export 'sanitize' (imported as 'DOMPurify') was not found in 'dompurify' (possible exports: default)
at HarmonyImportSpecifierDependency.getLinkingErrors (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/dependencies/HarmonyImportDependency.js:160:8)
at HarmonyImportSpecifierDependency._getErrors (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:202:15)
at HarmonyImportSpecifierDependency.getErrors (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:191:16)
at Compilation.reportDependencyErrorsAndWarnings (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/Compilation.js:3142:22)
at /home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/Compilation.js:2729:28
at _next3 (eval at create (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :47:1)
at eval (eval at create (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :85:1)
at /home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
at /home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/neo-async/async.js:2830:7
at Object.each (/home/artem/go/src/repo.aleksashkin.net/rtb-api/ui/node_modules/neo-async/async.js:2850:39)

[ghiscoding]

you can define your own sanitizer and optionally provide sanitizerOptions, that is probably the best way to deal with this since I'm not sure that I want to swap the lib with the isomorphic one because that will most probably increase the build size and I would rather not increase it for everyone. If you have any problem defining the sanitizer with isomorphic DOMPurify then open a new issue, I actually only used the sanitizer with a RegEx sanitizer but it should work with the isomorphic one.

[ghiscoding]

I took a look at the final build size and it didn't have too much impact so I went ahead with the change to isomorphic-dompurify in latest version 7.5.0. It should work in SSR now, but I have no way to confirm since I have never worked with SSR yet. Cheers

[ghiscoding]

starting with Angular-Slickgrid v8.0, DOM Purify is now optional and must be installed separately, this mean that one user could install dompurify while another could install isomorphic-dompurify to their liking