Hoewel ik me goed voor kan stellen waarom je vectoren op je website zou willen gebruiken, wil ik dit bericht graag beginnen met een kritische noot. Het toestaan van SVG in je filesystem is namelijk niet zonder risico aangezien SVG’s een nieuwe manier zijn om allerhande “injections” te faciliteren. Mocht je voldoende vertrouwen hebben in de beveiliging van je WordPress beheeromgeving en je eigen content beheren en zelfs dan nog altijd SVG’s toe willen voegen aan je site, lees dan vooral verder.

Want to allow users to upload SVG on your WordPress site?

Do it wisely, and read this post by @bjornjohansen: https://t.co/mnngx1Gm5P

— Marcel Bootsman ♎ (@mbootsman) April 6, 2018

Sinds de komst van Retina schermen krijgt het gebruik van Vector bestanden gemaakt met o.a. Adobe Illustrator in plaats van Adobe Photoshop een steeds groter wordende voet aan de grond op het wereldwijde web. Vooral SVG duikt met enige regelmaat op in de vorm van iconen of andere grafische uitspattingen op websites.

SVG staat voor Scalable Vector Graphics, en dit betekend eigenlijk zoveel, als dat de afbeelding die wordt getoond, niet is opgebouwd als een bitmap uit pixels, maar, uitgeschreven vector informatie bevat. In plaats van het definiëren van de kleur van iedere pixel, zoals bij bijvoorbeeld JPG en PNG, is iedere lijn een individueel vector object. Bij de informatie van deze objecten wordt bijvoorbeeld de lengte (verhouding) en de curve opgeslagen, maar doordat dit enkel in de vorm van een scriptechnische instructie staat omschreven is de browser in staat om met logisch rekenwerk de afbeelding met behoud van scherpte te vergroten. Iets wat bij het simpelweg dupliceren van pixels niet mogelijk is.

Ben jij bang voor je eigen PHP en JS bestanden? Nee? Wat weerhoud je dan van SVG?

Hoewel je de voordelen van deze SVG bestanden prima kunt gebruiken in je Plugins en Thema's, weerhoud WordPress je er tot op heden echter nog van om SVG bestanden als eindgebruiker naar de WordPress Media Library te uploaden. En dat terwijl het op 16 augustus 2011 de W3C standaard status, “recommended” heeft verkregen.

Gebrek aan WordPress Core Ondersteuning

Uiteraard zijn we van het Core team van WordPress.org gewend dat ze het ondersteunen van een innovatief afbeeldingsformaat als SVG niet zonder reden niet aan de standaard ondersteunde extensie lijst get_allowed_mime_types() hebben toegevoegd. Zoals ook te lezen valt in trac #24251.

Een SVG is namelijk simpelweg een script in de vorm van een XML bestand zoals je dat ongeveer gewend bent van HTML, CSS, JavaScript en PHP. En dat gezegd hebbende heb je ongetwijfeld de nodige exploits voorbij zien komen, of aan den lijve mogen ondervinden bij het bezoeken van één van je favoriete websites.

Maar wanneer je geloofd in de beveiliging van jouw WordPress omgeving en de inhoud van de SVG bestanden zelf in beheer hebt. Moet je je hierdoor dan laten beperken? Volgens mij gaat het gros van de WordPress ontwikkelaars er gemakshalve ook niet van uit dat er injecties plaats vinden in de JavaScript en PHP bronbestanden, dus dan kunnen we er toch ook voor zorgen dat onze SVG niet als een ware E.T. naar “huis” gaat bellen?

“The ‘save’ way” – De Plugins

Tijdens het schrijven van dit artikel vond ik dat ik mijn mening lichtelijk moest kunnen onderbouwen alvorens ik jullie handvaten aan wilde rijken voor het ondersteunen van SVG als extensie. Tijdens deze zoektocht bleek dat het, vooral indien je zelf niet de eindgebruiker van je WordPress website bent, maar wellicht te maken hebt met klanten die wat minder technische onderbouwing hebben en daardoor de veiligheidsrisico’s van online gevonden SVG’s wellicht wat lastiger in kunnen schatten, beter werken met een WordPress plugin die een extra veiligheidscheck over de te uploaden bestanden heen laat gaan. In de WordPress Plugin Repository kom je diverse plugins tegen die de SVG’s “scannen”, “sanitizen” en “scrutinizing”. De voorbeelden die mij werden aangeraden waren: SVG Support van Benbodhi en Safe SVG van Daryll Doyle.

