cloudflare / svg-hush

Make it safe to serve untrusted SVG files
MIT License
375 stars 17 forks source link

Issues with Custom Fonts + Embedded Images? #10

Open jon-sully opened 1 month ago

jon-sully commented 1 month ago

Hiya! I was excited to find that Cloudflare Images does support SVGs (neat!) but found some trouble with embedded fonts in my SVG's from Excalidraw exports. Excalidraw exports in both PNG and SVG, so, just for context, here's the PNG of a diagram I drafted:

PNG file of what my diagram looks like: pull-cdn

Nothing flashy, really. When I export as an SVG, it renders fine in macOS preview / quicklook, and I can see in the source that the fonts are embedded

SVG export of same diagram, click to see source: How Propshaft Works pt  2

But interesting stuff happens elsewhere. In fact, even the image shown right there ^ has the fonts and embedded images in this inline preview, but if you actually click that image and it opens in a new tab as a raw SVG, the fonts and embedded images have been stripped out.

That's essentially the same stripping I'm seeing after the SVG has been uploaded to CF Images. (Is GitHub using svg-hush..?)

The SVG I get back from CF Images now looks like this.

SVG downloaded from CF Images after uploading original: public

Though, when it loads in the browser, I tend to get a bevy of error messages:

image

So... I'm not entirely sure what to make of all of this. I'd love to use SVGs for my diagrams and continue to have my CF Images workflow for them, but I don't want to sacrifice my fonts and images in said diagrams.

For reference and repeatability, clicking on the image labeled "SVG export of same diagram, click to see source" above should render the pure, original SVG content in the browser. It should then be savable and processable through CFI by any reading / wanting to try debugging.

Thanks!

jon-sully commented 1 month ago

In case it helps, the image ID of the SVG I uploaded to CFI is abdb0979-e19b-4120-3929-087781601100.

jon-sully commented 1 month ago

I continue to dig into this and have pinpointed the issue. If I add:

<style>@font-face {font-family: FontyFont;src: url(data:font/woff2;base64,d09GMgABAAAAABIkAA4AAAAAIAgAABHRAAEAAAAAAAAAAAA);}</style>

To test.xml then run the test, I get:

<style>@font-face {font-family: FontyFont;base64,d09GMgABAAAAABIkAA4AAAAAIAgAABHRAAEAAAAAAAAAAAA);}</style>

In the resulting filtered.xml — which is a broken link.

Not a Rust dev but trying to figure out where in the CSS filtering this is happening to see what it may take to change