feat(api): Allow style tags and attributes in the In-App & Email Editor

apps/api/src/app/message-template/shared/sanitizer.service.spec.ts

@@ -24,4 +24,40 @@ describe('HTML Sanitizer', function () {
     ]);
     expect(result[0].content).to.equal('hello <b>bold</b> ');
   });
+
+  it('should NOT sanitize style tags', function () {
+    const result = sanitizeMessageContent([
+      {
+        type: EmailBlockTypeEnum.TEXT,
+        content: '<style>p { color: red; }</style><p>Red Text</p>',
+        url: '',
+      },
+    ]);
+
+    expect(result[0].content).to.equal('<style>p { color: red; }</style><p>Red Text</p>');
+  });
+
+  it('should NOT sanitize style attributes', function () {
+    const result = sanitizeMessageContent([
+      {
+        type: EmailBlockTypeEnum.TEXT,
+        content: '<p style="color: red;">Red Text</p>',
+        url: '',
+      },
+    ]);
+
+    expect(result[0].content).to.equal('<p style="color: red;">Red Text</p>');
+  });
+
+  it('should NOT format style attributes', function () {
+    const result = sanitizeMessageContent([
+      {
+        type: EmailBlockTypeEnum.TEXT,
+        content: '<p style="color:red;">Red Text</p>',
+        url: '',
+      },
+    ]);
+
+    expect(result[0].content).to.equal('<p style="color:red;">Red Text</p>');
+  });
 });

apps/api/src/app/message-template/shared/sanitizer.service.ts

@@ -1,10 +1,44 @@
 import * as sanitize from 'sanitize-html';
 import { IEmailBlock } from '@novu/shared';
 
+/**
+ * Options for the sanitize-html library.
+ *
+ * @see https://www.npmjs.com/package/sanitize-html#default-options
+ */
+const sanitizeOptions: sanitize.IOptions = {
+  /**
+   * Additional tags to allow.
+   */
+  allowedTags: sanitize.defaults.allowedTags.concat(['style']),
+  allowedAttributes: {
+    ...sanitize.defaults.allowedAttributes,
+    /**
+     * Additional attributes to allow on all tags.
+     */
+    '*': ['style'],
+  },
+  /**
+   * Required to disable console warnings when allowing style tags.
+   *
+   * We are allowing style tags to support the use of styles in the In-App Editor.
+   * This is a known security risk through an XSS attack vector,
+   * but we are accepting this risk by dropping support for IE11.
+   *
+   * @see https://cheatsheetseries.owasp.org/cheatsheets/XSS_Filter_Evasion_Cheat_Sheet.html#remote-style-sheet
+   */
+  allowVulnerableTags: true,
+  /**
+   * Required to disable formatting of style attributes. This is useful to retain
+   * formatting of style attributes in the In-App Editor.
+   */
+  parseStyleAttributes: false,
+};
+
 export function sanitizeHTML(html: string) {
   if (!html) return html;
 
-  return sanitize(html);
+  return sanitize(html, sanitizeOptions);
 }
 
 export function sanitizeMessageContent(content: string | IEmailBlock[]) {