feat(sanitizer): Remove DOM implementation as unnecessary and update … (

#56)

* feat(sanitizer): Remove DOM implementation as unnecessary and update docs accordingly, remove CSS sanitation by default

* fix tests

README.md

@@ -5,8 +5,7 @@
 [![npm version](https://img.shields.io/npm/v/@tinkoff/ng-dompurify.svg?style=flat-square)](https://npmjs.com/package/@tinkoff/ng-dompurify)
 [![code style: @tinkoff/linters](https://img.shields.io/badge/code%20style-%40tinkoff%2Flinters-blue?style=flat-square)](https://github.com/TinkoffCreditSystems/linters)
 
-> This library implements `DOMPurify` as Angular entire `DomSanitizer` and as
-> standalone `Sanitizer` or `Pipe`. It delegates sanitizing to `DOMPurify` and
+> This library implements `DOMPurify` as Angular `Sanitizer` or `Pipe`. It delegates sanitizing to `DOMPurify` and
 > supports the same configuration. See [DOMPurify](https://github.com/cure53/DOMPurify).
 
 ## Install
@@ -58,20 +57,20 @@ export class MyComponent {
 }
 ```
 
-You can also substitute entire Angular `DomSanitizer` with `DOMPurify`:
+You can also substitute Angular `Sanitizer` with `DOMPurify` so it is
+automatically used all the time:
 
 ```typescript
-import {DomSanitizer} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {NgDompurifyDomSanitizer} from '@tinkoff/ng-dompurify';
+import {NgModule, Sanitizer} from '@angular/core';
+import {NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
 // ...
 
 @NgModule({
     // ...
     providers: [
         {
-            provide: DomSanitizer,
-            useClass: NgDompurifyDomSanitizer,
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
         },
     ],
     // ...
@@ -81,22 +80,21 @@ export class AppModule {}
 
 ## Configuring
 
-`NgDompurifyPipe` supports passing DOMPurify config as an argument.
 Config for `NgDompurifySanitizer` or `NgDompurifyDomSanitizer` can be
-provided using token `DOMPURIFY_CONFIG`:
+provided using token `DOMPURIFY_CONFIG`. `NgDompurifyPipe` supports
+passing DOMPurify config as an argument to override config from DI.
 
 ```typescript
-import {DomSanitizer} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {NgDompurifyDomSanitizer, DOMPURIFY_CONFIG} from '@tinkoff/ng-dompurify';
+import {NgModule, Sanitizer} from '@angular/core';
+import {NgDompurifySanitizer, DOMPURIFY_CONFIG} from '@tinkoff/ng-dompurify';
 // ...
 
 @NgModule({
     // ...
     providers: [
         {
-            provide: DomSanitizer,
-            useClass: NgDompurifyDomSanitizer,
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
         },
         {
             provide: DOMPURIFY_CONFIG,
@@ -110,30 +108,25 @@ export class AppModule {}
 
 ## CSS sanitization
 
-DOMPurify does not support sanitizing CSS. `DomSanitizer` in Angular
-is organized in such a way that it only received CSS rule value, and
-not the name. Therefore, a method taking in CSS rule value and returning
-a sanitized value is required to support CSS. You can try using internal
-Angular import `ɵ_sanitizeStyle` since they use it themselves to use it in
-`platform-browser` package where `DomSanitizer` is implemented. This way
-level of CSS sanitization will be equal to native Angular with added benefit
-of supporting inline styles in `[innerHTML]` bindings.
+DOMPurify does not support sanitizing CSS. Angular starting version 10
+dropped CSS sanitation as something that presents no threat in supported
+browsers. You can still provide a handler to sanitize CSS rules values
+upon binding if you want to:
 
 ```typescript
-import {DomSanitizer} from '@angular/platform-browser';
-import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
-import {NgDompurifyDomSanitizer, SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
+import {NgModule, Sanitizer} from '@angular/core';
+import {NgDompurifySanitizer, SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
 
 @NgModule({
     // ...
     providers: [
         {
-            provide: DomSanitizer,
-            useClass: NgDompurifyDomSanitizer,
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
         },
         {
             provide: SANITIZE_STYLE,
-            useValue: ɵ_sanitizeStyle,
+            useValue: yourImplementation, // <---
         },
     ],
     // ...
@@ -146,10 +139,9 @@ export class AppModule {}
 DOMPurify supports various hooks. You can provide them using `DOMPURIFY_HOOKS` token:
 
 ```typescript
-import {DomSanitizer} from '@angular/platform-browser';
-import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
+import {NgModule, Sanitizer} from '@angular/core';
 import {
-    NgDompurifyDomSanitizer,
+    NgDompurifySanitizer,
     DOMPURIFY_HOOKS,
     SANITIZE_STYLE,
 } from '@tinkoff/ng-dompurify';
@@ -158,12 +150,12 @@ import {
     // ...
     providers: [
         {
-            provide: DomSanitizer,
-            useClass: NgDompurifyDomSanitizer,
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
         },
         {
             provide: SANITIZE_STYLE,
-            useValue: ɵ_sanitizeStyle,
+            useValue: yourImplementation,
         },
         {
             provide: DOMPURIFY_HOOKS,

projects/demo/src/app/app.component.html

@@ -1,8 +1,3 @@
-<p>
-    In these examples <code>ng-dompurify</code> is configured to use
-    <code>ɵ_sanitizeStyle</code> from <code>'@angular/core'</code> as
-    <code>SANITIZE_STYLE</code>.
-</p>
 <h1>
     Pipe
 </h1>

projects/demo/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, SecurityContext} from '@angular/core';
 import {DomSanitizer, SafeValue} from '@angular/platform-browser';
 
-const dirtyHtml = `<p style="color: red; background: expression(evil)"> HELLO <iframe//src=JavaScript:alert&lpar;1)></ifrAMe><br>goodbye</p>`;
+const dirtyHtml = `<p style="color: red;"> HELLO <iframe//src=JavaScript:alert&lpar;1)></ifrAMe><br>goodbye</p>`;
 const svg = `<svg width="56" height="56">
     <path fill="#D75A4A" style="malicious" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
 </svg>`;

projects/demo/src/app/app.module.ts

@@ -1,24 +1,16 @@
-import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
+import {NgModule, Sanitizer} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {BrowserModule, DomSanitizer} from '@angular/platform-browser';
-import {NgDompurifyDomSanitizer, NgDompurifyModule, SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgDompurifyModule, NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
 import {AppComponent} from './app.component';
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        NgDompurifyModule,
-    ],
+    imports: [BrowserModule, FormsModule, NgDompurifyModule],
     providers: [
         {
-            provide: DomSanitizer,
-            useClass: NgDompurifyDomSanitizer,
-        },
-        {
-            provide: SANITIZE_STYLE,
-            useValue: ɵ_sanitizeStyle,
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
         },
     ],
     bootstrap: [AppComponent],

projects/ng-dompurify/src/lib/ng-dompurify.pipe.ts

@@ -18,9 +18,10 @@ export class NgDompurifyPipe implements PipeTransform {
         context: SecurityContext = SecurityContext.HTML,
         config?: NgDompurifyConfig,
     ): SafeValue | null {
-        const sanitizedValue = this.sanitizer.sanitize(context, value, config);
-
-        return this.bypassSecurityTrust(context, sanitizedValue);
+        return this.bypassSecurityTrust(
+            context,
+            this.sanitizer.sanitize(context, value, config),
+        );
     }
 
     private bypassSecurityTrust(

projects/ng-dompurify/src/lib/ng-dompurify.service.ts

@@ -8,8 +8,6 @@ import {SANITIZE_STYLE} from './tokens/sanitize-style';
 import {NgDompurifyConfig} from './types/ng-dompurify-config';
 import {NgDompurifyHook} from './types/ng-dompurify-hook';
 import {SanitizeStyle} from './types/sanitize-style';
-import {createAfterSanitizeAttributes} from './utils/createAfterSanitizeAttributes';
-import {createUponSanitizeElementHook} from './utils/createUponSanitizeElementHook';
 
 const createDOMPurify = dompurify;
 
@@ -38,15 +36,7 @@ export class NgDompurifySanitizer implements Sanitizer {
         @Inject(DOMPURIFY_HOOKS)
         hooks: ReadonlyArray<NgDompurifyHook>,
     ) {
-        this.domPurify = createDOMPurify(defaultView as Window);
-        this.domPurify.addHook(
-            'uponSanitizeElement',
-            createUponSanitizeElementHook(this.sanitizeStyle),
-        );
-        this.domPurify.addHook(
-            'afterSanitizeAttributes',
-            createAfterSanitizeAttributes(this.sanitizeStyle),
-        );
+        this.domPurify = createDOMPurify(defaultView!);
 
         hooks.forEach(({name, hook}) => {
             this.domPurify.addHook(name, hook);