From 1171de6e66d5dba8788124602eb72710290e54a3 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 31 Aug 2021 09:16:59 +0200
Subject: [PATCH] Use sanitizer for media resources
The urls must be declared as trusted to be accepted by the application.
---
projects/common/app.module.ts | 4 +++-
.../common/element-components/audio.component.ts | 11 ++++-------
.../common/element-components/image.component.ts | 2 +-
.../common/element-components/video.component.ts | 7 ++-----
projects/common/pipes/safe-resource-url.pipe.ts | 13 +++++++++++++
5 files changed, 23 insertions(+), 14 deletions(-)
create mode 100644 projects/common/pipes/safe-resource-url.pipe.ts
diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 372215363..669fd17b3 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -32,6 +32,7 @@ import { ImageComponent } from './element-components/image.component';
import { VideoComponent } from './element-components/video.component';
import { AudioComponent } from './element-components/audio.component';
import { CorrectionComponent } from './element-components/compound-components/correction.component';
+import { SafeResourceUrlPipe } from './pipes/safe-resource-url.pipe';
@NgModule({
imports: [
@@ -59,7 +60,8 @@ import { CorrectionComponent } from './element-components/compound-components/co
RadioButtonGroupComponent,
CheckboxComponent,
DropdownComponent,
- CorrectionComponent
+ CorrectionComponent,
+ SafeResourceUrlPipe
],
exports: [
CommonModule,
diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index ba00f15c0..7494d0ff4 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -5,13 +5,10 @@ import { ElementComponent } from '../element-component.directive';
@Component({
selector: 'app-audio',
template: `
- <audio controls src="{{elementModel.src}}"
- [style.width.%]="100">
- </audio>
- `,
- styles: [
- 'div {display: inline-block; border: 5px solid; padding: 12px 9px 9px 9px;}'
- ]
+ <audio controls [src]="elementModel.src | safeResourceUrl"
+ [style.width.%]="100">
+ </audio>
+ `
})
export class AudioComponent extends ElementComponent {
elementModel!: AudioElement;
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index f9c81aa2b..8b2db7cc3 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -5,7 +5,7 @@ import { ElementComponent } from '../element-component.directive';
@Component({
selector: 'app-image',
template: `
- <img src="{{elementModel.src}}"
+ <img [src]="elementModel.src | safeResourceUrl"
alt="Image Placeholder"
[style.width.%]="100">
`
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 42d138329..4a29a5fa9 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -5,13 +5,10 @@ import { ElementComponent } from '../element-component.directive';
@Component({
selector: 'app-video',
template: `
- <video controls src="{{elementModel.src}}"
+ <video controls [src]="elementModel.src | safeResourceUrl"
[style.width.%]="100">
</video>
- `,
- styles: [
- 'div {display: inline-block;border: 5px solid; padding: 12px 9px 9px 9px}'
- ]
+ `
})
export class VideoComponent extends ElementComponent {
elementModel!: VideoElement;
diff --git a/projects/common/pipes/safe-resource-url.pipe.ts b/projects/common/pipes/safe-resource-url.pipe.ts
new file mode 100644
index 000000000..54dd11ac1
--- /dev/null
+++ b/projects/common/pipes/safe-resource-url.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Pipe({
+ name: 'safeResourceUrl'
+})
+export class SafeResourceUrlPipe implements PipeTransform {
+ constructor(private sanitizer: DomSanitizer) {}
+
+ transform(resourceUrl: string): SafeResourceUrl {
+ return this.sanitizer.bypassSecurityTrustResourceUrl(resourceUrl);
+ }
+}
--
GitLab