fix: incorrect data URL parsing (#596)

Fixes #597 with correct regex. [Data URL Specification](https://www.rfc-editor.org/rfc/rfc2397#section-3)
vercel · Jul 4, 2024 · 965b3a1 · 965b3a1
1 parent 3d3bee3
commit 965b3a1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/src/handler/image.ts b/src/handler/image.ts
@@ -174,7 +174,7 @@ export async function resolveImageData(
 
  try {
  decodedURI =
- /data:(?<imageType>[a-z/+]+)(;(charset=)?(?<encodingType>.*))?,(?<dataString>.*)/g.exec(
+ /data:(?<imageType>[a-z/+]+)(;[^;=]+=[^;=]+)*?(;(?<encodingType>[^;,]+))?,(?<dataString>.*)/g.exec(
  src
  ).groups as typeof decodedURI
  } catch (err) {

diff --git a/...-background-image-url-should-handle-charset-utf-8-with-comma-in-data-1-snap.png b/...-background-image-url-should-handle-charset-utf-8-with-comma-in-data-1-snap.png
diff --git a/...tsx-background-image-url-should-handle-charset-utf-8-with-in-base-64-1-snap.png b/...tsx-background-image-url-should-handle-charset-utf-8-with-in-base-64-1-snap.png
diff --git a/test/image.test.tsx b/test/image.test.tsx
@@ -638,4 +638,26 @@ describe('background-image: url()', () => {
 
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
+
+ it('should handle charset=utf-8 with comma in data', async () => {
+ const svg = await satori(
+ <img
+ src={`data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100"><polygon fill="#ffffff" points="50,0 100,85 0,85" /></svg>`}
+ />,
+ { width: 100, height: 100, fonts }
+ )
+
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
+
+ it('should handle charset=utf-8 with in base64', async () => {
+ const svg = await satori(
+ <img
+ src={`data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTUiIGZpbGw9IiNlZTc2MjEiLz48L3N2Zz4=`}
+ />,
+ { width: 100, height: 100, fonts }
+ )
+
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
 })