MAREJ014 Assessment One Submission

frontend/src/app/about/about.component.ts

@@ -12,6 +12,7 @@ import { dom, library } from '@fortawesome/fontawesome-svg-core'
 import { faFacebook, faReddit, faSlack, faTwitter } from '@fortawesome/free-brands-svg-icons'
 import { faNewspaper, faStar } from '@fortawesome/free-regular-svg-icons'
 import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons'
+import { SecurityHelper } from '../helpers/security-helper'
 
 library.add(faFacebook, faTwitter, faSlack, faReddit, faNewspaper, faStar, fasStar)
 dom.watch()
@@ -78,7 +79,7 @@ export class AboutComponent implements OnInit {
       for (let i = 0; i < feedbacks.length; i++) {
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         feedbacks[i].comment = `<span style="width: 90%; display:block;">${feedbacks[i].comment}<br/> (${this.stars[feedbacks[i].rating]})</span>`
-        feedbacks[i].comment = this.sanitizer.bypassSecurityTrustHtml(feedbacks[i].comment)
+        feedbacks[i].comment = SecurityHelper.sanitizeAndEncodeInputForHTML(this.sanitizer, feedbacks[i].comment)
         this.slideshowDataSource.push({ url: this.images[i % this.images.length], caption: feedbacks[i].comment })
       }
     }, (err) => {

frontend/src/app/administration/administration.component.ts

@@ -14,6 +14,7 @@ import { DomSanitizer } from '@angular/platform-browser'
 import { dom, library } from '@fortawesome/fontawesome-svg-core'
 import { faArchive, faEye, faHome, faTrashAlt, faUser } from '@fortawesome/free-solid-svg-icons'
 import { MatPaginator } from '@angular/material/paginator'
+import { SecurityHelper } from '../helpers/security-helper'
 
 library.add(faUser, faEye, faHome, faArchive, faTrashAlt)
 dom.watch()
@@ -47,8 +48,7 @@ export class AdministrationComponent implements OnInit {
       this.userDataSource = users
       this.userDataSourceHidden = users
       for (const user of this.userDataSource) {
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        user.email = this.sanitizer.bypassSecurityTrustHtml(`<span class="${user.token ? 'confirmation' : 'error'}">${user.email}</span>`)
+        user.email = `<span class="${user.token ? 'confirmation' : 'error'}">${SecurityHelper.sanitizeAndEncodeInputForHTML(this.sanitizer, user.email)}</span>`
       }
       this.userDataSource = new MatTableDataSource(this.userDataSource)
       this.userDataSource.paginator = this.paginatorUsers
@@ -63,7 +63,7 @@ export class AdministrationComponent implements OnInit {
     this.feedbackService.find().subscribe((feedbacks) => {
       this.feedbackDataSource = feedbacks
       for (const feedback of this.feedbackDataSource) {
-        feedback.comment = this.sanitizer.bypassSecurityTrustHtml(feedback.comment)
+        feedback.comment = SecurityHelper.sanitizeAndEncodeInputForHTML(this.sanitizer, feedback.comment)
       }
       this.feedbackDataSource = new MatTableDataSource(this.feedbackDataSource)
       this.feedbackDataSource.paginator = this.paginatorFeedb

frontend/src/app/data-export/data-export.component.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, SecurityContext } from '@angular/core'
 import { UntypedFormControl, Validators } from '@angular/forms'
 import { ImageCaptchaService } from '../Services/image-captcha.service'
 import { DataSubjectService } from '../Services/data-subject.service'
@@ -42,7 +42,7 @@ export class DataExportComponent implements OnInit {
 
   getNewCaptcha () {
     this.imageCaptchaService.getCaptcha().subscribe((data: any) => {
-      this.captcha = this.sanitizer.bypassSecurityTrustHtml(data.image)
+      this.captcha = this.sanitizer.sanitize(SecurityContext.HTML, data.image)
     })
   }
 

frontend/src/app/helpers/security-helper.ts

@@ -0,0 +1,16 @@
+import { DomSanitizer } from '@angular/platform-browser'
+import { SecurityContext } from '@angular/core'
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class SecurityHelper {
+  private static encodeHTML (value: string): string {
+    const element = document.createElement('div')
+    element.innerText = value
+    return element.innerHTML
+  }
+
+  static sanitizeAndEncodeInputForHTML (sanitizer: DomSanitizer, value: string): string {
+    const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, value) || ''
+    return this.encodeHTML(sanitizedInput)
+  }
+}

frontend/src/app/last-login-ip/last-login-ip.component.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { Component } from '@angular/core'
+import { Component, SecurityContext } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import * as jwtDecode from 'jwt-decode'
 
@@ -32,8 +32,7 @@ export class LastLoginIpComponent {
     if (token) {
       payload = jwtDecode(token)
       if (payload.data.lastLoginIp) {
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        this.lastLoginIp = this.sanitizer.bypassSecurityTrustHtml(`<small>${payload.data.lastLoginIp}</small>`)
+        this.lastLoginIp = this.sanitizer.sanitize(SecurityContext.HTML, `<small>${payload.data.lastLoginIp as string}</small>`)
       }
     }
   }

frontend/src/app/score-board/score-board.component.ts

@@ -7,7 +7,7 @@ import { MatTableDataSource } from '@angular/material/table'
 import { DomSanitizer } from '@angular/platform-browser'
 import { ChallengeService } from '../Services/challenge.service'
 import { ConfigurationService } from '../Services/configuration.service'
-import { Component, NgZone, OnInit } from '@angular/core'
+import { Component, NgZone, OnInit, SecurityContext } from '@angular/core'
 import { SocketIoService } from '../Services/socket-io.service'
 import { NgxSpinnerService } from 'ngx-spinner'
 
@@ -179,7 +179,7 @@ export class ScoreBoardComponent implements OnInit {
   }
 
   trustDescriptionHtml (challenge: Challenge) {
-    challenge.description = this.sanitizer.bypassSecurityTrustHtml(challenge.description as string)
+    challenge.description = this.sanitizer.sanitize(SecurityContext.HTML, challenge.description as string)
   }
 
   calculateCodingProgressPercentage () {