gilbarbara / react-inlinesvg

An SVG loader component for ReactJS

Home Page:https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dataURI matching regex needs to match on start of string

wigsaparelli opened this issue · comments

Describe the bug
The component blows up when calling window.atob(dataURI[2]) if its src property contains an inline svg (a string beginning with '<svg' character sequence) and the svg contains dataURI links to embedded images. I have attached an example svg.

To Reproduce
Try with the attached svg that contains links to embedded images (as data URIs) - perfectly valid. It will blow up when executing window.atob(dataURI[2])

Expected behavior
Embeded image links within a svg should be fine.

Link to repl or repo (highly encouraged)
Just test with attached svg

Additional context
The issue is the regex for detecting a dataURI. It should be matching on the start of string character (and ideally, although not essential in this case, should include the Unicode flag on the end).
i.e. change the line:
const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
to the line:
const dataURI = src.match(/^data:image\/svg[^,]*?(;base64)?,(.*)/u);

withImages