fix: img attributes sanitization

Author: hejsztynx

apps/example-web/src/App.tsx

@@ -39,7 +39,7 @@ const LINK_REGEX =
   /^(?:enriched:\/\/\S+|(?:https?:\/\/)?(?:www\.)?swmansion\.com(?:\/\S*)?)$/i;
 
 const SANITIZATION_CONFIG = {
-  linkRegex: LINK_REGEX,
+  linkRegex: /^(?:enriched:\/\/\S+|https?:\/\/\S+)$/i,
 };
 
 function App() {

apps/example-web/src/components/TextRenderer.tsx

@@ -11,8 +11,7 @@ import {
 import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
 import { EnrichedTextActions } from './EnrichedTextActions';
 
-const LINK_REGEX =
-  /^(?:enriched:\/\/\S+|(?:https?:\/\/)?(?:www\.)?swmansion\.com(?:\/\S*)?)$/i;
+const LINK_REGEX = /^(?:enriched:\/\/\S+|https?:\/\/\S+)$/i;
 
 const SANITIZATION_CONFIG = {
   linkRegex: LINK_REGEX,

src/web/EnrichedText.css

@@ -366,7 +366,9 @@
   vertical-align: text-bottom;
 }
 
-.et-view img.error {
+.et-view img.error,
+.et-view img:not([src]),
+.et-view img[src=""] {
   content: linear-gradient(transparent, transparent);
   background-color: currentColor;
   -webkit-mask: var(--et-broken-image-glyph) no-repeat center / contain;

src/web/__tests__/sanitization.test.ts

@@ -99,6 +99,57 @@ describe('sanitizeHtmlMention', () => {
   });
 });
 
+describe('sanitizeHtml <img>', () => {
+  const urlOnlyRegex = /^(?:enriched:\/\/\S+|https?:\/\/\S+)$/i;
+
+  it('keeps src, width, and height with the default config', () => {
+    const out = sanitizeHtml(
+      '<img src="https://example.com/a.png" width="80" height="60">'
+    );
+    expect(out).toContain('src="https://example.com/a.png"');
+    expect(out).toContain('width="80"');
+    expect(out).toContain('height="60"');
+  });
+
+  it('keeps width and height even when a URL-only linkRegex is supplied', () => {
+    const out = sanitizeHtml(
+      '<img src="https://example.com/a.png" width="80" height="60" alt="cat">',
+      { linkRegex: urlOnlyRegex }
+    );
+    expect(out).toContain('width="80"');
+    expect(out).toContain('height="60"');
+    expect(out).toContain('src="https://example.com/a.png"');
+    expect(out).toContain('alt="cat"');
+  });
+
+  it('still validates the img src protocol against the custom linkRegex', () => {
+    const out = sanitizeHtml(
+      '<img src="ftp://example.com/a.png" width="80" height="60">',
+      { linkRegex: urlOnlyRegex }
+    );
+    expect(out).not.toContain('ftp://');
+    expect(out).toContain('width="80"');
+    expect(out).toContain('height="60"');
+  });
+
+  it('strips a javascript: src', () => {
+    const out = sanitizeHtml(
+      '<img src="javascript:alert(1)" width="80" height="60">',
+      { linkRegex: urlOnlyRegex }
+    );
+    // eslint-disable-next-line no-script-url
+    expect(out).not.toContain('javascript:');
+  });
+
+  it('strips event handlers from img', () => {
+    const out = sanitizeHtml(
+      '<img src="https://example.com/a.png" onerror="alert(1)" width="80">'
+    );
+    expect(out).not.toContain('onerror');
+    expect(out).toContain('width="80"');
+  });
+});
+
 describe('sanitizeLinkAttributes', () => {
   it('strips javascript: URLs from links', () => {
     const out = sanitizeHtml('<a href="javascript:alert(1)">x</a>');

src/web/sanitization/htmlSanitizer.ts

@@ -3,14 +3,19 @@ import type { SanitizationConfig } from '../../types';
 
 const MENTION_ATTRS = ['text', 'indicator'];
 
+// Non-URL <img> attributes we emit. They must be listed as "URI safe" because
+// DOMPurify validates every attribute value that isn't in its built-in
+// URI_SAFE_ATTRIBUTES set against ALLOWED_URI_REGEXP.
+const IMG_DIMENSION_ATTRS = ['width', 'height'];
+
 // Attributes DOMPurify keeps by default and are commonly used, so we don't emit an unnecessary warning
 const COMMONLY_ALLOWED_ATTRS = ['id', 'class', 'style'];
 
 export function sanitizeHtml(html: string, config?: SanitizationConfig) {
   return DOMPurify.sanitize(html, {
     ADD_TAGS: ['mention', 'codeblock'],
     ADD_ATTR: MENTION_ATTRS,
-    ADD_URI_SAFE_ATTR: MENTION_ATTRS,
+    ADD_URI_SAFE_ATTR: [...MENTION_ATTRS, ...IMG_DIMENSION_ATTRS],
     // if not supplied, fall back to DOMPurify's built-in default.
     ...(config?.linkRegex ? { ALLOWED_URI_REGEXP: config.linkRegex } : {}),
   });