<img> parsing

package.json

@@ -39,6 +39,7 @@
     "react-i18next": "^17.0.12",
     "react-icons": "^5.6.0",
     "recharts": "^3.1.2",
+    "sax": "^1.6.1",
     "swr": "^2.5.1",
     "systeminformation": "^5.33.1",
     "tough-cookie": "^6.0.2",

pnpm-lock.yaml

@@ -83,6 +83,9 @@ importers:
       recharts:
         specifier: ^3.1.2
         version: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@17.0.2)(react@19.2.8)(redux@5.0.1)
+      sax:
+        specifier: ^1.6.1
+        version: 1.6.1
       swr:
         specifier: ^2.5.1
         version: 2.5.1(react@19.2.8)

src/widgets/feed/utils.js

@@ -1,3 +1,4 @@
+import sax from "sax";
 import { xml2js } from "xml-js";
 
 const asArray = (value) => (value === undefined || value === null ? [] : [].concat(value));
@@ -39,6 +40,27 @@ function findImage(item) {
   return image ? attrs(image).url || attrs(image).href : null;
 }
 
+const isPixel = ({ width, height }) => ["0", "1"].includes(width) || ["0", "1"].includes(height);
+
+// first usable <img> in item html using sax tokenizer
+function findHtmlImage(htmls, baseUrl) {
+  for (const html of htmls) {
+    if (!html) continue;
+    let image = null;
+    const parser = sax.parser(false, { lowercase: true });
+    parser.onopentag = ({ name, attributes }) => {
+      if (!image && name === "img" && !isPixel(attributes)) image = httpUrl(attributes.src, baseUrl);
+    };
+    parser.onerror = () => {
+      parser.error = null;
+      parser.resume();
+    };
+    parser.write(html).close();
+    if (image) return image;
+  }
+  return null;
+}
+
 function parseRssItem(item) {
   const guid = asArray(item.guid)[0];
   const guidLink = attrs(guid).isPermaLink !== "false" ? getText(guid) : null;
@@ -47,6 +69,7 @@ function parseRssItem(item) {
     link: getText(item.link) || guidLink,
     date: getText(item.pubDate) || getText(item["dc:date"]),
     image: findImage(item),
+    html: [getText(item["content:encoded"]), getText(item.description)],
   };
 }
 
@@ -58,6 +81,7 @@ function parseAtomEntry(entry) {
     link: attrs(link).href,
     date: getText(entry.published) || getText(entry.updated),
     image: findImage(entry),
+    html: [getText(entry.content), getText(entry.summary)],
   };
 }
 
@@ -74,7 +98,7 @@ export function parseFeed(xml, baseUrl) {
       title: item.title.trim(),
       link: httpUrl(item.link, baseUrl),
       date: parseDate(item.date),
-      image: httpUrl(item.image, baseUrl),
+      image: httpUrl(item.image, baseUrl) ?? findHtmlImage(item.html, baseUrl),
     }))
     .filter((item) => item.title);
 }

src/widgets/feed/utils.test.js

@@ -88,6 +88,48 @@ describe("widgets/feed/utils", () => {
     ]);
   });
 
+  it("falls back to the first usable image in item html", () => {
+    const xml = `<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/"><channel>
+      <item>
+        <title>Content image</title>
+        <content:encoded><![CDATA[<p>Hi <img src="https://t.example.com/p.gif" width="1" height="1">
+          <img src="data:image/gif;base64,R0"><IMG SRC="/big.jpg?w=925&#038;h=925"><img src="/second.jpg">]]></content:encoded>
+      </item>
+      <item>
+        <title>Description image</title>
+        <description>&lt;img src="https://example.com/desc.png"&gt; unclosed &lt;b&gt;</description>
+      </item>
+      <item>
+        <title>Media wins</title>
+        <media:thumbnail url="https://example.com/thumb.jpg" />
+        <description><![CDATA[<img src="https://example.com/html.jpg">]]></description>
+      </item>
+      <item>
+        <title>No usable image</title>
+        <description><![CDATA[<img src="javascript:alert(1)"><img>]]></description>
+      </item>
+    </channel></rss>`;
+
+    expect(parseFeed(xml, "https://example.com/feed").map((item) => item.image)).toEqual([
+      "https://example.com/big.jpg?w=925&h=925",
+      "https://example.com/desc.png",
+      "https://example.com/thumb.jpg",
+      null,
+    ]);
+  });
+
+  it("finds images in atom html content and summary", () => {
+    const xml = `<feed xmlns="http://www.w3.org/2005/Atom">
+      <entry><title>Content</title><content type="html">&lt;img src="https://example.com/c.jpg"&gt;</content></entry>
+      <entry><title>Summary</title><summary type="html">&lt;img src="https://example.com/s.jpg"&gt;</summary></entry>
+    </feed>`;
+
+    expect(parseFeed(xml).map((item) => item.image)).toEqual([
+      "https://example.com/c.jpg",
+      "https://example.com/s.jpg",
+    ]);
+  });
+
   it("handles single-item and empty feeds", () => {
     const single = "<rss><channel><item><title>Only</title></item></channel></rss>";
     expect(parseFeed(single)).toEqual([{ title: "Only", link: null, date: null, image: null }]);