fix(web): img attributes sanitization (#742)

# Summary

- web's sanitization stripped `img`'s `height` and `weight` attributes
when `sanitizationConfig.linkRegex` was defined, as those attributes
were tested as URIs
- img placeholder now is displayed, even when no `src` is present in the
`img` element
- added relevant regression tests
- updated the web example-app with a more practical
`sanitizationConfig.linkRegex` #741

## Test Plan

add some images in the input and push them to the `EnrichedText` - that
will trigger sanitization. Everything should be at its place

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ❌     |
| Android |    ❌     |
| Web     |    ✅     |

## Checklist

- [x] E2E tests are passing
- [x] Required E2E tests have been added (if applicable)

Author: hejsztynx

apps/example-web/src/App.tsx

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

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

@@ -12,7 +12,7 @@ import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
 import { EnrichedTextActions } from './EnrichedTextActions';
 
 const LINK_REGEX =
-  /^(?:enriched:\/\/\S+|(?:https?:\/\/)?(?:www\.)?swmansion\.com(?:\/\S*)?)$/i;
+  /^(?:enriched:\/\/\S+|(?:https?:\/\/)?(?:www\.)?swmansion\.com(?:\/\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 } : {}),
   });