fix(charts): Removed dependency of dompurify in favor of angular sani…

…tizer.

libs/barista-components/chart/src/chart.ts

@@ -107,6 +107,7 @@ import { DtChartTooltip } from './tooltip/chart-tooltip';
 import { getPlotBackgroundInfo, retainSeriesVisibility } from './utils';
 import { DtChartFocusTarget } from './chart-focus-anchor';
 import { DtChartBase } from './chart-base';
+import { DomSanitizer } from '@angular/platform-browser';
 const HIGHCHARTS_PLOT_BACKGROUND = '.highcharts-plot-background';
 
 // tslint:disable-next-line:no-any
@@ -215,12 +216,18 @@ export class DtChart
     }
     if (options instanceof Observable) {
       this._optionsSub = options.subscribe((o: DtChartOptions) => {
-        this._currentOptions = sanitize(o);
+        // TODO: breaking-change 11.0.0 Remove ternary because _sanitizer is no longer optional
+        this._currentOptions = this._sanitizer
+          ? sanitize(o, this._sanitizer)
+          : o;
         this._update();
       });
       this._options = options;
     } else {
-      const sanitized = sanitize(options);
+      // TODO: breaking-change 11.0.0 Remove ternary because _sanitizer is no longer optional
+      const sanitized = this._sanitizer
+        ? sanitize(options, this._sanitizer)
+        : options;
       this._currentOptions = sanitized;
       this._options = sanitized;
     }
@@ -392,6 +399,8 @@ export class DtChart
     private _config: DtChartConfig,
     /** @internal used for the selection area to calculate the bounding client rect */
     public _elementRef: ElementRef,
+    /** @breaking-change 11.0.0 DomSanitizer will be made mandatory */
+    @Optional() private _sanitizer?: DomSanitizer,
   ) {
     super();
     this._config = this._config || DT_CHART_DEFAULT_CONFIG;

libs/barista-components/core/src/util/sanitize.ts

@@ -13,23 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { sanitize as DOMPurifySanitize } from 'dompurify';
+import { SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /** Sanitizes a nested object or string from malicious html code  */
-export const sanitize = <T extends {} | string>(option: T): T => {
+export const sanitize = <T extends {} | string>(
+  option: T,
+  sanitizer: DomSanitizer,
+): T => {
   if (typeof option === 'string') {
-    return DOMPurifySanitize(option);
+    return sanitizer.sanitize(SecurityContext.HTML, option) as T;
   }
 
   Object.keys(option).forEach((key) => {
     if (typeof option[key] === 'string') {
-      option[key] = DOMPurifySanitize(option[key]);
+      option[key] = sanitizer.sanitize(SecurityContext.HTML, option[key]);
     } else if (Array.isArray(option[key])) {
       option[key].forEach((item, i) => {
-        option[key][i] = sanitize(item);
+        option[key][i] = sanitize(item, sanitizer);
       });
     } else if (typeof option[key] === 'object') {
-      option[key] = sanitize(option[key]);
+      option[key] = sanitize(option[key], sanitizer);
     }
   });
   return option;

libs/barista-components/micro-chart/src/micro-chart.ts

@@ -30,6 +30,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import {
   DtChart,
   DtChartOptions,
@@ -139,7 +140,10 @@ export class DtMicroChart implements OnDestroy {
     if (isDevMode()) {
       checkUnsupportedOptions(options);
     }
-    const sanitized = sanitize(options);
+    // TODO: breaking-change 11.0.0 Remove ternary because _sanitizer is no longer optional
+    const sanitized = this._sanitizer
+      ? sanitize(options, this._sanitizer)
+      : options;
     this._options = sanitized;
     this._transformedOptions = this._transformOptions(sanitized);
   }
@@ -203,6 +207,8 @@ export class DtMicroChart implements OnDestroy {
   constructor(
     @Optional() @SkipSelf() private readonly _theme: DtTheme,
     private _changeDetectorRef: ChangeDetectorRef,
+    /** @breaking-change 11.0.0 DomSanitizer will be made mandatory */
+    @Optional() private _sanitizer?: DomSanitizer,
   ) {
     this._transformedOptions = this._transformOptions({});
 

package.json

@@ -71,7 +71,6 @@
     "core-js": "^3.9.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.0.1",
-    "dompurify": "^2.3.4",
     "highlight-ts": "^9.12.1-2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",