Changeset 0101d0a in Klonkt

Timestamp:

07/28/2026 08:22:37 AM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

c52dc82

Parents:

b258a79

Message:

Embeds toonden niets: OpenGraph erbij en een backfill

Twee oorzaken, allebei mijn eigen gat.

OPENGRAPH ONTBRAK. Ik had oEmbed gebouwd als de generieke weg, maar het grootste
deel van het web levert dat helemaal niet. Link-previews met een thumbnail
draaien in de praktijk op OpenGraph, en dat is ook wat Mastodon leest. Gecheckt
op een URL uit onze eigen feed: og:image en og:title wel, oEmbed niet. Zonder die
stap loste vrijwel elke link op naar kind=link en werd er dus niets opgeslagen,
en bleef de kaart leeg. OpenGraph zit nu in dezelfde keten, na oEmbed en voor de
kale link, en gebruikt dezelfde pagina-fetch: het kost geen extra request. De
fetch stuurt nu ook een User-Agent mee, want een deel van het web geeft z-n
og-tags alleen aan iets dat op een browser lijkt.

GEEN BACKFILL. embed_json werd alleen gevuld bij nieuwe binnenkomende posts, dus
alle 359 bestaande rijen bleven leeg: precies wat je ziet als je de app opent.
Self-heal v16 haalt het alsnog op, alleen voor rijen zonder quote en zonder
embed, dus een pagina-fetch per kandidaat en nooit opnieuw.

Changed files:
src/services/EmbedResolver.js

• findOpenGraph (og:image/title/site_name, met twitter:-fallback)
• resolveEmbed: OpenGraph na oEmbed, een pagina-fetch voor beide
• liveIO: User-Agent op de pagina-fetch

src/services/ActivityPubService.js

• SELFHEAL_VERSION 15 -> 16: embed_json backfillen

test/embed-resolver.test.js

• 4 tests: og lezen + entities, twitter-fallback en non-http image geweigerd, oEmbed wint nog steeds van OpenGraph, en een og-only pagina levert een kaart

remarks: 213 tests groen. End-to-end gedraaid op een echte feed-URL: titel,
provider en thumbnail komen eruit.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Files:

• src/services/ActivityPubService.js (modified) (3 diffs)
• src/services/EmbedResolver.js (modified) (5 diffs)
• test/embed-resolver.test.js (modified) (1 diff)

src/services/ActivityPubService.js

@@ -2849 +2849 @@
 // during a flux window, e.g. a fleet-wide update), and drops notes that are gone
 // (404/410). Bump SELFHEAL_VERSION only on a release that warrants a re-sync.
-const SELFHEAL_VERSION = 15; // v15: re-capture emoji_json/link_json for boosts that arrived before the Announce-path tag fix
+const SELFHEAL_VERSION = 16; // v16: resolve external link previews (embed_json) for posts that predate the embed pipeline
 async function fetchNoteAP(url) {
   try {
@@ -3159 +3159 @@
     if (cur >= SELFHEAL_VERSION) return; // already healed for this version — skip on normal boots
     let rows = [];
-    try { rows = db.prepare('SELECT id, slug, content, media_json, nsfw, cw, url, emoji_json, link_json, quote_json, author_uri, author_name, author_emoji_json, reblog_name, reblog_handle, reblog_emoji_json FROM ap_timeline ORDER BY rowid DESC LIMIT 200').all(); } catch { /* no table */ }
+    try { rows = db.prepare('SELECT id, slug, content, media_json, nsfw, cw, url, emoji_json, link_json, quote_json, author_uri, author_name, author_emoji_json, reblog_name, reblog_handle, reblog_emoji_json, embed_json FROM ap_timeline ORDER BY rowid DESC LIMIT 200').all(); } catch { /* no table */ }
     let healed = 0, failed = 0;
     for (const r of rows) {
@@ -3185 +3185 @@
           const ai = actorInfo(await fetchActor(r.author_uri), r.author_uri);
           if (ai.emojis) { try { db.prepare('UPDATE ap_timeline SET author_emoji_json = ? WHERE id = ?').run(JSON.stringify(ai.emojis), r.id); } catch { /* ignore */ } }
+        }
+        // v16: link previews. A post from before the embed pipeline has no
+        // card at all, which is why nothing showed. Only for rows that have no
+        // quote (a quote already IS the card) and no embed yet, so this costs
+        // one page fetch per candidate and never repeats.
+        if (!r.quote_json && !r.embed_json) {
+          const ej = await resolveExternalEmbed(html || r.content).catch(() => null);
+          if (ej) { try { db.prepare('UPDATE ap_timeline SET embed_json = ? WHERE id = ?').run(ej, r.id); } catch { /* ignore */ } }
         }
         // v14: same for the booster's display name ("X boosted"). The row stores

src/services/EmbedResolver.js

@@ -35 +35 @@
 function decodeEntities(s) {
   return String(s).replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, "'");
+}
+
+/**
+ * OpenGraph, the one that actually carries link previews on the open web.
+ * oEmbed is the richer protocol but most sites simply do not implement it;
+ * og:image / og:title is what Mastodon and everyone else reads, so it is the
+ * fallback that makes thumbnails appear at all. Same page fetch as the oEmbed
+ * discovery, so it costs nothing extra.
+ */
+export function findOpenGraph(html) {
+  if (!html || typeof html !== 'string') return null;
+  const meta = {};
+  for (const tag of html.match(/<meta\b[^>]*>/gi) || []) {
+    const key = (tag.match(/\b(?:property|name)\s*=\s*["']([^"']+)["']/i) || [])[1];
+    if (!key) continue;
+    const k = key.toLowerCase();
+    if (!/^(og:image|og:title|og:site_name|og:description|twitter:image|twitter:title)$/.test(k)) continue;
+    const val = (tag.match(/\bcontent\s*=\s*["']([^"']*)["']/i) || [])[1];
+    if (val && !meta[k]) meta[k] = decodeEntities(val);
+  }
+  const image = meta['og:image'] || meta['twitter:image'];
+  const title = meta['og:title'] || meta['twitter:title'];
+  if (!image && !title) return null;
+  return { image: image && /^https?:\/\//i.test(image) ? image : null, title: title || null, site: meta['og:site_name'] || null };
 }
 
@@ -118 +142 @@
   }
 
-  // 3. oEmbed: the generic path for everything else.
-  if (io.getPage && io.getJSON) {
+  // 3. oEmbed, then OpenGraph. One page fetch serves both: oEmbed is the richer
+  //    protocol, OpenGraph is the one most of the web actually ships.
+  if (io.getPage) {
     const page = await io.getPage(url).catch(() => null);
-    const endpoint = findOEmbedEndpoint(page);
-    if (endpoint) {
-      const o = await io.getJSON(endpoint).catch(() => null);
-      const card = fromOEmbed(url, o);
-      if (card) return card;
+    if (page) {
+      const endpoint = findOEmbedEndpoint(page);
+      if (endpoint && io.getJSON) {
+        const o = await io.getJSON(endpoint).catch(() => null);
+        const card = fromOEmbed(url, o);
+        if (card) return card;
+      }
+      const og = findOpenGraph(page);
+      if (og) {
+        return {
+          kind: 'opengraph',
+          url,
+          title: og.title,
+          author: og.site ? { name: og.site, handle: null, icon: null } : null,
+          provider: og.site,
+          html: null,
+          media: og.image ? [{ url: og.image, type: 'image/*' }] : [],
+        };
+      }
     }
   }
@@ -140 +179 @@
 
 const MAX_BODY = 512_000;   // an oEmbed page/endpoint is small; refuse the rest
-
-async function safeText(safeFetch, url, accept) {
+const UA = 'Mozilla/5.0 (compatible; Klonkt/1.0; +https://klonkt.com)';
+
+async function safeText(safeFetch, url, accept, extra = {}) {
   try {
-    const r = await safeFetch(url, { headers: { Accept: accept } });
+    const r = await safeFetch(url, { headers: { Accept: accept, ...extra } });
     if (!r.ok) return null;
     if (Number(r.headers.get('content-length') || 0) > MAX_BODY) return null;
@@ -163 +203 @@
       try { return JSON.parse(body); } catch { return null; }   // an HTML page is simply not AP
     },
-    getPage: (u) => safeText(safeFetch, u, 'text/html'),
+    // Plenty of sites only hand out their OpenGraph tags to something that
+    // looks like a browser, so the page fetch identifies itself.
+    getPage: (u) => safeText(safeFetch, u, 'text/html', { 'User-Agent': UA }),
     getJSON: async (u) => {
       const body = await safeText(safeFetch, u, 'application/json');
@@ -179 +221 @@
 }
 
-export default { resolveEmbed, findOEmbedEndpoint, looksLikeAPObject, fromOEmbed, fromAPObject, liveIO };
+export default { resolveEmbed, findOEmbedEndpoint, findOpenGraph, looksLikeAPObject, fromOEmbed, fromAPObject, liveIO };

test/embed-resolver.test.js

@@ -120 +120 @@
   assert.ok(calls.some((c) => c[1].includes('activity+json')), 'AP asks for activity+json');
 });
+
+// OpenGraph: the one that actually carries link previews on the open web.
+// oEmbed is richer, but most sites simply do not ship it, which is why cards
+// stayed empty until this fallback existed.
+const OG_PAGE = '<html><head><meta property="og:title" content="Linux f&amp;uuml;r Einsteiger">'
+  + '<meta property="og:site_name" content="Linux Guides">'
+  + '<meta property="og:image" content="https://lg.example/tux.png"></head></html>';
+
+test('findOpenGraph reads og:image/title/site and decodes entities', async () => {
+  const { findOpenGraph } = await import('../src/services/EmbedResolver.js');
+  const og = findOpenGraph(OG_PAGE);
+  assert.equal(og.image, 'https://lg.example/tux.png');
+  assert.equal(og.site, 'Linux Guides');
+  assert.ok(og.title.startsWith('Linux f'));
+  assert.equal(findOpenGraph('<html><head><title>x</title></head></html>'), null);
+  assert.equal(findOpenGraph(null), null);
+});
+
+test('findOpenGraph falls back to twitter:image and refuses a non-http image', async () => {
+  const { findOpenGraph } = await import('../src/services/EmbedResolver.js');
+  const tw = findOpenGraph('<meta name="twitter:image" content="https://x/y.png"><meta name="twitter:title" content="T">');
+  assert.equal(tw.image, 'https://x/y.png');
+  const bad = findOpenGraph('<meta property="og:image" content="javascript:alert(1)"><meta property="og:title" content="T">');
+  assert.equal(bad.image, null, 'a non-http image is dropped, the title survives');
+  assert.equal(bad.title, 'T');
+});
+
+test('oEmbed still wins over OpenGraph when a page offers both', async () => {
+  const both = OEMBED_PAGE.replace('</head>', '<meta property="og:title" content="OG"></head>');
+  const r = await resolveEmbed('https://v.example/1', io({
+    getPage: async () => both, getJSON: async () => OEMBED_JSON,
+  }));
+  assert.equal(r.kind, 'oembed');
+  assert.equal(r.title, 'A talk');
+});
+
+test('a page with only OpenGraph yields a thumbnail card', async () => {
+  const r = await resolveEmbed('https://lg.example/artikel', io({ getPage: async () => OG_PAGE }));
+  assert.equal(r.kind, 'opengraph');
+  assert.equal(r.media[0].url, 'https://lg.example/tux.png');
+  assert.equal(r.provider, 'Linux Guides');
+  assert.equal(r.url, 'https://lg.example/artikel');
+});