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);
+ }
+}