From 4f7156438b351d6a4c7f4f897241aac7717fbee4 Mon Sep 17 00:00:00 2001 From: Nelson Dominguez <18242749+ekkolon@users.noreply.github.com> Date: Wed, 1 Feb 2023 21:52:10 +0100 Subject: [PATCH 1/3] build(deps): :heavy_minus_sign: remove unneccessary dompurify dependency This dependency is removed because there is no need to sanitize the initially created element. Closes #4 --- package.json | 2 -- projects/ngx-gist/package.json | 1 - .../ngx-gist/src/lib/ngx-gist.component.ts | 21 +++++++++++-------- yarn.lock | 17 --------------- 4 files changed, 12 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 0b0a892..49f0aee 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "@angular/platform-browser": "^15.1.0", "@angular/platform-browser-dynamic": "^15.1.0", "@angular/router": "^15.1.0", - "dompurify": "^2.4.3", "iframe-resizer": "^4.3.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -28,7 +27,6 @@ "@angular-devkit/build-angular": "^15.1.3", "@angular/cli": "~15.1.3", "@angular/compiler-cli": "^15.1.0", - "@types/dompurify": "^2.4.0", "@types/iframe-resizer": "^3.5.9", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", diff --git a/projects/ngx-gist/package.json b/projects/ngx-gist/package.json index 461ec59..b02fac4 100644 --- a/projects/ngx-gist/package.json +++ b/projects/ngx-gist/package.json @@ -24,7 +24,6 @@ "peerDependencies": { "@angular/common": "^15.1.0", "@angular/core": "^15.1.0", - "dompurify": "^2.4.3", "iframe-resizer": "^4.3.3" }, "dependencies": { diff --git a/projects/ngx-gist/src/lib/ngx-gist.component.ts b/projects/ngx-gist/src/lib/ngx-gist.component.ts index 0ea4e2c..59aa2f7 100644 --- a/projects/ngx-gist/src/lib/ngx-gist.component.ts +++ b/projects/ngx-gist/src/lib/ngx-gist.component.ts @@ -6,18 +6,18 @@ * found in the LICENSE file at the root of this project. */ +import {DOCUMENT} from '@angular/common'; import { ChangeDetectionStrategy, Component, ElementRef, + Inject, Input, Renderer2, ViewChild, } from '@angular/core'; import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; -import * as DOMPurify from 'dompurify'; - import {NgxIFrameResizerDirective} from './ngx-gist-iframe-resizer.directive'; const IFRAME_RESIZER_CONTENT_WINDOW_CDN_URL = @@ -88,7 +88,11 @@ export class NgxGistComponent { */ srcdoc?: SafeHtml; - constructor(private sanitizer: DomSanitizer, private renderer2: Renderer2) {} + constructor( + private sanitizer: DomSanitizer, + private renderer2: Renderer2, + @Inject(DOCUMENT) private document: Document + ) {} ngOnInit(): void { this.initializeIFrame(); @@ -98,13 +102,12 @@ export class NgxGistComponent { // Set unique id for iframe this.renderer2.setAttribute(this.iframe.nativeElement, 'id', `gist-${this.gistId}`); - const content = ``; - const sanitized = DOMPurify.sanitize(content, {FORBID_TAGS: ['script'], RETURN_DOM: true}); - - this.renderer2.appendChild(sanitized, this.createIframeResizerContentWindowScripts()); - this.renderer2.appendChild(sanitized, this.createGistScript()); + const template = this.document.createRange().createContextualFragment(''); + this.renderer2.appendChild(template, this.createIframeResizerContentWindowScripts()); + this.renderer2.appendChild(template, this.createGistScript()); + const serializedHTML = new XMLSerializer().serializeToString(template); - this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(sanitized.outerHTML); + this.srcdoc = this.sanitizer.bypassSecurityTrustHtml(serializedHTML); // Attach target="_blank" to links in iframe. // This is needed because the iframe prevents opening links in a new tab. diff --git a/yarn.lock b/yarn.lock index 52ab387..3f75366 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1537,13 +1537,6 @@ dependencies: "@types/node" "*" -"@types/dompurify@^2.4.0": - version "2.4.0" - resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.4.0.tgz#fd9706392a88e0e0e6d367f3588482d817df0ab9" - integrity sha512-IDBwO5IZhrKvHFUl+clZxgf3hn2b/lU6H1KaBShPkQyGJUQ0xwebezIPSuiyGwfz1UzJWQl4M7BDxtHtCCPlTg== - dependencies: - "@types/trusted-types" "*" - "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -1668,11 +1661,6 @@ dependencies: "@types/node" "*" -"@types/trusted-types@*": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" - integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== - "@types/ws@^8.5.1": version "8.5.4" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5" @@ -2742,11 +2730,6 @@ domhandler@^4.2.0, domhandler@^4.3.1: dependencies: domelementtype "^2.2.0" -dompurify@^2.4.3: - version "2.4.3" - resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.3.tgz#f4133af0e6a50297fc8874e2eaedc13a3c308c03" - integrity sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ== - domutils@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" From 643782326a7e1d8165dbf90ae557a6d4430efe25 Mon Sep 17 00:00:00 2001 From: Nelson Dominguez <18242749+ekkolon@users.noreply.github.com> Date: Wed, 1 Feb 2023 21:57:01 +0100 Subject: [PATCH 2/3] perf: :zap: run iframe initialization outside the Angular zone --- projects/ngx-gist/src/lib/ngx-gist.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/ngx-gist/src/lib/ngx-gist.component.ts b/projects/ngx-gist/src/lib/ngx-gist.component.ts index 59aa2f7..01b6c21 100644 --- a/projects/ngx-gist/src/lib/ngx-gist.component.ts +++ b/projects/ngx-gist/src/lib/ngx-gist.component.ts @@ -13,6 +13,7 @@ import { ElementRef, Inject, Input, + NgZone, Renderer2, ViewChild, } from '@angular/core'; @@ -91,11 +92,15 @@ export class NgxGistComponent { constructor( private sanitizer: DomSanitizer, private renderer2: Renderer2, + private ngZone: NgZone, @Inject(DOCUMENT) private document: Document ) {} ngOnInit(): void { - this.initializeIFrame(); + // Run outside of Angular zone to prevent change detection from running + this.ngZone.runOutsideAngular(() => { + this.initializeIFrame(); + }); } private initializeIFrame() { From bbe90b21da433b1b676de423cd8771ae14e0fca8 Mon Sep 17 00:00:00 2001 From: Nelson Dominguez <18242749+ekkolon@users.noreply.github.com> Date: Wed, 1 Feb 2023 22:05:44 +0100 Subject: [PATCH 3/3] docs: :memo: remove dompurify from install command --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0632a27..eb0fa3c 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ The iframe in which the gist embed is rendered, will automatically adjust it's s Install required peer dependencies: ```bash - npm install iframe-resizer dompurify + npm install iframe-resizer ``` Install the library: