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.

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

fix: svg with special characters leading to UnexpectedData #2049

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

kibolho
Copy link

@kibolho kibolho commented May 2, 2023

Summary

Explain the motivation for making this change: here are some points to help you:
Some SVG have especial characters that causes the following error:
Screenshot 2023-05-02 at 20 26 34

  • What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged
    SvgUri Error. UnexpectedData 
		 #1199

  • What is the feature? (if applicable)
    No

  • How did you implement the solution?
    Add a replace to escape some special characters

  • What areas of the library does it impact?
    Components which use fetchText to fetch the svg: SvgWithCssUri, LocalSvg SvgFromUri and SvgUri

Test Plan

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Compatibility

OS Implemented
iOS ✅❌
Android ✅❌

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

@mschmid
Copy link

mschmid commented Jul 13, 2023

Hi @kibolho this fix could also help me with crashes in production, i am very happy you tackled this.

@WoLewicki
Copy link
Member

How do those special characters end up in the svg? And does the same code work correctly on web? If so, I think we can merge the PR then.

@RyanHirsch-Phantom
Copy link

RyanHirsch-Phantom commented Mar 12, 2024

How do those special characters end up in the svg? And does the same code work correctly on web? If so, I think we can merge the PR then.

@WoLewicki, I've just run into this same issue. We have an SVG with a CR/LF in it that after passing through a Cloudflare proxy to sanitize potentially malicious content gets the escape sequence injected rather than the original CR/LF. The web displays both images fine, but react-native-svg displays an empty (black) square for the original with CR/LF and crashes when trying to render the one with the escape sequences. (I don't seem to be able to leverage error boundaries to gracefully handle the crash when there is the presence of the escape sequence)

example svgs: https://gist.github.com/RyanHirsch-Phantom/6a563603aefe1a3ca17955588159edfd

Note: we don't control these SVGs, we're presenting what is essentially user content so we can't simply fix the source, and its the reason we're attempting to sanitize.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants