SVG Sanitizer

[adrian]

This module extends the FileValidatorModule to provide the ability to validate and sanitize SVG files.

http://modules.processwire.com/modules/file-validator-svg-sanitizer/

https://github.com/adrianbj/FileValidatorSvgSanitizer

If you're interested, here is some reading on why this is important:

http://www.ei.rub.de/media/hgi/veroeffentlichungen/2011/10/19/svgSecurity-ccs11.pdf

https://www.hackinparis.com/slides/hip2k11/09-TheForbiddenImage.pdf

Have a read about about the new validator and the SVG sanitizer in Ryan's blog post.

[Claus]

I wanted to use some SVGs in a very ordinary page, so I installed the SVG File Sanitizer/Validator module. That allowed me to upload SVGs into the editor. However, in more than half the times I try to upload an SVG file, the editor will just spin the circular dots and never finish. I then have to reload the page and start again.

Why oh why – does anyone know? I’m using 3.0.184, working from the MacOS Safari 15.3 (17612.4.9.1.8) browser. I have my AdGuard disabled, and deleting the Page Renderer Cache does not help.

NB: Just tried it in Chrome, and that worked no problemo. Appears to be a Safari specific issue. Which reminds me: Are there more than one editor available in ProcessWire? I seem to vaguely remember something along those lines?

[aagd]

According to https://github.com/ryancramerdesign/FileValidatorSvgSanitizer there should be a log at Setup > Logs > File-validator, does it say anything?

[adrian]

@Claus - do the same SVGs consistently fail and others consistently work, or is it random with a file working sometimes and not others?

If the former, can you post one that fails so we can test it?

[Claus]

2 hours ago, aagd said:

Setup > Logs > File-validator, does it say anything?

It does not say anything revealing about the stall.

 

1 hour ago, adrian said:

do the same SVGs consistently fail and others consistently work,

Nope. Appears to be random. Sometimes it helped adding them one-by-one, but it is no correlated to the specific files. I also turned on and off the ‘external reference’ test, and that didn’t change anything.

Anyhoot, it’s Safari so failure is to be expected.

[adrian]

Ah - sorry, I missed the point about it being Safari specific - are you seeing JS errors in the dev console?

[Claus]

New problem: The SVGs are supposed to be animating, however they are not. They are also minified even though I specifically turned that off and re-imported them.

13 minutes ago, adrian said:

are you seeing JS errors in the dev console?

Yes, I’ve attached a screenshot of the errors:

[adrian]

Take a look at this: https://github.com/processwire/processwire-issues/issues/674

I think it should help you fix the problem.

[Claus]

10 minutes ago, adrian said:

think it should help you fix the problem.

It did fix that issue – but not the upload issue, nor the animation issue. Here firstly is the error console output:

 

Secondly, is there a way to use SVGs exactly as I upload them, around the ‘SVG File Sanitizer/Validator’ module? I don’t need the sanitation, but this module seems to be required to use SVGs at all???

[adrian]

You can use SVGs without that module - I don't recall exactly, but if you uninstall it, you'll get a warning that tells you the alternative option.

There a few discussions online about Safari having issues with fetch (and sometimes XMLHttpRequest) with https. CORS might be coming into play, but it's hard to tell for sure.

Google: 

safari "failed to resource: cannot parse response"

AND

safari fetch https (even though I don't think this is actually fetch, there are still some posts that seem relevant).

In reality I steer all clients away from Safari because I still find lots of random issues with it here and there.

 

[adrian]

PS - that said, I don't see any issues here on Safari, but I am using the latest PW dev version so maybe something has been fixed in the last 6 months, so I would try an upgrade first.

[Claus]

Urg, now I can’t upgrade to the DEV version – it doesn’t show up in the SystemUpdater module. It did earlier today! Ha ha, I’m feeling pretty rusty today, but it has been a while since I looked at this last. So for captain slow here, how can I cajole PW to let me upgrade to the DEV version from within the admin interface?

[adrian]

You may need to log out and back in again. Not certain if that is still the current behavior but for quite some time it didn't pick up new PW versions without doing that.

Also, what version of the upgrades module are you using? The new one requires a manual refresh, but I am sure you've seen that.

[Claus]

Closed Chrome and tried logging in again. Didn’t help, still no DEV version on offer. My ProcessWireUpgrade is v. 0.1.1

[adrian]

Ok, so I assume you have clicked the "Refresh" button at the top right of the upgrades module?

[Claus]

Also uninstalling the SVGSanitizer did not reveal an alternative way to upload SVGs:

[adrian]

[Claus]

2 minutes ago, adrian said:

Ok, so I assume you have clicked the "Refresh" button at the top right of the upgrades module?

Oh, several times. But just now I went to the Upgrades interface again, and now the DEV is listed. Apparently PW needed to have a think and a soak first. Also – having just done it now – the PW versions disappear from the list when I press ‘Refresh’!

And now with the DEV version installed PW still refuse SVGs, and does not offer any hints about what to do.

[adrian]

1 minute ago, Claus said:

and does not offer any hints about what to do.

Did you see my screenshot above - you need to whitelist the svg extension in your image field settings.

[Claus]

6 minutes ago, adrian said:

Bingo! Thank you very much Adrian! I was feeling that this SVG thing felt very un-Ryanesque. Of course he thought of that, it was just a matter of finding the switch.

So now I am down to the new issue: How do I make these SVGs animate? See if any of this rings a bell: I can now upload the SVGs, and I can place them in a post, but only the first frame will show – no animation. Goes for all browsers, also after emptying the cache, re-opening the browsers. The SVGs in question will animate correctly when I right-click on one of them in the page, and open it in a new tab. The SVGs are animating using internal JavaScript, so can PW hinder this JS to fire?

[adrian]

2 minutes ago, Claus said:

so can PW hinder this JS to fire?

PW doesn't output anything on the frontend by default, so it's just your code. Perhaps you need to make sure the JS animate function isn't triggered until the DOM is ready.

[Claus]

I’ll put the question to the developer of the generating app. Thanks again Adrian!

[aagd]

Do you output the SVG in an img-tag? Probably you need to output them as inline SVG, directly in the HTML with something like:

file_get_contents($page->image->filename);

Edit: I'd recommend an extra image field called sth. like "svg" that only allows svg format. You don't want JPGs end up inline like that. Also you probably don't need the XML declaration in the SVG.

[Claus]

11 hours ago, aagd said:

Do you output the SVG in an img-tag? Probably you need to output them as inline SVG, directly in the HTML with something like:

file_get_contents($page->image->filename);

Edit: I'd recommend an extra image field called sth. like "svg" that only allows svg format. You don't want JPGs end up inline like that. Also you probably don't need the XML declaration in the SVG.

Seems like you are right. I have created the STH-field, and added it to the ‘basic-page’ template, set it to accept SVGs, but where do I put your code-snippet?

[aagd]

@Claus Instead of the image tag

<img src="<?=$page->image->url?>" />

you would directly write the content of the svg file <svg>...</svg>

<?=file_get_contents($page->image->filename)?>

filename should give the full server path to the file. A relative path might also work.

Note that ideally there should be no XML declaration in the SVG file. Also be aware that a 'bad' SVG can break your page or can do other evilous things. You shouldn't allow editors to upload SVG files, at least not without testing (or hide the field for non-superusers).

Inlining allows to access SVG contents through external JS & CSS. From simple color changes on hover to animations (CSS & JS), there are a lot of useful benefits.

There are also other ways that might work for you here like using <object> or <embed> tags.
A good overview is Using SVG | CSS-Tricks - CSS-Tricks