Allow more tags in email content (#683)

harryzcy · Nov 25, 2023 · 352c910 · 352c910
1 parent 47e510e
commit 352c910
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/web/src/utils/elements.ts b/web/src/utils/elements.ts
@@ -1,16 +1,34 @@
+// Tags that are allowed in email.
 export const allowedTags = [
   'a',
+  'abbr',
+  'acronym',
+  'address',
+  'area',
   'b',
-  'br',
+  'bdo',
   'big',
   'blockquote',
+  'br',
+  'button',
   'caption',
+  'center',
+  'cite',
   'code',
+  'col',
+  'colgroup',
+  'dd',
   'del',
+  'dfn',
+  'dir',
   'div',
+  'dl',
   'dt',
   'dd',
+  'em',
+  'fieldset',
   'font',
+  'form',
   'h1',
   'h2',
   'h3',
@@ -20,37 +38,54 @@ export const allowedTags = [
   'hr',
   'i',
   'img',
+  'input',
   'ins',
+  'kbd',
+  'label',
+  'legend',
   'li',
   'map',
+  'menu',
   'ol',
+  'optgroup',
+  'option',
   'p',
   'pre',
+  'q',
   's',
+  'samp',
+  'select',
   'small',
-  'strong',
   'span',
+  'strike',
+  'strong',
   'sub',
   'sup',
   'table',
   'tbody',
   'td',
+  'textarea',
   'tfoot',
   'th',
   'thead',
+  'u',
   'tr',
+  'tt',
   'u',
   'ul',
-  'php',
+  'var',
   'html',
   'head',
   'body',
   'meta',
-  'title',
   'style',
   'link'
 ]
 
+// Tags that should be removed from the document, without logging a warning.
+export const silenceTags = ['title', 'script']
+
+// Attributes that are allowed on all tags.
 export const globalAttributes = [
   'accesskey',
   'class',
@@ -71,6 +106,7 @@ export const globalAttributes = [
   'translate'
 ]
 
+// Attributes that are allowed on `<img>` tags.
 export const imgAttributes = [
   'alt',
   'crossorigin',

diff --git a/web/src/utils/emails.tsx b/web/src/utils/emails.tsx
@@ -9,7 +9,12 @@ import parse, {
 
 import { type Email, type File } from 'services/emails'
 
-import { allowedTags, globalAttributes, imgAttributes } from 'utils/elements'
+import {
+  allowedTags,
+  globalAttributes,
+  imgAttributes,
+  silenceTags
+} from 'utils/elements'
 
 export function getNameFromEmails(
   emails: string[] | null,
@@ -45,8 +50,12 @@ export function parseEmailContent(
       if (['html', 'head', 'body'].includes(domNode.name)) {
         return <>{domToReact(domNode.children as DOMNode[], options)}</>
       }
-      if (domNode.name === 'head') return <></>
-      if (!allowedTags.includes(domNode.name)) return <></>
+      if (!allowedTags.includes(domNode.name)) {
+        if (!silenceTags.includes(domNode.name)) {
+          console.warn(`Unsupported tag: ${domNode.name}`)
+        }
+        return <></>
+      }
       if (domNode.name === 'a') {
         domNode.attribs.target = '_blank'
         domNode.attribs.rel = 'noopener noreferrer'