Fix ESLint Security issues

src/app/iframe/iframe.component.html

@@ -1,2 +1,2 @@
-<iframe #iframe [src]="iframeUrl"></iframe>
+<iframe #iframe></iframe>
 <app-loading></app-loading>

src/app/iframe/iframe.component.ts

@@ -1,5 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { LoadingService } from '../loading.service';
@@ -11,11 +10,10 @@
     styleUrls: ['./iframe.component.css'],
     standalone: false
 })
-export class IframeComponent implements OnDestroy, OnInit {
+export class IframeComponent implements AfterViewInit, OnDestroy, OnInit {
     @ViewChild('iframe') iframe: ElementRef;
 
     url: string;
-    iframeUrl: SafeResourceUrl;
     cssSubscription: Subscription;
     widgetSubscription: Subscription;
     theme: string;
@@ -24,7 +22,6 @@
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        private sanitizer: DomSanitizer,
         private metadataService: MetadataRepositoryService,
         private loading: LoadingService) {
         this.route.params.subscribe((params) => {
@@ -36,14 +33,22 @@
                 this.loading.show();
                 this.theme = params['theme'];
                 this.url = document.getElementsByTagName('base')[0].href + (widget ? 'preview' : 'wizard') + '/' + this.theme;
-                this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+                if(this.iframe) {
+                    this.iframe.nativeElement.src = this.url;
+                }
             }
         });
     }
 
-    receiveMessage(e): void {
+    ngAfterViewInit(): void {
+        if(this.url) {
+            this.iframe.nativeElement.src = this.url;
+        }
+    }
+
+    receiveMessage(e: MessageEvent): void {
         if(e.data.widget) {
             this.router.navigate(['/advanced', this.metadataService.theme.name, this.metadataService.theme.colorScheme, e.data.widget]);
         }
 
         if(e.data.hideLoading) {

src/app/left-menu/editor/editor.component.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import { Component, Input } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
 import { MetadataRepositoryService } from '../../meta-repository.service';
@@ -33,7 +32,7 @@ export class EditorComponent {
         return /^[1-9]\d*$/.test(value);
     }
 
-    highlight(text: string): SafeHtml {
+    highlight(text: string): string {
         return this.names.getHighlightedForLeftMenuName(text, this.searchText);
     }
 

src/app/left-menu/main/left-menu.component.ts

@@ -9,7 +9,6 @@ import { NamesService } from '../../names.service';
 import { LeftMenuItem } from '../../types/left-menu-item';
 import { MetaItem } from '../../types/meta-item';
 import { LeftMenuAlias } from '../left-menu.aliases';
-import { SafeHtml } from '@angular/platform-browser';
 import { AnalyticsEventsService } from '../../analytics-events.service';
 
 const BASE_THEMING_NAME = 'Basic Settings';
@@ -148,7 +147,7 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         this.filteredData[0] = this.workArea;
     }
 
-    getRealName(name): SafeHtml {
+    getRealName(name): string {
         return this.names.getHighlightedForLeftMenuName(name, this.searchKeyword);
     }
 

src/app/names.service.ts

@@ -1,24 +1,20 @@
 import { Injectable } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Injectable()
 export class NamesService {
 
-    constructor(private sanitizer: DomSanitizer) { }
-
     private ORDER_REGEX = /^(\d+).\s/;
 
     getRealName(orderedName): string {
         return orderedName.replace(this.ORDER_REGEX, '');
     }
 
-    getHighlightedForLeftMenuName(orderedName, searchText): SafeHtml {
+    getHighlightedForLeftMenuName(orderedName, searchText): string {
         const text = this.getRealName(orderedName);
         if(!searchText) return text;
 
-        const highlightedText = text.replace(new RegExp(`(${searchText})`, 'ig'), '<span style="color:#f05b41">$1</span>');
-
-        return this.sanitizer.bypassSecurityTrustHtml(highlightedText);
+        const escapedSearch = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return text.replace(new RegExp(`(${escapedSearch})`, 'ig'), '<span class="search-highlight">$1</span>');
     }
 
     sortNames(name1, name2): number {

src/app/preview/drawer/drawer.component.ts

@@ -1,4 +1,4 @@
-/*eslint no-invalid-this: ['Off']*/
+/* eslint-disable no-invalid-this */
 import { Component, ViewChild } from '@angular/core';
 import { DxDrawerComponent } from 'devextreme-angular';
 import { Subject } from 'rxjs';

src/styles.css

@@ -59,3 +59,8 @@ body {
         overflow-y: hidden;
     }
 }
+
+
+.search-highlight {
+    color: #f05b41;
+}