fix(bridge): Render html in notifications (#7523)

* create sanitize html pipe

Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>

* use sanitizeHtml in notifications

Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>

* add some unit tests for sanitize html

Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>

* test css classes are allowed

Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>

* revert: show git notification with html template

Signed-off-by: ermin.muratovic <ermin.muratovic@gmail.com>

bridge/client/app/_components/ktb-notification/ktb-notification.component.html

@@ -6,7 +6,7 @@
 >
   <div fxLayout="row" fxLayoutAlign="space-between center">
     <dt-icon *ngIf="notification.isPinned" name="pin" class="pin-icon"></dt-icon>
-    <span *ngIf="!notification.componentInfo" [textContent]="notification.message"></span>
+    <span *ngIf="!notification.componentInfo" [innerHTML]="notification.message | sanitizeHtml"></span>
     <ng-template #showComponent></ng-template>
     <div>
       <button

bridge/client/app/_components/ktb-project-settings/ktb-project-settings.component.ts

@@ -132,7 +132,8 @@ export class KtbProjectSettingsComponent implements OnInit, OnDestroy, PendingCh
         gitUser: project.gitUser,
       };
       this.gitInputDataExtendedDefault = project.gitUpstream;
-      this.gitInputDataExtended = AppUtils.copyObject(project.gitUpstream); // there should not be a reference. Could lead to problems when the form is reset
+      this.gitInputDataExtended = AppUtils.copyObject(project.gitUpstream); // there should not be a reference. Could
+      // lead to problems when the form is reset
 
       this.isProjectLoading = false;
     });
@@ -197,7 +198,7 @@ export class KtbProjectSettingsComponent implements OnInit, OnDestroy, PendingCh
             this.isGitUpstreamInProgress = false;
             this.notificationsService.addNotification(
               NotificationType.ERROR,
-              `The Git upstream could not be changed: ${err.error}`
+              `<div class="long-note align-left p-3">The Git upstream could not be changed:<br/><span class="small">${err.error}</span></div>`
             );
           }
         );

bridge/client/app/_pipes/sanitize-html.pipe.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { SanitizeHtmlPipe } from './sanitize-html.pipe';
+import { DomSanitizer } from '@angular/platform-browser';
+
+describe('SanitizeHtml', () => {
+  let sanitizer: DomSanitizer;
+  let pipe: SanitizeHtmlPipe;
+
+  beforeEach(async () => {
+    sanitizer = TestBed.inject(DomSanitizer);
+    pipe = new SanitizeHtmlPipe(sanitizer);
+  });
+
+  it('sanitize simple html', () => {
+    expect(pipe.transform('<p>Some text</p>')).toBe('<p>Some text</p>');
+  });
+
+  it('sanitize html with classes', () => {
+    expect(pipe.transform('<p class="align-left">Some text</p>')).toBe('<p class="align-left">Some text</p>');
+  });
+
+  it('sanitize html with some script', () => {
+    expect(pipe.transform('<p>Some text</p><script>alert("hello world")</script>')).toBe('<p>Some text</p>');
+  });
+
+  it('sanitize html with onerror', () => {
+    expect(pipe.transform('<p>Some text</p><img src="not-available.png" onerror=alert("hello world") />')).toBe(
+      '<p>Some text</p><img src="not-available.png">'
+    );
+  });
+});

bridge/client/app/_pipes/sanitize-html.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'sanitizeHtml',
+})
+export class SanitizeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(html: string): string | null {
+    return this.sanitizer.sanitize(SecurityContext.HTML, html);
+  }
+}

bridge/client/app/app.module.ts

@@ -167,6 +167,7 @@ import { KtbSshKeyInputComponent } from './_components/ktb-ssh-key-input/ktb-ssh
 import { KtbProjectSettingsGitSshInputComponent } from './_components/ktb-project-settings-git-ssh-input/ktb-project-settings-git-ssh-input.component';
 import { KtbLoadingDistractorComponent } from './_components/ktb-loading-distractor/ktb-loading-distractor.component';
 import { KtbLoadingSpinnerComponent } from './_components/ktb-loading-spinner/ktb-loading-spinner.component';
+import { SanitizeHtmlPipe } from './_pipes/sanitize-html.pipe';
 
 registerLocaleData(localeEn, 'en');
 
@@ -275,6 +276,7 @@ export function init_app(appLoadService: AppInitService): () => Promise<unknown>
     KtbProjectSettingsGitSshInputComponent,
     KtbLoadingDistractorComponent,
     KtbLoadingSpinnerComponent,
+    SanitizeHtmlPipe,
   ],
   imports: [
     BrowserModule,