Merge pull request #4388 from GabrielInTheWorld/correct-rendering-text

Adds sanitizer to render text correctly

client/src/app/site/agenda/components/topic-detail/topic-detail.component.html

@@ -31,7 +31,7 @@
     <div>
         <span *ngIf="!editTopic">
             <!-- Render topic text as HTML -->
-            <div [innerHTML]="topic.text"></div>
+            <div [innerHTML]="sanitizedText(topic.text)"></div>
         </span>
     </div>
 

client/src/app/site/agenda/components/topic-detail/topic-detail.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Title } from '@angular/platform-browser';
+import { Title, DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { MatSnackBar } from '@angular/material';
 
 import { TranslateService } from '@ngx-translate/core';
@@ -89,7 +89,8 @@ export class TopicDetailComponent extends BaseViewComponent {
         private promptService: PromptService,
         private operator: OperatorService,
         private mediafileRepo: MediafileRepositoryService,
-        private itemRepo: ItemRepositoryService
+        private itemRepo: ItemRepositoryService,
+        private sanitizer: DomSanitizer
     ) {
         super(title, translate, matSnackBar);
         this.getTopicByUrl();
@@ -256,4 +257,16 @@ export class TopicDetailComponent extends BaseViewComponent {
             this.setEditMode(false);
         }
     }
+
+    /**
+     * Function to sanitize text.
+     * Necessary to render styles etc. correctly.
+     *
+     * @param text which will be sanitized.
+     *
+     * @returns safeHtml which can be displayed whithout loss.
+     */
+    public sanitizedText(text: string): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(text);
+    }
 }

client/src/app/site/users/components/user-detail/user-detail.component.html

@@ -177,7 +177,7 @@
             <!-- The HTML Editor -->
             <h4 translate *ngIf="user.about_me || editUser">About me</h4>
             <editor formControlName="about_me" [init]="tinyMceSettings" *ngIf="editUser"></editor>
-            <div *ngIf="user.about_me && !editUser" [innerHTML]="user.about_me"></div>
+            <div *ngIf="user.about_me && !editUser" [innerHTML]="sanitizedText(user.about_me)"></div>
         </div>
 
         <div *ngIf="isAllowed('seePersonal')">

client/src/app/site/users/components/user-detail/user-detail.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material';
-import { Title } from '@angular/platform-browser';
+import { Title, SafeHtml, DomSanitizer } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -96,7 +96,8 @@ export class UserDetailComponent extends BaseViewComponent implements OnInit {
         private operator: OperatorService,
         private promptService: PromptService,
         private pdfService: UserPdfExportService,
-        private groupRepo: GroupRepositoryService
+        private groupRepo: GroupRepositoryService,
+        private sanitizer: DomSanitizer
     ) {
         super(title, translate, matSnackBar);
         // prevent 'undefined' to appear in the ui
@@ -394,4 +395,16 @@ export class UserDetailComponent extends BaseViewComponent implements OnInit {
     public onDownloadPdf(): void {
         this.pdfService.exportSingleUserAccessPDF(this.user);
     }
+
+    /**
+     * Function to sanitize the text.
+     * Necessary to render text etc. correctly.
+     *
+     * @param text which should be sanitized.
+     *
+     * @returns safeHtml which can be displayed.
+     */
+    public sanitizedText(text: string): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(text);
+    }
 }

client/src/app/slides/topics/topic/topic-slide.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="data">
     <h1>{{ data.data.title }}</h1>
 
-    <div [innerHTML]="data.data.text"></div>
+    <div [innerHTML]="sanitizedText(data.data.text)"></div>
 </div>

client/src/app/slides/topics/topic/topic-slide.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { BaseSlideComponent } from 'app/slides/base-slide-component';
 import { TopicSlideData } from './topic-slide-data';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
     selector: 'os-topic-slide',
@@ -8,7 +9,19 @@ import { TopicSlideData } from './topic-slide-data';
     styleUrls: ['./topic-slide.component.scss']
 })
 export class TopicSlideComponent extends BaseSlideComponent<TopicSlideData> {
-    public constructor() {
+    public constructor(private sanitizer: DomSanitizer) {
         super();
     }
+
+    /**
+     * Function to sanitize text.
+     * Necessary to render the text correctly.
+     *
+     * @param text which should be displayed.
+     *
+     * @returns safeHtml which can be displayed.
+     */
+    public sanitizedText(text: string): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(text);
+    }
 }