SVG in WordPress veilig

Afgelopen week hebben kregen wij de vraag van onze webdesigner om SVG bestanden te gebruiken in een nieuw te ontwerpen website. Bij het testen in WordPress kwam naar voren dat dit standaard niet mogelijk is. Tijd voor onderzoek en tijd voor meer uitleg ten aanzien van het gebruik van SVG in WordPress.

SVG is een op XML gebaseerde vector afbeelding (krommen) die veel gebruikt wordt in websites om een logo of icoontjes weer te geven. De belangrijkste reden van deze populariteit onder developers en designers is de schaalbaarheid van dit formaat, een over het algemeen kleiner bestandsformaat (soms zelfs aanzienlijk bij eenvoudige graphics) en ze pixelen niet op retina schermen.

SVG in WordPress

WordPress staat het standaard niet toe om bestanden in SVG formaat up te loaden vanuit veiligheidsoverwegingen. In dit artikel ga ik meer uitleg geven over de manier waarop je op een veilige manier via WordPress met SVG bestanden kunt werken en ik benoem de valkuilen voor wanneer je gaat werken met vector bestanden. Ik hoop ooit dat SVG een deel gaat worden van de WordPress kern.

1. Wat is een SVG?
2. Waarom zijn veiligheidsmaatregelen in relatie tot SVG zo belangrijk
3. Hoe kun je op een veilige manier een SVG in WordPress gebruiken

Wat is een SVG?

Volgens Wikipedia is een SVG (afkorting voor scalable vector grapic) een op XML gebaseerd vector afbeelding voor 2-dimensionele graphics met ondersteuning voor interactie en animatie. Je kunt de bestanden zelf manipuleren met programmeercode of binnen een teksteditor. SVG is een open standaard en is al in 1999 ontwikkeld door het World Wide Web Consortium. Op dit moment, juli 2018, maakt minder dan 4% van alle websites gebruik van het SVG formaat maar het gebruik neemt enorm toe het laatste jaar. De grote websites maken vrijwel allemaal gebruik van SVG.

SVG wordt op dit moment eigenlijk ondersteund door vrijwel alle browsers.

• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 10+
• iOS Safari 3.2+
• Opera Mini (all)
• Android Browser 4.4+
• Internet Explorer 9, 10, 11+ and Edge

De voordelen van SVG

Een SVG is een vector bestand wat inhoudt dat het schaalbaar is in zowel een browser als in fotobewerkings software. Hierdoor zijn ze geweldig in gebruik voor zowel grafische vormgevers als ook webdesigners. Als je een PNG of JPG bestand wilt aanpassen in bijvoorbeeld Photoshop dan kun je deze niet vergroten zonder dat je krijgt te maken met verkorreling. Met een SVG kun je ze oneindig vergroten en elke maat zal er pixelperfect uitzien. Daarom is het een super bestand voor met name retina schermen. Google indexeert ook SVG bestanden wat natuurlijk goed nieuws is vanuit SEO perspectief.

SVG zijn in de regel minder groot dan PNG of JPG bestanden. Daardoor kun je door gebruik te maken van SVG’s de snelheid van je WordPress website verhogen om de je de siteomvang reduceert. Echter, voor gedetailleerde foto’s is een SVG niet geschikt want in dat geval worden de bestanden zelfs groter. Gebruik SVG dus met name voor logo’s en icoontjes en bespaar daarmee bijna 90%.

Wat wel even interessant is om te weten is dat sociale media waaronder Facebook en Twitter het SVG bestand niet ondersteunen om te delen. Als je dus aan een blogbericht een SVG hebt gekoppeld als ‘uitgelichte afbeelding’ dan heb je een probleem.

Waarom levert SVG een veiligheidsprobleem?

De reden waarom SVG op dit moment nog niet omarmt wordt door WordPress is dat er diverse veiligheidsproblemen aan worden toegekend. Volg deze discussie hier. SVG is een XML bestand dat diverse kwetsbaarheden heeft waarmee gewone afbeeldingen formaten geen last van hebben. Denk daarbij aan XML external entity attacs (XXE), bomb nested entities en XSS attacks. Diverse specialisten hebben gewaarschuwd voor de gevaren (Secupress en Mario Heiderich).

Veel SVG plug-ins in het WordPress archief maken gebruik van een stukje code waarmee je het mogelijk maakt om SVG’s te uploaden naar de WordPress media archief. Dit is niet veilig. Maak dus niet gebruik van de eerste de beste SVG plug-in maar lees is verder.

1. De oplossing is dat je verstandig om moet gaan met SVG. Dit houdt in dat je de code op schoont en je bepaalde veiligheidsissues, zoals code injection, voorkomt. Dit houdt in dat je data moet versleutelen, filteren en valideren. Maak dan gebruik van deze SVG sanitizer.
2. Het is ook belangrijk om te bepalen wie toegang heeft tot het uploaden van SVG. Als je bijvoorbeeld met meerdere auteurs een site beheert dan heb je geen controle over de SVG bestanden die iemand anders uploadt. Het beperken van de SVG upload aan bijvoorbeeld bepaalde rollen is al een belangrijke stap.

Hoe kun je veilig met SVG werken in WordPress

De WP SVG plug-in (ook bekend als de Safe SVG), maakt gebruik van de SVG-Sanitizer Library tijdens het uploaden van SVG images naar jouw WordPress media archief. Deze plug-in maakt het ook mogelijk de SVG’s te zien als normale afbeeldingen in het archief. Deze plug-in is gratis te installeren.

Tip bij het genereren van een SVG

Alvorens je een SVG upload is het belangrijk om te begrijpen dat het anders werkt dan het exporteren van een afbeelding. Tijdens het exporteren van een SVG bestand vanuit jouw fotobewerkingspakket wil je dat tekst als krommen wordt geëxporteerd (of creëer krommen). Als je dat niet doet dan kan het resultaat verschillen afhankelijk van de browser.

Dus, met deze plug-in heb je relatief veilig SVG support voor WordPress gerealiseerd. Let op, deze plug-in wordt niet aanbevolen en ondersteund door de WordPress core, dus, gebruik is voor eigen risico.

SVG’s zijn een fantastische manier om het uiterlijk van jouw website te verbeteren. Wij adviseren het gebruik van SVG, PNG en JPG in combinatie met het oog op het beste resultaat omdat gedetailleerde afbeeldingen in SVG wel erg groot worden. Wat vind jij? Ben jij na het legen van dit artikel overtuigd van de mogelijkheden van SVG?

PS: Voor dit project hebben wij zelf besloten om slechts eenmalig SVG bestanden te uploaden en daarna de functie uit te zetten om toekomstige problemen te voorkomen. Het betrof enkel een logo en 6 icoontjes. De rest van het beeldmateriaal was gedetailleerde fotografie en dan is SVG geen optie.