Add option to sanitise HTML in QuillViewHTMLComponent (#1237)

README.md

@@ -446,10 +446,9 @@ As a helper `ngx-quill` provides a component where you can simply pass your html
 
 #### Config
 
-As inputs you can set the `content` and optional the `theme` (default is `snow`).
-
 - content - html string to be presented
 - theme - bubble/snow, default is `snow`
+- sanitize - default: `false`, boolean (uses [DomSanitizer](https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml) to bypass angular html sanitation when set to false) 
 
 ## Security Hint
 

projects/ngx-quill/src/lib/quill-view-html.component.spec.ts

@@ -1,10 +1,10 @@
 import { Component, ViewChild } from '@angular/core'
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'
-
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { QuillViewHTMLComponent } from './quill-view-html.component'
-
 import { QuillModule } from './quill.module'
 
+
+
 describe('Basic QuillViewHTMLComponent', () => {
   let fixture: ComponentFixture<QuillViewHTMLComponent>
 
@@ -76,3 +76,45 @@ describe('QuillViewHTMLComponent - content', () => {
     expect(viewElement.innerHTML).toEqual('<p>test</p>')
   }))
 })
+
+describe('QuillViewHTMLComponent - sanitize', () => {
+  @Component({
+    template: `
+  <quill-view-html [content]="content" [sanitize]="sanitize"></quill-view-html>
+  `
+  })
+  class HTMLComponent {
+    content = '<p>Hallo <img src="wroooong.jpg" onerror="window.alert(\'sanitize me\')"></p>'
+    sanitize = false
+  }
+
+  let fixture: ComponentFixture<HTMLComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HTMLComponent],
+      imports: [QuillModule],
+      providers: QuillModule.forRoot().providers
+    })
+
+    fixture = TestBed.createComponent(HTMLComponent)
+  })
+
+  it('should NOT sanitize content when sanitize parameter is false', () => {
+    fixture.detectChanges()
+
+    const element = fixture.nativeElement
+    const viewElement = element.querySelector('.ql-container.ql-snow.ngx-quill-view-html > .ql-editor')
+    expect(viewElement.innerHTML).toEqual('<p>Hallo <img src="wroooong.jpg" onerror="window.alert(\'sanitize me\')"></p>')
+  })
+
+  it('should sanitize content when sanitize parameter is true', () => {
+    const component = fixture.componentInstance
+    component.sanitize = true
+    fixture.detectChanges()
+
+    const element = fixture.nativeElement
+    const viewElement = element.querySelector('.ql-container.ql-snow.ngx-quill-view-html > .ql-editor')
+    expect(viewElement.innerHTML).toEqual('<p>Hallo <img src="wroooong.jpg"></p>')
+  })
+})

projects/ngx-quill/src/lib/quill-view-html.component.ts

@@ -28,6 +28,7 @@ import {
 export class QuillViewHTMLComponent implements OnChanges {
   @Input() content = ''
   @Input() theme?: string
+  @Input() sanitize = false
 
   innerHTML: SafeHtml = ''
   themeClass = 'ql-snow'
@@ -46,7 +47,8 @@ export class QuillViewHTMLComponent implements OnChanges {
       this.themeClass = `ql-${theme} ngx-quill-view-html`
     }
     if (changes.content) {
-      this.innerHTML = this.sanitizer.bypassSecurityTrustHtml(changes.content.currentValue)
+      const content = changes.content.currentValue
+      this.innerHTML = this.sanitize ? content : this.sanitizer.bypassSecurityTrustHtml(content)
     }
   }
 }