From 7da8011eeeeed041bdef9c25e591fefe3ff759cd Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Thu, 2 Apr 2020 19:59:20 +0300 Subject: [PATCH] refactor(core): separate lazy load & content insertion --- .../src/lib/strategies/loading.strategy.ts | 27 +++------------- .../src/lib/tests/lazy-load-utils.spec.ts | 31 +------------------ .../src/lib/tests/loading.strategy.spec.ts | 23 ++------------ .../core/src/lib/utils/lazy-load-utils.ts | 6 ---- 4 files changed, 8 insertions(+), 79 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/strategies/loading.strategy.ts b/npm/ng-packs/packages/core/src/lib/strategies/loading.strategy.ts index 2882c3f0a6..be89a751ed 100644 --- a/npm/ng-packs/packages/core/src/lib/strategies/loading.strategy.ts +++ b/npm/ng-packs/packages/core/src/lib/strategies/loading.strategy.ts @@ -1,7 +1,6 @@ import { Observable, of } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { fromLazyLoad } from '../utils'; -import { ContentSecurityStrategy, CONTENT_SECURITY_STRATEGY } from './content-security.strategy'; import { CrossOriginStrategy, CROSS_ORIGIN_STRATEGY } from './cross-origin.strategy'; import { DomStrategy, DOM_STRATEGY } from './dom.strategy'; @@ -10,7 +9,6 @@ export abstract class LoadingStrategy(): Observable { return of(null).pipe( switchMap(() => - fromLazyLoad( - this.createElement(), - this.domStrategy, - this.crossOriginStrategy, - this.contentSecurityStrategy, - ), + fromLazyLoad(this.createElement(), this.domStrategy, this.crossOriginStrategy), ), ); } } export class ScriptLoadingStrategy extends LoadingStrategy { - constructor( - src: string, - domStrategy?: DomStrategy, - crossOriginStrategy?: CrossOriginStrategy, - contentSecurityStrategy?: ContentSecurityStrategy, - ) { - super(src, domStrategy, crossOriginStrategy, contentSecurityStrategy); + constructor(src: string, domStrategy?: DomStrategy, crossOriginStrategy?: CrossOriginStrategy) { + super(src, domStrategy, crossOriginStrategy); } createElement(): HTMLScriptElement { @@ -48,13 +36,8 @@ export class ScriptLoadingStrategy extends LoadingStrategy { } export class StyleLoadingStrategy extends LoadingStrategy { - constructor( - href: string, - domStrategy?: DomStrategy, - crossOriginStrategy?: CrossOriginStrategy, - contentSecurityStrategy?: ContentSecurityStrategy, - ) { - super(href, domStrategy, crossOriginStrategy, contentSecurityStrategy); + constructor(href: string, domStrategy?: DomStrategy, crossOriginStrategy?: CrossOriginStrategy) { + super(href, domStrategy, crossOriginStrategy); } createElement(): HTMLLinkElement { diff --git a/npm/ng-packs/packages/core/src/lib/tests/lazy-load-utils.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/lazy-load-utils.spec.ts index 9f1212b78c..7afb343e80 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/lazy-load-utils.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/lazy-load-utils.spec.ts @@ -1,9 +1,4 @@ -import { - ContentSecurityStrategy, - CONTENT_SECURITY_STRATEGY, - DomStrategy, - DOM_STRATEGY, -} from '../strategies'; +import { DomStrategy, DOM_STRATEGY } from '../strategies'; import { CrossOriginStrategy, CROSS_ORIGIN_STRATEGY } from '../strategies/cross-origin.strategy'; import { uuid } from '../utils'; import { fromLazyLoad } from '../utils/lazy-load-utils'; @@ -57,24 +52,6 @@ describe('Lazy Load Utils', () => { expect(element.getAttribute('integrity')).toBe(integrity); }); - it('should not set nonce by default', () => { - const element = document.createElement('link'); - - fromLazyLoad(element); - - expect(element.getAttribute('nonce')).toBeNull(); - }); - - it('should allow setting a content security strategy', () => { - const element = document.createElement('link'); - - const nonce = uuid(); - - fromLazyLoad(element, undefined, undefined, CONTENT_SECURITY_STRATEGY.Strict(nonce)); - - expect(element.getAttribute('nonce')).toBe(nonce); - }); - it('should emit error event on fail and clear callbacks', done => { const error = new CustomEvent('error'); const parentNode = { removeChild: jest.fn() }; @@ -94,9 +71,6 @@ describe('Lazy Load Utils', () => { { setCrossOrigin(_: HTMLLinkElement) {}, } as CrossOriginStrategy, - { - applyCSP(_: HTMLLinkElement) {}, - } as ContentSecurityStrategy, ).subscribe({ error: value => { expect(value).toBe(error); @@ -126,9 +100,6 @@ describe('Lazy Load Utils', () => { { setCrossOrigin(_: HTMLLinkElement) {}, } as CrossOriginStrategy, - { - applyCSP(_: HTMLLinkElement) {}, - } as ContentSecurityStrategy, ).subscribe({ next: value => { expect(value).toBe(success); diff --git a/npm/ng-packs/packages/core/src/lib/tests/loading.strategy.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/loading.strategy.spec.ts index 745b858ff3..4b950cf533 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/loading.strategy.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/loading.strategy.spec.ts @@ -1,15 +1,12 @@ import { - CONTENT_SECURITY_STRATEGY, CROSS_ORIGIN_STRATEGY, DOM_STRATEGY, LOADING_STRATEGY, ScriptLoadingStrategy, StyleLoadingStrategy, } from '../strategies'; -import { uuid } from '../utils'; const path = 'http://example.com/'; -const nonce = uuid(); describe('ScriptLoadingStrategy', () => { describe('#createElement', () => { @@ -26,7 +23,6 @@ describe('ScriptLoadingStrategy', () => { it('should use given dom and cross-origin strategies', done => { const domStrategy = DOM_STRATEGY.PrependToHead(); const crossOriginStrategy = CROSS_ORIGIN_STRATEGY.UseCredentials(); - const contentSecurityStrategy = CONTENT_SECURITY_STRATEGY.Strict(nonce); domStrategy.insertElement = jest.fn((el: HTMLScriptElement) => { setTimeout(() => { @@ -34,23 +30,16 @@ describe('ScriptLoadingStrategy', () => { new CustomEvent('success', { detail: { crossOrigin: el.crossOrigin, - nonce: el.getAttribute('nonce'), }, }), ); }, 0); }) as any; - const strategy = new ScriptLoadingStrategy( - path, - domStrategy, - crossOriginStrategy, - contentSecurityStrategy, - ); + const strategy = new ScriptLoadingStrategy(path, domStrategy, crossOriginStrategy); strategy.createStream().subscribe(event => { expect(event.detail.crossOrigin).toBe('use-credentials'); - expect(event.detail.nonce).toBe(nonce); done(); }); }); @@ -73,7 +62,6 @@ describe('StyleLoadingStrategy', () => { it('should use given dom and cross-origin strategies', done => { const domStrategy = DOM_STRATEGY.PrependToHead(); const crossOriginStrategy = CROSS_ORIGIN_STRATEGY.UseCredentials(); - const contentSecurityStrategy = CONTENT_SECURITY_STRATEGY.Strict(nonce); domStrategy.insertElement = jest.fn((el: HTMLLinkElement) => { setTimeout(() => { @@ -81,23 +69,16 @@ describe('StyleLoadingStrategy', () => { new CustomEvent('success', { detail: { crossOrigin: el.crossOrigin, - nonce: el.getAttribute('nonce'), }, }), ); }, 0); }) as any; - const strategy = new StyleLoadingStrategy( - path, - domStrategy, - crossOriginStrategy, - contentSecurityStrategy, - ); + const strategy = new StyleLoadingStrategy(path, domStrategy, crossOriginStrategy); strategy.createStream().subscribe(event => { expect(event.detail.crossOrigin).toBe('use-credentials'); - expect(event.detail.nonce).toBe(nonce); done(); }); }); diff --git a/npm/ng-packs/packages/core/src/lib/utils/lazy-load-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/lazy-load-utils.ts index 09b4ec4e4f..f602bf06ef 100644 --- a/npm/ng-packs/packages/core/src/lib/utils/lazy-load-utils.ts +++ b/npm/ng-packs/packages/core/src/lib/utils/lazy-load-utils.ts @@ -1,8 +1,4 @@ import { Observable, Observer } from 'rxjs'; -import { - ContentSecurityStrategy, - CONTENT_SECURITY_STRATEGY, -} from '../strategies/content-security.strategy'; import { CrossOriginStrategy, CROSS_ORIGIN_STRATEGY } from '../strategies/cross-origin.strategy'; import { DomStrategy, DOM_STRATEGY } from '../strategies/dom.strategy'; @@ -10,10 +6,8 @@ export function fromLazyLoad( element: HTMLScriptElement | HTMLLinkElement, domStrategy: DomStrategy = DOM_STRATEGY.AppendToHead(), crossOriginStrategy: CrossOriginStrategy = CROSS_ORIGIN_STRATEGY.Anonymous(), - contentSecurityStrategy: ContentSecurityStrategy = CONTENT_SECURITY_STRATEGY.Loose(), ): Observable { crossOriginStrategy.setCrossOrigin(element); - contentSecurityStrategy.applyCSP(element); domStrategy.insertElement(element); return new Observable((observer: Observer) => {