icon(svg): large icon from cache causes 100% CPU during RegEx replacement

[korengal]

Bug

Since AngularJS Material version 1.1.11,
The site is stuck after the second opening of the dialog with the SVG icons

CodePen and steps to reproduce the issue:

CodePen
1)Click on "CUSTOM DIALOG" button.
2)Close the dialog
3)Click again on the "CUSTOM DIALOG" button.
4)Chrome stuck.

When I debug it I saw that the code is stuck on this function "transformClone".

issue: Chrome

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.7
• AngularJS Material: 1.1.13 , 1.1.12 , 1.1.11
• OS: Windows
• Browsers: all

Thanks :)

[codymikol]

Not an expert with Regex, bit that's definitely causing the perf issues.

specifically

/(.*xlink:href="#)(\w*)(".*)/g

and

/(.*url\(#)(\w*)(\).*)/g

It's also worth noting that this SVG is very large ~171KB, maybe there are better alternatives to parsing with a RegEx?

[Splaktar]

That would seem to indicate that it does eventually complete and display the dialog? I didn't wait long enough to see that. I assumed that it was causing some kind of infinite loop.

[codymikol]

I believe it would show up eventually, however I have no idea how long the RegEx would take to complete.

The ReEx it gets stuck on is 497405 characters

The related code is

// Inject the cacheSuffix into all instances of url(id) and xlink:href="#id".
// This use of innerHTML should be safe from XSS attack since we are only injecting the
// cacheSuffix with content from $mdUtil.nextUid which we verify is a finite number above.
clone.innerHTML = clone.innerHTML.replace(/(.*url\(#)(\w*)(\).*)/g, addCacheSuffixToId);
clone.innerHTML = clone.innerHTML.replace(/(.*xlink:href="#)(\w*)(".*)/g, addCacheSuffixToId);

I'm wondering if this could accomplished via querySelectorAll, but I'm thinking this had to be be some kind of IE workaround.

[codymikol]

It's definitely quite the large SVG 😛

[codymikol]

It takes longer than 250ms in Regexr and times out given the same scenario

[Splaktar]

Yeah, I can't reproduce this using a standard material icon like close (CodePen).

[codymikol]

What specifically are those RegExs doing? is that not something that querySelector is capable of?