gilbarbara/react-inlinesvg

dataURI matching regex needs to match on start of string

wigsaparelli opened this issue · 0 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