Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Generates unencoded attribute values #291

Closed
wooorm opened this issue Nov 8, 2022 · 3 comments · Fixed by #528 · May be fixed by #303
Closed

Generates unencoded attribute values #291

wooorm opened this issue Nov 8, 2022 · 3 comments · Fixed by #528 · May be fixed by #303
Labels
bug Something isn't working good first issue Good for newcomers released

Comments

@wooorm
Copy link
Contributor

wooorm commented Nov 8, 2022 •
edited

Bug report

Description / Observed Behavior

Satori generates attribute values from inline CSS without encoding some characters (particularly " and <) (in certain cases?).
This makes SVG parsers (browsers, resvg) crash on the file.

Expected Behavior

Encode (at least) " and < in attribute values.
Likely also & for character references (&amp;).

Reproduction

const svg = await satori(
  <div
    style={{
      backgroundImage:
        'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>\')'
    }}
  />,
  {width: 1200, height: 628, fonts}
)

Yields:

<svg width="1200" height="628" viewBox="0 0 1200 628" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="satori_biid_0" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" x="0" y="0"><image x="0" y="0" preserveAspectRatio="none" href="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>"/></pattern></defs><rect x="0" y="0" width="0" height="0" fill="url(#satori_biid_0)"/></svg>

Note particularly the href:

href="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>"

Additional Context

latest

Here’s some code on how I serialize XML: https://github.com/syntax-tree/xast-util-to-xml. Not sure what’s being used here. If it’s a custom AST like structure, perhaps xast might help!
@shuding shuding added bug Something isn't working good first issue Good for newcomers labels Nov 8, 2022
@mrkldshv
Copy link
Contributor

Hey! I'd like to work on this one. Are we okay with the naive solution of encoding only limited set of characters like ", <, >, &? @shuding

@mrkldshv mrkldshv mentioned this issue Nov 12, 2022
Draft
@Jackie1210 Jackie1210 mentioned this issue Aug 11, 2023
Merged
@Jackie1210
Copy link
Contributor

@wooorm The root cause here is not unencoded attribute values, and I've make a PR to solve it.

shuding pushed a commit that referenced this issue Aug 11, 2023
@Jackie1210
fix: should respect charset=utf-8 in data uri (#528)
0a05c92 
Close #291
@github-actions
Copy link

🎉 This issue has been resolved in version 0.10.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

sahithyandev pushed a commit to sahithyandev/satori that referenced this issue Apr 26, 2024
@Jackie1210 @sahithyandev
fix: should respect charset=utf-8 in data uri (vercel#528)
48b2e22 
Close vercel#291
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers released
Projects
None yet
Milestone
No milestone
4 participants
@wooorm @shuding @Jackie1210 @mrkldshv