Umbraco-cms: Uploading SVG's Causes Error (Depending on imageFileTypes Setting)

[Nicholas-Westby]

Porting this bug over from the legacy issue tracker: http://issues.umbraco.org/issue/U4-6008

In short, if you've configured SVG images as one of the imageFileTypes in umbracoSettings.config, you will get an error on upload. This is because Umbraco is trying to extract the width/height of the image and it is failing to do so for SVG (because SVG's, unlike raster image formats, are scalable and don't necessarily have native image dimensions).

If you don't configure SVG images as one of the imageFileTypes in umbracoSettings.config, you will not get the benefits of files being detected as an image (e.g., won't get the image media type on upload, which means it's not pickable from a media picker).

A pull request that fixed the issue has been around for a couple years (unfortunately, the original person to review it did so incorrectly, and so they incorrectly thought the PR didn't fix anything): https://github.com/umbraco/Umbraco-CMS/pull/1267

However, there are people debating the pull request and the Umbraco code base has since evolved to the point that the pull request doesn't exactly fix the issue anymore (though it could if the fix were applied to a different file).

The affected Umbraco versions listed on the legacy issue are: 7.2.0, 7.3.0, 7.7.4, 7.10.4, 7.11.2. However, I'm pretty sure it still applies to the latest version of Umbraco (7.12.2).

BTW, as mentioned in the comments for the other issue, you must also remove SVG from disallowedUploadFiles in umbracoSettings.config (weird that it's there by default, if you ask me).

[nul800sebastiaan]

I've re-reviewed this and added the test results on #1267.

Apart from the issues mentioned there, I want to once again highlight the security implications of allowing editors to upload SVG files.
Since they can contain javascript, the editor really has abolutely no way of knowing the file they're uploading is not hiding something that will be exposed directly on the frontend of the site.
This is why SVG files are not allowed to be uploaded by default.

More reading material:
https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

Actually, in the comments there I see something interesting: browsers are not supposed to execute embedded scripts as long as an SVG is wrapped in an image tag, that is very good news and makes the security implications a lot less. We can probably allow SVGs to be uploaded after all. I'll study that some more.

[enkelmedia]

I guess that the real ”issue” here is that if we only allow an SVG to be uploaded (by not disallowing it) we still can’t choose it in the image picker dialogs.

But if we configure the SVG as an image type, the upload will blow and the picker will work :)

[imranhaidercogworks]

I am working on this :)

[nul800sebastiaan]

Fixed in https://github.com/umbraco/Umbraco-CMS/pull/3072

[dawoe]

@nul800sebastiaan the PR is merged. Shouldn't this be closed then ?

[dawoe]

Oop it is closed

[TFAstudio]

For anyone coming in late to this game, using SVG images in Umbraco CMS v7 is now supported if you upgrade to 7.13.0 but there's some additional steps you'll need to take so you can actually use these fixes!

1. Edit /config/umbracoSettings.config and remove SVG from the <disallowedUploadFiles> settings.

eg. <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>

2. Also add a new section inside this same config file inside <content> that specifies all the imaging file extensions you want to allow including SVG.

<content>
...
    <imaging>
        <imageFileTypes>jpeg,jpg,gif,bmp,png,tiff,tif,svg</imageFileTypes>
    </imaging>
...
</content

Without these two steps, all the work outlined in this fix is more or less pointless :)

Note: If you make these config changes whilst logged into the Umbraco back-office, make sure you do a browser refresh to see the changes. Otherwise you might find your RTE (Rich Text Editor) Media Picker is still not showing SVG files in Media folders.