Add new pipe to sanitize HTML.

Signed-off-by: Volker Theile <votdev@gmx.de>
This commit is contained in:
Volker Theile 2021-07-06 18:13:58 +02:00
parent d4fe92e3e9
commit 4546577d68
21 changed files with 81 additions and 23 deletions

View File

@ -59,8 +59,10 @@ import { RpcService } from '~/app/shared/services/rpc.service';
templateUrl: './form-page.component.html',
styleUrls: ['./form-page.component.scss']
})
export class FormPageComponent extends AbstractPageComponent<FormPageConfig>
implements AfterViewInit, OnInit, OnDestroy {
export class FormPageComponent
extends AbstractPageComponent<FormPageConfig>
implements AfterViewInit, OnInit, OnDestroy
{
@BlockUI()
blockUI: NgBlockUI;

View File

@ -8,6 +8,6 @@
{{ config.text | translate }}
</mat-form-button>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -14,6 +14,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</div>

View File

@ -21,6 +21,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -18,6 +18,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint">
[innerHTML]="config.hint | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -54,6 +54,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -46,7 +46,7 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -8,6 +8,6 @@
<mat-icon [svgIcon]="config.icon"></mat-icon>
</mat-form-button>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -40,6 +40,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint">
[innerHTML]="config.hint | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -47,6 +47,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -21,6 +21,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -15,6 +15,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint">
[innerHTML]="config.hint | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -29,6 +29,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint">
[innerHTML]="config.hint | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -15,6 +15,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint">
[innerHTML]="config.hint | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -43,6 +43,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -38,6 +38,6 @@
</span>
</mat-error>
<mat-hint *ngIf="config.hint?.length > 0"
[innerHTML]="config.hint | translate">
[innerHTML]="config.hint | translate | sanitizeHtml">
</mat-hint>
</mat-form-field>

View File

@ -98,7 +98,7 @@
<ng-template #joinTpl
let-value="value"
let-column="column">
<span [innerHTML]="value | join:column?.cellTemplateConfig"></span>
<span [innerHTML]="value | join:column?.cellTemplateConfig | sanitizeHtml"></span>
</ng-template>
<ng-template #truncateTpl
@ -198,7 +198,7 @@
<ng-template #templateTpl
let-column="column"
let-row="row">
<span [innerHTML]="column.cellTemplateConfig | template:row | trustHtml"></span>
<span [innerHTML]="column.cellTemplateConfig | template:row | sanitizeHtml"></span>
</ng-template>
<ng-template #shapeShifterTpl

View File

@ -8,7 +8,7 @@
<div>{{ config.title | translate }}</div>
</div>
<mat-dialog-content>
<span [innerHTML]="config.message | translate"></span>
<span [innerHTML]="config.message | translate | sanitizeHtml"></span>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button *ngFor="let button of config.buttons"

View File

@ -10,6 +10,7 @@ import { LocaleDatePipe } from '~/app/shared/pipes/locale-date.pipe';
import { MapPipe } from '~/app/shared/pipes/map.pipe';
import { MaxPipe } from '~/app/shared/pipes/max.pipe';
import { NotAvailablePipe } from '~/app/shared/pipes/not-available.pipe';
import { SanitizeHtmlPipe } from '~/app/shared/pipes/sanitize-html.pipe';
import { TemplatePipe } from '~/app/shared/pipes/template.pipe';
import { ToBooleanPipe } from '~/app/shared/pipes/to-boolean.pipe';
import { TruncatePipe } from '~/app/shared/pipes/truncate.pipe';
@ -31,7 +32,8 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
TemplatePipe,
TrustHtmlPipe,
UpperFirstPipe,
MaxPipe
MaxPipe,
SanitizeHtmlPipe
],
imports: [CommonModule],
exports: [
@ -48,7 +50,8 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
TemplatePipe,
TrustHtmlPipe,
UpperFirstPipe,
MaxPipe
MaxPipe,
SanitizeHtmlPipe
],
providers: [
ToBooleanPipe,
@ -63,7 +66,9 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
ArrayPipe,
TemplatePipe,
TrustHtmlPipe,
UpperFirstPipe
UpperFirstPipe,
MaxPipe,
SanitizeHtmlPipe
]
})
export class PipesModule {}

View File

@ -0,0 +1,21 @@
import { TestBed } from '@angular/core/testing';
import { DomSanitizer } from '@angular/platform-browser';
import { SanitizeHtmlPipe } from '~/app/shared/pipes/sanitize-html.pipe';
describe('SanitizeHtmlPipe', () => {
let pipe: SanitizeHtmlPipe;
let domSanitizer: DomSanitizer;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [DomSanitizer]
});
domSanitizer = TestBed.inject(DomSanitizer);
pipe = new SanitizeHtmlPipe(domSanitizer);
});
it('create an instance', () => {
expect(pipe).toBeTruthy();
});
});

View File

@ -0,0 +1,30 @@
/**
* This file is part of OpenMediaVault.
*
* @license http://www.gnu.org/licenses/gpl.html GPL Version 3
* @author Volker Theile <volker.theile@openmediavault.org>
* @copyright Copyright (c) 2009-2021 Volker Theile
*
* OpenMediaVault is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* OpenMediaVault is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeValue } from '@angular/platform-browser';
@Pipe({
name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(value: SafeValue | string | null): string | null {
return this.domSanitizer.sanitize(SecurityContext.HTML, value);
}
}