-
Notifications
You must be signed in to change notification settings - Fork 393
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: allow inline styling propagation from CMS (#17988)
Introduce SafeHtmlPipe for bypassing styles from CMS Closes: CXSPA-3708
- Loading branch information
Showing
7 changed files
with
100 additions
and
11 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
<div | ||
*ngIf="component.data$ | async as data" | ||
[innerHTML]="data.content ?? '' | cxSupplementHashAnchors" | ||
[innerHTML]="data.content ?? '' | cxSupplementHashAnchors | cxSafeHtml" | ||
></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
projects/storefrontlib/shared/pipes/safe-html/safe-html.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/* | ||
* SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com> | ||
* | ||
* 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 {} |
40 changes: 40 additions & 0 deletions
40
projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/* | ||
* SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com> | ||
* | ||
* 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 = '<div>Some HTML content</div>'; | ||
const sanitizedHtml = safeHtmlPipe.transform(htmlString); | ||
|
||
expect(sanitizedHtml).toBeDefined(); | ||
}); | ||
}); |
20 changes: 20 additions & 0 deletions
20
projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
/* | ||
* SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com> | ||
* | ||
* 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); | ||
} | ||
} |