fix: blacklisted emails and invalid attachments getting escaped (#1233)

## Problem
Error emails sent by Plumber for blacklisted emails and invalid
attachments are having `<li>` escaped.
This arose from the fix for the VAPT finding of html injection via pipe
names.

## Solution
Introduced a `trustedHtml` for the blacklisted emails and invalid
attachments, while still escaping the email and attachment name
themselves to be safe.

## Tests
- [ ] Trigger an error email when one or more blacklisted recipients are
detected; the list should be rendered properly
- [ ] Trigger an error email when one or more invalid attachments are
detected; the list should be rendered properly

## Screenshots
<img width="1120" height="459" alt="Screenshot 2025-09-25 at 11 36
35 PM"
src="https://github.com/user-attachments/assets/2c2a196f-1957-45a5-a984-3f593aeb241b"
/>

<img width="1112" height="515" alt="Screenshot 2025-09-25 at 11 37
42 PM"
src="https://github.com/user-attachments/assets/162b13eb-34d6-4ac0-a7a7-e4f8a60360c3"
/>

Author: kevinkim-ogp

packages/backend/src/apps/postman/common/send-blacklist-email.ts

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon'
 
 import { redisClient as pipeErrorRedisClient } from '@/helpers/generate-error-email'
-import { safeHtml } from '@/helpers/html-utils'
+import { escapeHtml, safeHtml, trustedHtml } from '@/helpers/html-utils'
 import { sendEmail } from '@/helpers/send-email'
 
 const MAX_LENGTH = 80
@@ -58,7 +58,11 @@ function createBodyErrorMessage(props: BlacklistEmailProps): string {
     <br>
     We have detected that your pipe <strong>${flowName}</strong> has attempted to send an email to one or more blacklisted email addresses:
     <ul>
-      ${blacklistedRecipients.map((email) => `<li>${email}</li>`).join('\n')}
+      ${trustedHtml(
+        blacklistedRecipients
+          .map((email) => `<li>${escapeHtml(email)}</li>`)
+          .join('\n'),
+      )}
     </ul>
     Emails could be blacklisted for one of the following reasons:
     <ul>

packages/backend/src/apps/postman/common/send-invalid-attachments-email.ts

@@ -1,5 +1,5 @@
 import { truncateFlowName } from '@/helpers/generate-error-email'
-import { safeHtml } from '@/helpers/html-utils'
+import { escapeHtml, safeHtml, trustedHtml } from '@/helpers/html-utils'
 import { sendEmail } from '@/helpers/send-email'
 
 interface SendInvalidAttachmentsEmailProps {
@@ -23,7 +23,9 @@ export function createInvalidAttachmentsMessage(props: CreateMessageProps) {
   const bodyMessage = safeHtml`
     We have detected that your pipe <strong>${flowName}</strong> has attempted to send an email with one or more attachments that are not supported:
     <ul>
-        ${invalidAttachments.map((a) => `<li>${a}</li>`).join('\n')}
+        ${trustedHtml(
+          invalidAttachments.map((a) => `<li>${escapeHtml(a)}</li>`).join('\n'),
+        )}
     </ul>
     The details of the affected execution are as follows:
     <ul>

packages/backend/src/helpers/__tests__/html-utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { escapeHtml, safeHtml } from '../html-utils'
+import { escapeHtml, safeHtml, trustedHtml } from '../html-utils'
 
 describe('html utils', () => {
   describe('escapeHtml', () => {
@@ -49,6 +49,26 @@ describe('html utils', () => {
   })
 })
 
+describe('trustedHtml', () => {
+  it('should create a trusted HTML object', () => {
+    const html = '<div>Hello World</div>'
+    const trusted = trustedHtml(html)
+
+    expect(trusted).toEqual({
+      __html: html,
+      __trusted: true,
+    })
+  })
+
+  it('should preserve HTML tags in trusted content', () => {
+    const html = '<script>alert("XSS")</script><b>Bold</b>'
+    const trusted = trustedHtml(html)
+
+    expect(trusted.__html).toBe(html)
+    expect(trusted.__trusted).toBe(true)
+  })
+})
+
 describe('safeHtml', () => {
   it('should escape multiple HTML values in a string', () => {
     const testVariable = '<b>Hello</b>'
@@ -63,4 +83,94 @@ describe('safeHtml', () => {
       With a new line: ${testVariable2}
     `).toBe(expected)
   })
+
+  it('should not escape trusted HTML content', () => {
+    const trustedContent = trustedHtml('<li>Item 1</li><li>Item 2</li>')
+    const regularContent = '<script>alert("XSS")</script>'
+
+    const result = safeHtml`
+      <ul>
+        ${trustedContent}
+      </ul>
+      <p>Regular content: ${regularContent}</p>
+    `
+
+    expect(result).toContain('<li>Item 1</li><li>Item 2</li>')
+    expect(result).toContain(
+      '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;',
+    )
+  })
+
+  it('should handle mixed trusted and regular content', () => {
+    const trustedList = trustedHtml(
+      '<li>Safe item</li><li>Another safe item</li>',
+    )
+    const dangerousContent = '<script>alert("XSS")</script>'
+    const safeText = 'Hello World'
+
+    const result = safeHtml`
+      <div>
+        <h1>${safeText}</h1>
+        <ul>
+          ${trustedList}
+        </ul>
+        <p>Dangerous: ${dangerousContent}</p>
+      </div>
+    `
+
+    expect(result).toContain('<h1>Hello World</h1>')
+    expect(result).toContain('<li>Safe item</li><li>Another safe item</li>')
+    expect(result).toContain(
+      '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;',
+    )
+  })
+
+  it('should handle trusted HTML with escaped content inside', () => {
+    const userInput = '<script>alert("XSS")</script>'
+    const escapedUserInput = escapeHtml(userInput)
+    const trustedContent = trustedHtml(`<li>${escapedUserInput}</li>`)
+
+    const result = safeHtml`
+      <ul>
+        ${trustedContent}
+      </ul>
+    `
+
+    expect(result).toContain(
+      '<li>&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</li>',
+    )
+    expect(result).not.toContain('<script>')
+  })
+
+  it('should handle multiple trusted HTML objects', () => {
+    const trusted1 = trustedHtml('<strong>Bold text</strong>')
+    const trusted2 = trustedHtml('<em>Italic text</em>')
+    const regularText = 'Normal text'
+
+    const result = safeHtml`
+      <p>${trusted1} and ${trusted2} with ${regularText}</p>
+    `
+
+    expect(result).toContain('<strong>Bold text</strong>')
+    expect(result).toContain('<em>Italic text</em>')
+    expect(result).toContain('Normal text')
+  })
+
+  it('should handle null and undefined values gracefully', () => {
+    const trustedContent = trustedHtml('<div>Content</div>')
+    const nullValue = null as null
+    const undefinedValue = undefined as undefined
+
+    const result = safeHtml`
+      <div>
+        ${trustedContent}
+        <p>Null: ${nullValue}</p>
+        <p>Undefined: ${undefinedValue}</p>
+      </div>
+    `
+
+    expect(result).toContain('<div>Content</div>')
+    expect(result).toContain('<p>Null: </p>')
+    expect(result).toContain('<p>Undefined: </p>')
+  })
 })

packages/backend/src/helpers/html-utils.ts

@@ -9,19 +9,31 @@ function escapeHtml(unsafe: string): string {
 }
 
 // tag function for safe HTML templates
-function safeHtml(strings: TemplateStringsArray, ...values: string[]): string {
+function safeHtml(
+  strings: TemplateStringsArray,
+  ...values: (string | { __html: string; __trusted: boolean })[]
+): string {
   let result = ''
 
   // Interleave strings and escaped values
   for (let i = 0; i < strings.length; i++) {
     result += strings[i]
 
     if (i < values.length) {
-      result += escapeHtml(values[i])
+      const value = values[i]
+      if (value && typeof value === 'object' && value.__trusted) {
+        result += value.__html
+      } else if (value) {
+        result += escapeHtml(String(value))
+      }
     }
   }
 
   return result
 }
 
-export { escapeHtml, safeHtml }
+function trustedHtml(html: string) {
+  return { __html: html, __trusted: true }
+}
+
+export { escapeHtml, safeHtml, trustedHtml }