PLU-559: HTML injection via pipe name to blacklist emails (#1204)

## Problem
Plumber sends error emails via Postman when a recipient is blacklisted.
In these emails, the pipe title is directly interpolated into the HTML
body without sanitisation. This means if the pipe name includes HTML
tags, they will be embedded into the email.

This is not really a major issue since Postman sanitises the input
before sending the email.

## Solution
1. Sanitise the pipe name using `DOMPurify`
2. Escape the HTML so we display the Pipe name as-is if the user insists
on having HTML tags in their pipe names.

## Screenshots
<img width="368" height="94" alt="Screenshot 2025-09-10 at 6 02 00 PM"
src="https://github.com/user-attachments/assets/a14ee99f-ac1b-40e6-a447-a6f45a0a4513"
/>
<img width="1117" height="173" alt="Screenshot 2025-09-10 at 6 04 21 PM"
src="https://github.com/user-attachments/assets/24fb5d70-90f1-422f-a829-f92a0f81b8f2"
/>

<img width="250" height="72" alt="Screenshot 2025-09-10 at 6 05 20 PM"
src="https://github.com/user-attachments/assets/fbcc7562-35b1-4aa3-97f2-82829bfb9087"
/>

<img width="1122" height="174" alt="Screenshot 2025-09-10 at 6 05 10 PM"
src="https://github.com/user-attachments/assets/6ecf7597-bb01-46a6-b6c3-a09694e76ef6"
/>

## Tests
- [ ] Normal pipe names (without HTML tags) are sent correctly for
blacklisted emails
- [ ] Pipe names with dangerous HTML tags are sanitised
- [ ] Pipe names with normal HTML tags are displayed as-is

Author: kevinkim-ogp

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

@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon'
 
 import { redisClient as pipeErrorRedisClient } from '@/helpers/generate-error-email'
+import { safeHtml } from '@/helpers/html-utils'
 import { sendEmail } from '@/helpers/send-email'
 
 const MAX_LENGTH = 80
@@ -51,7 +52,7 @@ function createBodyErrorMessage(props: BlacklistEmailProps): string {
 
   const formLink = createRequestBlacklistFormLink(props)
 
-  const bodyMessage = `
+  const bodyMessage = safeHtml`
     Dear fellow plumber,
     <br>
     <br>

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

@@ -1,4 +1,5 @@
 import { truncateFlowName } from '@/helpers/generate-error-email'
+import { safeHtml } from '@/helpers/html-utils'
 import { sendEmail } from '@/helpers/send-email'
 
 interface SendInvalidAttachmentsEmailProps {
@@ -19,7 +20,7 @@ interface CreateMessageProps {
 export function createInvalidAttachmentsMessage(props: CreateMessageProps) {
   const { flowName, invalidAttachments, executionId, submissionId } = props
 
-  const bodyMessage = `
+  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')}

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

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+
+import { escapeHtml, safeHtml } from '../html-utils'
+
+describe('html utils', () => {
+  describe('escapeHtml', () => {
+    it.each([
+      ['&', '&'],
+      ['<', '&lt;'],
+      ['>', '&gt;'],
+      ['"', '&quot;'],
+      ["'", '&#039;'],
+    ])('escapes critical chars %s', (char: string, expected: string) => {
+      expect(escapeHtml(char)).toBe(expected)
+    })
+
+    it('escapes mixed content with tags and attributes', () => {
+      const s = `<img src=x onerror="alert('xss')"> & more`
+      const e =
+        '&lt;img src=x onerror=&quot;alert(&#039;xss&#039;)&quot;&gt; &amp; more'
+      expect(escapeHtml(s)).toBe(e)
+    })
+
+    it('neutralizes script tags', () => {
+      const s = '<script>alert(1)</script>'
+      const e = '&lt;script&gt;alert(1)&lt;/script&gt;'
+      expect(escapeHtml(s)).toBe(e)
+    })
+
+    it('escapes angle brackets inside text', () => {
+      const s = '1 < 2 && 3 > 2'
+      const e = '1 &lt; 2 &amp;&amp; 3 &gt; 2'
+      expect(escapeHtml(s)).toBe(e)
+    })
+
+    it('handles template-like sequences', () => {
+      const s = '${alert(1)}<div onclick=alert(1)>'
+      const e = '${alert(1)}&lt;div onclick=alert(1)&gt;'
+      expect(escapeHtml(s)).toBe(e)
+    })
+
+    it('leaves safe text unchanged', () => {
+      expect(escapeHtml('Hello World 123')).toBe('Hello World 123')
+      expect(escapeHtml('こんにちは مرحبا Здравствуйте')).toBe(
+        'こんにちは مرحبا Здравствуйте',
+      )
+      expect(escapeHtml('🙂🚀€₿')).toBe('🙂🚀€₿')
+    })
+  })
+})
+
+describe('safeHtml', () => {
+  it('should escape multiple HTML values in a string', () => {
+    const testVariable = '<b>Hello</b>'
+    const testVariable2 = '<script>alert("XSS")</script>'
+
+    const expected = `
+      This is a test:&lt;b&gt;Hello&lt;/b&gt;.
+      With a new line: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
+    `
+    expect(safeHtml`
+      This is a test:${testVariable}.
+      With a new line: ${testVariable2}
+    `).toBe(expected)
+  })
+})

packages/backend/src/helpers/generate-error-email.ts

@@ -5,6 +5,8 @@ import { createRedisClient, REDIS_DB_INDEX } from '@/config/redis'
 import { sendEmail } from '@/helpers/send-email'
 import Flow from '@/models/flow'
 
+import { safeHtml } from './html-utils'
+
 const MAX_LENGTH = 80
 export const redisClient = createRedisClient(REDIS_DB_INDEX.PIPE_ERRORS)
 
@@ -26,7 +28,7 @@ export function createBodyErrorMessage(
   const redirectUrl = `/execution-pipe/${pipeId}?${searchParams.toString()}`
   const formattedUrl = `${appPrefixUrl}${redirectUrl}`
 
-  const bodyMessage = `
+  const bodyMessage = safeHtml`
     Dear fellow plumber,
     <br>
     <br>

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

@@ -0,0 +1,27 @@
+// function to escape HTML in string
+function escapeHtml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+// tag function for safe HTML templates
+function safeHtml(strings: TemplateStringsArray, ...values: string[]): 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])
+    }
+  }
+
+  return result
+}
+
+export { escapeHtml, safeHtml }