diff --git a/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html b/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html index e112efa1429..fa7883b9cd2 100644 --- a/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html +++ b/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html @@ -1,4 +1,4 @@
diff --git a/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.spec.ts b/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.spec.ts index 8bb242f94e6..25b74e7c443 100644 --- a/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.spec.ts +++ b/projects/storefrontlib/cms-components/content/paragraph/paragraph.component.spec.ts @@ -1,12 +1,12 @@ import { DebugElement, Pipe, PipeTransform } from '@angular/core'; -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { By, SafeHtml } from '@angular/platform-browser'; +import { Router } from '@angular/router'; +import { RouterTestingModule } from '@angular/router/testing'; +import { CmsComponent, CmsParagraphComponent } from '@spartacus/core'; +import { CmsComponentData } from '@spartacus/storefront'; import { BehaviorSubject } from 'rxjs'; import { ParagraphComponent } from './paragraph.component'; -import { CmsComponentData } from '@spartacus/storefront'; -import { CmsParagraphComponent, CmsComponent } from '@spartacus/core'; -import { RouterTestingModule } from '@angular/router/testing'; -import { Router } from '@angular/router'; @Pipe({ name: 'cxSupplementHashAnchors' }) export class MockAnchorPipe implements PipeTransform { @@ -15,6 +15,13 @@ export class MockAnchorPipe implements PipeTransform { } } +@Pipe({ name: 'cxSafeHtml' }) +export class MockSafeHtmlPipe implements PipeTransform { + public transform(html: string): SafeHtml { + return html; + } +} + describe('CmsParagraphComponent in CmsLib', () => { let paragraphComponent: ParagraphComponent; let fixture: ComponentFixture; @@ -41,7 +48,7 @@ describe('CmsParagraphComponent in CmsLib', () => { waitForAsync(() => { TestBed.configureTestingModule({ imports: [RouterTestingModule], - declarations: [MockAnchorPipe, ParagraphComponent], + declarations: [MockAnchorPipe, ParagraphComponent, MockSafeHtmlPipe], providers: [ { provide: CmsComponentData, diff --git a/projects/storefrontlib/cms-components/content/paragraph/paragraph.module.ts b/projects/storefrontlib/cms-components/content/paragraph/paragraph.module.ts index eb616198e86..dad03e9707f 100644 --- a/projects/storefrontlib/cms-components/content/paragraph/paragraph.module.ts +++ b/projects/storefrontlib/cms-components/content/paragraph/paragraph.module.ts @@ -4,15 +4,21 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { CmsConfig, provideDefaultConfig } from '@spartacus/core'; +import { SafeHtmlModule } from '../../../shared/pipes/safe-html/safe-html.module'; import { SupplementHashAnchorsModule } from '../../../shared/pipes/suplement-hash-anchors/supplement-hash-anchors.module'; import { ParagraphComponent } from './paragraph.component'; -import { RouterModule } from '@angular/router'; @NgModule({ - imports: [CommonModule, RouterModule, SupplementHashAnchorsModule], + imports: [ + CommonModule, + RouterModule, + SupplementHashAnchorsModule, + SafeHtmlModule, + ], providers: [ provideDefaultConfig({ cmsComponents: { diff --git a/projects/storefrontlib/shared/pipes/index.ts b/projects/storefrontlib/shared/pipes/index.ts index a2091628b8e..db347db1492 100644 --- a/projects/storefrontlib/shared/pipes/index.ts +++ b/projects/storefrontlib/shared/pipes/index.ts @@ -4,5 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ +export * from './safe-html/safe-html.module'; +export * from './safe-html/safe-html.pipe'; export * from './suplement-hash-anchors/supplement-hash-anchors.module'; export * from './suplement-hash-anchors/supplement-hash-anchors.pipe'; diff --git a/projects/storefrontlib/shared/pipes/safe-html/safe-html.module.ts b/projects/storefrontlib/shared/pipes/safe-html/safe-html.module.ts new file mode 100644 index 00000000000..54eb3ca3668 --- /dev/null +++ b/projects/storefrontlib/shared/pipes/safe-html/safe-html.module.ts @@ -0,0 +1,14 @@ +/* + * SPDX-FileCopyrightText: 2023 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { NgModule } from '@angular/core'; +import { SafeHtmlPipe } from './safe-html.pipe'; + +@NgModule({ + declarations: [SafeHtmlPipe], + exports: [SafeHtmlPipe], +}) +export class SafeHtmlModule {} diff --git a/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.spec.ts b/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.spec.ts new file mode 100644 index 00000000000..4c56af2cf4e --- /dev/null +++ b/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.spec.ts @@ -0,0 +1,40 @@ +/* + * SPDX-FileCopyrightText: 2023 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { TestBed } from '@angular/core/testing'; +import { DomSanitizer } from '@angular/platform-browser'; +import { SafeHtmlPipe } from './safe-html.pipe'; + +describe('SafeHtmlPipe', () => { + let safeHtmlPipe: SafeHtmlPipe; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + SafeHtmlPipe, + { + provide: DomSanitizer, + useValue: { + bypassSecurityTrustHtml: (value: string) => value, + }, + }, + ], + }); + + safeHtmlPipe = TestBed.inject(SafeHtmlPipe); + }); + + it('should create an instance', () => { + expect(safeHtmlPipe).toBeTruthy(); + }); + + it('should bypass security and return SafeHtml', () => { + const htmlString = '
Some HTML content
'; + const sanitizedHtml = safeHtmlPipe.transform(htmlString); + + expect(sanitizedHtml).toBeDefined(); + }); +}); diff --git a/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.ts b/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.ts new file mode 100644 index 00000000000..5796ed42ba0 --- /dev/null +++ b/projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.ts @@ -0,0 +1,20 @@ +/* + * SPDX-FileCopyrightText: 2023 SAP Spartacus team + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; + +/* + * Pipe for bypassing security trust html + */ +@Pipe({ name: 'cxSafeHtml' }) +export class SafeHtmlPipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) {} + + public transform(html: string = ''): SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } +}