fix(dev): properly unescape all escaped html entities (#383)

* fix(dev): properly unescape all escaped html entities * test: fix
wevm · Jun 26, 2024 · dac1d21 · dac1d21
1 parent 3f41e15
commit dac1d21
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/rich-terms-change.md b/.changeset/rich-terms-change.md
@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Fixed incorrectly unescaped HTML entities in Frame Preview Buttons leading to incorrect UI shown.
diff --git a/services/frame/api/index.tsx b/services/frame/api/index.tsx
@@ -15,6 +15,7 @@ export const app = new Frog<{ State: State }>({
   assetsPath: '/',
   basePath: '/api',
   browserLocation: 'https://frog.fm',
+  title: 'Frog – Framework for Farcaster Frames',
   initialState: {
     featureIndex: 0,
   },

diff --git a/src/dev/utils/htmlToMetadata.ts b/src/dev/utils/htmlToMetadata.ts
@@ -12,7 +12,15 @@ import { parseButtons } from './parseButtons.js'
 
 export function htmlToMetadata(html: string) {
   const dom = parseFromString(
-    html.replace(/<!doctype html>/i, '').replaceAll(/amp;/gm, ''),
+    html
+      .replace(/<!doctype html>/i, '')
+      // @TODO: consider using `lodash.unescape`
+      .replaceAll(/&amp;/gm, '&')
+      .replaceAll(/&lt;/gm, '<')
+      .replaceAll(/&gt;/gm, '>')
+      .replaceAll(/&quot;/gm, '"')
+      .replaceAll(/&#39;/gm, "'")
+      .replaceAll(/&#96;/gm, '`'),
   )
   const nodes = dom.getElementsByTagName('meta')
 

diff --git a/src/next/getFrameMetadata.test.ts b/src/next/getFrameMetadata.test.ts
@@ -21,7 +21,7 @@ test('default', async () => {
       "fc:frame:image:aspect_ratio": "1.91:1",
       "fc:frame:post_url": "https://frame.frog.fm/api?initialPath=%252Fapi&amp;previousButtonValues=%2523A_%252C_l%252C_l",
       "og:image": "https://frame.frog.fm/og.png",
-      "og:title": "Frog Frame",
+      "og:title": "Frog – Framework for Farcaster Frames",
     }
   `)
 })
diff --git a/src/utils/getFrameMetadata.test.ts b/src/utils/getFrameMetadata.test.ts
@@ -24,7 +24,7 @@ test('default', async () => {
         "property": "og:image",
       },
       {
-        "content": "Frog Frame",
+        "content": "Frog – Framework for Farcaster Frames",
         "property": "og:title",
       },
       {