Jump to content

SVG Sanitizer


adrian
 Share

Recommended Posts

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.

  • Like 5
Link to comment
Share on other sites

  • 6 years later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

1966799017_Screenshot2022-03-05at18_07_44.thumb.png.077e55a22a3d911e1398fcc916e0a578.png

Link to comment
Share on other sites

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:

2091649359_Screenshot2022-03-05at18_26_29.thumb.png.d8f070188073e52aecfa9e271544b5b0.png

 

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???

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

6 minutes ago, adrian said:

image.png.2768521dc5f9a5df1108f28f25fd6cdf.png

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...