fix(Icon): escape title to prevent XSS via bypassSecurityTrustHtml

The a11y `title` (documented as a user-facing label) was interpolated
unescaped into <title> and passed to bypassSecurityTrustHtml, so a value
like </title><img onerror=...> was injected into the DOM. HTML-escape the
title before building the <title> element.

Author: mrholek

projects/coreui-icons-angular/src/lib/icon/icon.component.ts

@@ -5,7 +5,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { HtmlAttributesDirective } from '../shared/html-attr.directive';
 import { IconSetService } from '../icon-set';
 import { IconSize, IIcon, NgCssClass } from './icon.interface';
-import { transformName } from './icon.utils';
+import { escapeHtml, transformName } from './icon.utils';
 
 @Component({
   exportAs: 'cIconComponent',
@@ -62,7 +62,8 @@ export class IconComponent implements IIcon {
   });
 
   readonly #titleCode = computed(() => {
-    return this.title() ? `<title>${this.title()}</title>` : '';
+    const title = this.title();
+    return title ? `<title>${escapeHtml(title)}</title>` : '';
   });
 
   readonly code = computed(() => {

projects/coreui-icons-angular/src/lib/icon/icon.directive.spec.ts

@@ -71,3 +71,40 @@ describe('IconDirective', () => {
     expect(svgEl.nativeElement.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
   });
 });
+
+@Component({
+  template: '<svg [cIcon]="this.iconSet.icons.cilList" [title]="title"></svg>',
+  imports: [IconDirective],
+  providers: [IconSetService]
+})
+class TitleXssTestComponent {
+  iconSet = inject(IconSetService);
+  title = '</title><img src=x onerror="window.__xss=1">';
+
+  constructor() {
+    this.iconSet.icons = { cilList };
+  }
+}
+
+describe('IconDirective title XSS', () => {
+  let fixture: ComponentFixture<TitleXssTestComponent>;
+  let svgEl: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [IconSetService],
+      imports: [IconDirective, TitleXssTestComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TitleXssTestComponent);
+    fixture.detectChanges();
+    svgEl = fixture.debugElement.query(By.css('svg'));
+  });
+
+  it('escapes the title and does not inject markup', () => {
+    expect(svgEl.nativeElement.querySelector('img')).toBeNull();
+    const title = svgEl.nativeElement.querySelector('title');
+    expect(title).toBeTruthy();
+    expect(title.textContent).toBe('</title><img src=x onerror="window.__xss=1">');
+  });
+});

projects/coreui-icons-angular/src/lib/icon/icon.directive.ts

@@ -3,7 +3,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 import { IconSetService } from '../icon-set';
 import { IconSize, IIcon, IPointerEvents, NgCssClass } from './icon.interface';
-import { transformName } from './icon.utils';
+import { escapeHtml, transformName } from './icon.utils';
 
 @Directive({
   exportAs: 'cIcon',
@@ -57,7 +57,8 @@ export class IconDirective implements IIcon {
   });
 
   readonly #titleCode = computed(() => {
-    return this.title() ? `<title>${this.title()}</title>` : '';
+    const title = this.title();
+    return title ? `<title>${escapeHtml(title)}</title>` : '';
   });
 
   readonly code = computed(() => {

projects/coreui-icons-angular/src/lib/icon/icon.utils.ts

@@ -7,3 +7,15 @@ export function toCamelCase(value: string) {
 export function transformName(value: string) {
   return value && value.includes('-') ? toCamelCase(value) : value;
 }
+
+const ESCAPE_HTML_MAP: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#x27;'
+};
+
+export function escapeHtml(value: string): string {
+  return String(value).replace(/[&<>"']/g, (character) => ESCAPE_HTML_MAP[character]);
+}