PD-5100 (#2759)

Author: cryptalith

projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.ts

@@ -6,6 +6,7 @@ import {
   Output,
 } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
+import { sanitizeHtmlForTrustedBypass } from '../../utils/sanitize-html-for-trusted-bypass'
 import {
   NgClass,
   NgFor,
@@ -80,7 +81,8 @@ export class PermissionNotificationsComponent {
   constructor(private _sanitizer: DomSanitizer) {}
 
   getTrustedHtml(text: string) {
-    return this._sanitizer.bypassSecurityTrustHtml(text)
+    const safe = sanitizeHtmlForTrustedBypass(text ?? '')
+    return this._sanitizer.bypassSecurityTrustHtml(safe)
   }
 
   get visibleNotifications(): RegistryPermissionNotification[] {

projects/orcid-registry-ui/src/lib/utils/sanitize-html-for-trusted-bypass.ts

@@ -0,0 +1,12 @@
+/**
+ * Sanitizes HTML by removing script and style tags (and their content) so the
+ * result is safe to pass to DomSanitizer.bypassSecurityTrustHtml().
+ */
+export function sanitizeHtmlForTrustedBypass(html: string): string {
+  if (typeof html !== 'string') {
+    return ''
+  }
+  return html
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '')
+    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '')
+}

src/app/shared/pipes/safe-html/safe-html.pipe.ts

@@ -1,13 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
+import { sanitizeHtmlForTrustedBypass } from '../../utils/sanitize-html-for-trusted-bypass'
 
 @Pipe({
   name: 'safeHtml',
   standalone: false,
 })
 export class SafeHtmlPipe implements PipeTransform {
   constructor(private sanitized: DomSanitizer) {}
-  transform(value) {
-    return this.sanitized.bypassSecurityTrustHtml(value)
+  transform(value: string | null | undefined) {
+    if (value == null) return value
+    const safe = sanitizeHtmlForTrustedBypass(String(value))
+    return this.sanitized.bypassSecurityTrustHtml(safe)
   }
 }

src/app/shared/pipes/search-term-highlight/search-term-highlight.pipe.spec.ts

@@ -1,14 +1,12 @@
 import { DomSanitizer } from '@angular/platform-browser'
 import { SearchTermHighlightPipe } from './search-term-highlight.pipe'
-import { SecurityContext } from '@angular/core'
 
 describe('HighlightPipe', () => {
   let sanitizer: DomSanitizer
   let pipe: SearchTermHighlightPipe
 
   beforeEach(() => {
     sanitizer = {
-      sanitize: (ctx: SecurityContext, value: any) => value,
       bypassSecurityTrustHtml: (value: string) => value,
     } as any
 
@@ -63,6 +61,14 @@ describe('HighlightPipe', () => {
     expect(pipe.transform(value, searchTerm)).toBe(value)
   })
 
+  it('should strip script tags via sanitizer so scripts are not executed (XSS-safe)', () => {
+    const value = 'Hello <script>alert(1)</script> world'
+    const searchTerm = 'world'
+    const result = pipe.transform(value, searchTerm) as string
+    expect(result).not.toContain('<script>')
+    expect(result).toContain('<span class="highlight">world</span>')
+  })
+
   it('should handle special regex characters in the search term by escaping them', () => {
     const value = 'example with a.dot'
     const searchTerm = 'a.dot'

src/app/shared/pipes/search-term-highlight/search-term-highlight.pipe.ts

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { sanitizeHtmlForTrustedBypass } from '../../utils/sanitize-html-for-trusted-bypass'
 
 @Pipe({
   name: 'searchTermHighlight',
@@ -8,15 +9,20 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 export class SearchTermHighlightPipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}
 
-  transform(value: string, searchTerm: string): SafeHtml {
+  transform(
+    value: string | null | undefined,
+    searchTerm: string | null | undefined
+  ): SafeHtml | string | null | undefined {
     if (!value || !searchTerm) {
       return value
     }
-    const regex = new RegExp(searchTerm, 'gi')
+    const escapedSearch = searchTerm.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
+    const regex = new RegExp(escapedSearch, 'gi')
     const replacedValue = value.replace(
       regex,
       (match) => `<span class="highlight">${match}</span>`
     )
-    return this.sanitizer.bypassSecurityTrustHtml(replacedValue)
+    const sanitized = sanitizeHtmlForTrustedBypass(replacedValue)
+    return this.sanitizer.bypassSecurityTrustHtml(sanitized)
   }
 }

src/app/shared/utils/sanitize-html-for-trusted-bypass.spec.ts

@@ -0,0 +1,28 @@
+import { sanitizeHtmlForTrustedBypass } from './sanitize-html-for-trusted-bypass'
+
+describe('sanitizeHtmlForTrustedBypass', () => {
+  it('strips script tags and their content', () => {
+    const html = 'Hello <script>alert(1)</script> world'
+    expect(sanitizeHtmlForTrustedBypass(html)).toBe('Hello  world')
+  })
+
+  it('strips script tags with attributes', () => {
+    const html = 'Foo <script type="text/javascript">evil()</script> bar'
+    expect(sanitizeHtmlForTrustedBypass(html)).toBe('Foo  bar')
+  })
+
+  it('strips style tags and their content', () => {
+    const html = 'Text <style>.x { color: red }</style> more'
+    expect(sanitizeHtmlForTrustedBypass(html)).toBe('Text  more')
+  })
+
+  it('leaves safe markup intact', () => {
+    const html = '<span class="highlight">safe</span>'
+    expect(sanitizeHtmlForTrustedBypass(html)).toBe(html)
+  })
+
+  it('returns empty string for non-string input', () => {
+    expect(sanitizeHtmlForTrustedBypass(null as any)).toBe('')
+    expect(sanitizeHtmlForTrustedBypass(undefined as any)).toBe('')
+  })
+})

src/app/shared/utils/sanitize-html-for-trusted-bypass.ts

@@ -0,0 +1,14 @@
+/**
+ * Sanitizes HTML by removing script and style tags (and their content) so the
+ * result is safe to pass to DomSanitizer.bypassSecurityTrustHtml().
+ * Use this whenever you need to render HTML that may contain user/content while
+ * allowing only safe markup (e.g. no scripts).
+ */
+export function sanitizeHtmlForTrustedBypass(html: string): string {
+  if (typeof html !== 'string') {
+    return ''
+  }
+  return html
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '')
+    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '')
+}