Making SVG with ":data" reference in image work after Highcharts update to 9

Viewed 55

This post is for those who had the same issue as I did after upgrading to Highcharts 9, not a question.
The problem was the following: I had some highcharts label which contained an image. The image had its source as "data:image/svg+xml", with some encoded SVG afterwards, and it worked correctly until the update. After moving to Highcharts 9 however, these items were no longer present because the whole src attribute has been removed from the image.

At first I've started looking into the rendering methodology, but soon realized that it's not the way to go. So, after a day of wildly running around and trying to make it work by changing the way we introduce these SVG's (and failing), the next morning I've looked into the change notes and found this:

Improved security by filtering all HTML configuration strings and abstract syntax trees through allow lists before inserting into the DOM.(https://www.highcharts.com/blog/changelog/)

So it got me thinking, maybe it is related why the whole src attribute has been removed from the image, and surely, it was! So going further into the update notes, I've found that we can set what to filter out (https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#filtering). And the whole solution came down to adding this line at the root level:

Highcharts.AST.allowedReferences.push('data:');

And it worked like a charm! Just make sure you add it at the topmost level, so it won't get called multiple times - that would leave you with tons of "data:" tags.

I hope this post will cut down the investigation time for someone else - it definitely would have cut mine if it were there. Thank you for reading and happy coding! :)

0 Answers
Related