Merge branch 'main' into fix/android-preserve-inline-styles-during-ime-composition

Author: woosanggyu

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,

cpp/parser/GumboNormalizer.c

@@ -491,7 +491,12 @@ static void emit_attributes(GumboElement *el, const char *tag_name,
   if (strcmp(tag_name, "a") == 0) {
     emit_one_attr(out, el, "href");
   } else if (strcmp(tag_name, "img") == 0) {
-    emit_one_attr(out, el, "src");
+    const char *src_val = get_attr(el, "src");
+    if (src_val && src_val[0]) {
+      emit_one_attr(out, el, "src");
+    } else {
+      buffer_append_str(out, " src=\"\"");
+    }
     emit_one_attr(out, el, "alt");
     emit_one_attr(out, el, "width");
     emit_one_attr(out, el, "height");

cpp/tests/GumboParserTest.cpp

@@ -282,6 +282,11 @@ TEST(GumboParserTest, EnrichedTagRemappings) {
   EXPECT_EQ(
       GumboParser::normalizeHtml("<img src='x' width='100' height='100' />"),
       "<img src=\"x\" width=\"100\" height=\"100\" />");
+  EXPECT_EQ(GumboParser::normalizeHtml("<img width=\"100\" height=\"100\" />"),
+            "<img src=\"\" width=\"100\" height=\"100\" />");
+  EXPECT_EQ(GumboParser::normalizeHtml(
+                "<img src=\"\" width=\"100\" height=\"100\" />"),
+            "<img src=\"\" width=\"100\" height=\"100\" />");
 
   // Lists
   EXPECT_EQ(GumboParser::normalizeHtml("<ul><li>x</li></ul>"),

ios/htmlParser/HtmlParser.mm

@@ -670,7 +670,7 @@ + (NSArray *_Nonnull)getTextAndStylesFromHtml:(NSString *_Nonnull)fixedHtml
       [styleArr addObject:@([ItalicStyle getType])];
     } else if ([tagName isEqualToString:@"img"]) {
       NSRegularExpression *srcRegex =
-          [NSRegularExpression regularExpressionWithPattern:@"src=\"([^\"]+)\""
+          [NSRegularExpression regularExpressionWithPattern:@"src=\"([^\"]*)\""
                                                     options:0
                                                       error:nullptr];
       NSTextCheckingResult *match =

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__/htmlNormalizer.test.ts

@@ -262,6 +262,14 @@ describe('htmlNormalizer', () => {
         "<img src='x' width='100' height='100' />",
         '<img src="x" width="100" height="100" />',
       ],
+      [
+        '<img width="100" height="100" />',
+        '<img src="" width="100" height="100" />',
+      ],
+      [
+        '<img src="" width="100" height="100" />',
+        '<img src="" width="100" height="100" />',
+      ],
 
       // Lists
       ['<ul><li>x</li></ul>', '<ul><li>x</li></ul>'],

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/normalization/htmlNormalizer.ts

@@ -267,7 +267,7 @@ function emitAttributes(el: Element, name: string): string {
       return emitOneAttr(el, 'href');
     case 'img':
       return (
-        emitOneAttr(el, 'src') +
+        (el.getAttribute('src') ? emitOneAttr(el, 'src') : ' src=""') +
         emitOneAttr(el, 'alt') +
         emitOneAttr(el, 'width') +
         emitOneAttr(el, 'height')

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 } : {}),
   });