fix: Should escape specific content (#506)

vercel · Jun 5, 2023 · ddcc610 · ddcc610 · vercel · Jun 5, 2023
1 parent 5728f0f
commit ddcc610
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -101,6 +101,7 @@
     "css-box-shadow": "1.0.0-3",
     "css-to-react-native": "^3.0.0",
     "emoji-regex": "^10.2.1",
+    "escape-html": "^1.0.3",
     "linebreak": "^1.1.0",
     "parse-css-color": "^0.2.1",
     "postcss-value-parser": "^4.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/builder/text.ts b/src/builder/text.ts
@@ -1,3 +1,4 @@
+import escapeHTML from 'escape-html'
 import type { ParsedTransformOrigin } from '../transform-origin.js'
 import transform from './transform.js'
 import { buildXMLString } from '../utils.js'
@@ -141,11 +142,11 @@ export default function buildText(
           fill: style.color,
           opacity: opacity !== 1 ? opacity : undefined,
         },
-        content
+        escapeHTML(content)
       ) +
       (decorationShape || '') +
       (filter ? '</g>' : '') +
       extra,
-    shape ? buildXMLString('text', shapeProps, content) : '',
+    shape ? buildXMLString('text', shapeProps, escapeHTML(content)) : '',
   ]
 }
diff --git a/...ont-test-tsx-font-should-handle-escape-html-when-embed-font-is-false-1-snap.png b/...ont-test-tsx-font-should-handle-escape-html-when-embed-font-is-false-1-snap.png
diff --git a/test/font.test.tsx b/test/font.test.tsx
@@ -146,4 +146,24 @@ describe('Font', () => {
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
   })
+
+  it('should handle escape html when embedFont is false', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          fontSize: '16px',
+        }}
+      >
+        {`Hello<>&'" world`}
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+        embedFont: false,
+      }
+    )
+
+    expect(toImage(svg)).toMatchImageSnapshot()
+  })
 })