Proof of Concept

Uiteraard is het codevoorbeeld hieronder slechts een proof of concept waardoor ik jullie de doorontwikkeldere opties niet wilde onthouden. Onderstaand codevoorbeeld kan echter ook dienen als basis voor het ondersteunen van andere, inheemse, of maatwerk bestandsformaten zoals wij bij Dutchwebdesign ook tegenkomen voor onze klanten. Denk hierbij aan audiobestanden die over een eigen encoding beschikken of het delen van bestanden die aansluiten bij jouw core business zoals bijvoorbeeld AutoCAD bestanden.

Mocht je als ware code cowboy dus toch liever zelf aan de slag gaan, lees dan vooral verder.

“The DIY way” – Het codevoorbeeld

Er van uitgaande dat jullie de beveiliging van jullie WordPress website goed op orde hebben, kunnen we aan de slag met het toestaan van de bestandsextensie middels de upload_mimes filter in de functions.php.

/**
 * Allow uploading SVG and SVGZ file extension within the upload_mimes filter
 *
 * @author: Simon van der Steen
 * @date: 29-3-2017
 * @url: http://Simon.vdSteen.me/WordPress/gebruik-vector-bestanden-in-wordpress
 */
function svds_add_svg_mimetype( $mimes ) {
	$mimes['svg'] = 'image/svg+xml';
	$mimes['svgz'] = 'image/svg+xml';

	return $mimes;
}
add_filter( 'upload_mimes', 'svds_add_svg_mimetype', 10, 2 );

In de versies < 4.7.1 werkt het uploaden van bestanden met de *.SVG en *.SVGZ nu naar behoren, maar vanaf 4.7.1 is er een bug aangaande mimetype afhandeling (WordPress trac #39550). Om deze bug te kunnen omzeilen, dien je ook gebruik te maken van onderstaande code. Vanaf 4.7.3 zou deze workaround overigens niet meer gebruikt hoeven worden, zorg er dus voor dat je jouw WordPress installatie update.

/**
 * Suppress mimetype security measures since 4.7.1 for SVG
 *
 * @author: Simon van der Steen
 * @date: 29-3-2017
 * @url: http://Simon.vdSteen.me/WordPress/gebruik-vector-bestanden-in-wordpress
 * @source: https://wordpress.org/support/topic/wp-4-7-1-kills-svg/page/3/#post-8649196
 */
function svds_suppress_svg_security_bug( $filetype_ext_data, $file, $filename, $mimes ) {
	if ( substr($filename, -4) === '.svg' ) {
		$filetype_ext_data['ext'] = 'svg';
		$filetype_ext_data['type'] = 'image/svg+xml';
	}

	if ( substr($filename, -5) === '.svgz' ) {
		$filetype_ext_data['ext'] = 'svgz';
		$filetype_ext_data['type'] = 'image/svg+xml';
	}

	return $filetype_ext_data;
}
add_filter( 'wp_check_filetype_and_ext', 'svds_suppress_svg_security_bug', 100, 4 );

Extra voordelen van het gebruik van SVG

• Doordat een SVG qua opbouw vrijwel gelijk is aan een XML, is het ook mogelijk om deze achteraf te stijlen. Zo kun naast het formaat oneindig uitrekken, ook één SVG gebruiken als label voor verschillende post types met een andere kleur.
• Doordat een SVG niet is opgebouwd uit “statische” pixels en vooraf gedefinieerde afmetingen (wat voor afbeeldingen met de wat grotere afmetingen kan oplopen naar miljarden pixels (een “kleine” afbeelding van 640 x 480 bevat al 307.200 pixel, red.) en de bijkomende MB’s die het vasthouden van deze data met zich mee brengt), maar scriptregels om het lijn- en kleurwerk van de afbeelding te bepalen, scheelt dit aanzienlijk in het aantal MB’s dat een SVG in beslag neemt op je server.