Fix: Invalid SVG Blob Formatting

[taj-p]

Intent

The extension is currently corrupting SVG type Blobs because of the monkeypatched Blob incorrectly injects the script tag into the resulting SVG.

We've found that our users cannot view SVGs on our website while ExpressVPN is enabled. This is a big problem for our site which depends on viewing and manipulating SVGs.

cc @expressvpn-andre-l / @expressvpn-tom-l

Before / After

You can see an example of how SVGs were encoded before these changes here.

• The SVG is not properly rendered.

You can see an example of SVG rendering after these changes here.

• The SVG is rendered 😄

Note: I quickly hacked together these changes. Please amend as you see fit!

[taj-p]

cc @expressvpn-andre-l / @expressvpn-tom-l

SVGs are no longer rendering correctly for users of ExpressVPN who use www.canva.com - is there any chance you could expedite a hotfix 🙏 ?

This bugs prevents users from viewing SVGs rendered via URLs created from blobs as shown below:

        var blob = new Blob([svgData], { type: 'image/svg+xml' });
        var url = URL.createObjectURL(blob);

If there's anything I can do to help, please let me know!

[xv-bruno-m]

Hey @taj-p

Thanks for raising this. We have just allocated time to fix it and will start working on it very soon.
Just to clarify something, the problem happens on all SVGs rendered in canva.com, not just when the user exports them, correct? Can you provide a step-by-step on how to encounter this issue in canva.com?

Thank you

[taj-p]

Thanks @xv-bruno-m - Yeah of course! Sorry it took me so long - I needed to open an account. You should be able to view this design. It should look like this:

Instead, with ExpressVPN on, you see this:

(We catch the error and show the user a fallback image since the SVG becomes invalid)

[taj-p]

bump @xv-bruno-m - have you had a chance to work on this?

[xv-bruno-m]

bump @xv-bruno-m - have you had a chance to work on this?

Haven't had a chance yet but it has been prioritized. I believe we may be able to ship a fix in 2 weeks or so.

[xv-bruno-m]

Hey @taj-p

We will start the rollout of the build that includes a fix for this issue - v6.0.4.6091
Let me know when you get it and confirm it fixes it. Thanks again for your report and suggested fix!

Cheers

[taj-p]

Hey @taj-p

We will start the rollout of the build that includes a fix for this issue - v6.0.4.6091
Let me know when you get it and confirm it fixes it. Thanks again for your report and suggested fix!

Cheers

Nice thank you! 🙏🥳

[ethan-canva]

👋 @xv-bruno-m, (same from Canva) we are experiencing the same problem when building our MPEG-DASH manifest (For adaptive video playback).

   // sample code
    const xml = new Blob([manifest], { type: 'text/xml' });
    const url = URL.createObjectURL(xml);

It breaks at the same line of code in gps.js with an error

"Failed to execute 'insertAdjacentHTML' on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document."

cc: @expressvpn-andre-l

Please advise

[xv-bruno-m]

Hey

Could you please make a codepen/jsbin with the code that breaks it?

Thanks