diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 37221536397b1a2416829518411be56d64a3d4cb..669fd17b34129f4f9b6b0fda352f28f60e1ef57b 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 ba00f15c0a4d430db241466e9b2e4069873be5a7..7494d0ff48675435ae7d0e82b5314d7fb8bca4e1 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 f9c81aa2b594aadeb80263ce3128d3a5f17a3e1e..8b2db7cc38cb0e256d2280cf803660ee45382ee5 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 42d1383295f70bd550b56fa94e1a211b67a7e7da..4a29a5fa935595c357c0a78bdd1b7dc5df0361ae 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 0000000000000000000000000000000000000000..54dd11ac13258f39d663580b3765feebc66d98c9
--- /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);
+  }
+}