WordPress SVG-tuki turvallisesti käyttöön

SVG on verkkosivustojen kannalta erinomainen tiedostomuoto erityisesti logoille, kuvakkeille ja yksinkertaisille vektorigrafiikoille. Se skaalautuu eri näyttökoihin ilman pikselöitymistä ja tiedostokoko voi jäädä pieneksi.

WordPress ei kuitenkaan kohtele SVG:tä samalla tavalla kuin tavallisia kuvatiedostoja. Syynä on SVG:n rakenne: kyseessä on XML-pohjainen tiedosto, joka voi sisältää muutakin kuin pelkän visuaalisen kuvauksen.

Siksi SVG-tuen lisääminen WordPressiin kannattaa tehdä hallittuna upload-prosessina, ei pelkästään sallimalla image/svg+xml MIME Type.

Mikä SVG on?

SVG eli Scalable Vector Graphics on XML-pohjainen vektorigrafiikan tiedostomuoto.

SVG sopii erityisesti:

• logoihin
• kuvakkeisiin
• kaavioihin
• käyttöliittymägrafiikkaan
• yksinkertaisiin kuvituksiin
• skaalautuviin verkkografiikoihin

Toisin kuin JPEG tai PNG, SVG ei perustu pikseleihin samalla tavalla. Grafiikka määritellään elementtien ja koordinaattien avulla.

Miksi SVG voi olla tietoturvariski?

SVG:n erityispiirre on, että tiedosto voi sisältää XML-rakenteen lisäksi ominaisuuksia, joita ei tavallisessa bittikarttakuvassa ole.

SVG voi sisältää esimerkiksi:

• elementtejä
• CSS-tyylejä
• linkkejä
• metadataa
• tapahtumakäsittelijöitä
• skriptejä

Jos epäluotettava käyttäjä pystyy lataamaan haitallisen SVG:n ja tiedosto tarjoillaan selaimelle väärässä kontekstissa, seurauksena voi olla esimerkiksi XSS-riski.

Siksi SVG:n salliminen pelkällä MIME Type -määrityksellä ei ole riittävä tietoturvaratkaisu.

Miksi WordPress ei oletuksena salli SVG:tä kaikille?

WordPressin konservatiivinen lähestymistapa perustuu siihen, ettei järjestelmään haluta avata tarpeettomia tiedostomuotoja.

SVG:n kanssa ongelma ei ole pelkästään tiedoston pääte:

vaan tiedoston sisäinen sisältö.

Turvallinen SVG-ratkaisu tarvitsee siksi sekä:

• tiedostotyypin tarkistuksen
• sisällön validoinnin
• tarvittaessa sanitoinnin
• käyttöoikeuksien hallinnan

Pelkkä upload_mimes ei riitä

SVG voidaan teknisesti sallia esimerkiksi:

Tämä avaa SVG-uploadin, mutta ei tee SVG-tiedostoista automaattisesti turvallisia.

Siksi tuotantoympäristössä kannattaa käyttää varsinaista SVG-sanitointiratkaisua tai rajata SVG-upload luotetuille käyttäjille.

SVG-sanitointi

Sanitoinnin tarkoituksena on poistaa SVG:stä rakenteet, joita ei tarvita grafiikan näyttämiseen mutta jotka voivat aiheuttaa tietoturvariskin.

Sanitointi voi esimerkiksi poistaa:

• <script>-elementit
• vaaralliset tapahtuma-attribuutit
• epäluotettavat URL-osoitteet
• tietyt XML-rakenteet
• tarpeettoman metadatan

Tärkeää on käyttää tähän SVG:lle suunniteltua parseri- ja sanitointiratkaisua.

Pelkkä str_replace()-tyyppinen tekstinkäsittely ei ole luotettava tapa puhdistaa XML-tiedostoa.

Kuka saa ladata SVG-tiedostoja?

Yksi tehokkaimmista turvatoimista on rajoittaa SVG-upload vain käyttäjille, jotka sitä oikeasti tarvitsevat.

Esimerkiksi yrityksen verkkosivustolla SVG-upload voidaan sallia vain ylläpitäjille tai sisällöntuottajille, joilla on siihen tarkoitettu käyttöoikeus.

Tällöin kannattaa tarkistaa käyttäjän capability ennen tiedoston hyväksymistä.

Älä luota käyttöliittymään

SVG-upload-painikkeen piilottaminen tietyiltä käyttäjiltä ei ole tietoturvaratkaisu.

Käyttöoikeus pitää tarkistaa palvelinpuolella.

Selain voi esimerkiksi lähettää suoraan HTTP-pyynnön palvelimelle, vaikka käyttöliittymässä upload-kenttää ei näytettäisi.

SVG ja wp_handle_upload_prefilter

WordPressin upload-prosessiin voidaan liittää oma tarkistus wp_handle_upload_prefilter-hookilla.

Sitä voidaan käyttää esimerkiksi:

• tiedostonimen tarkistamiseen
• koon tarkistamiseen
• SVG-uploadin rajoittamiseen
• projektikohtaisten sääntöjen toteuttamiseen

Prefilter ei kuitenkaan yksinään korvaa SVG-sanitointia.

Se on yksi osa koko upload-ketjua.

SVG:n sisältö kannattaa tarkistaa

Turvallinen SVG-prosessi voi näyttää esimerkiksi tältä:

Upload → käyttöoikeus → tiedostotyypin tarkistus → SVG-validointi → sanitointi → tallennus → attachment

Näin SVG ei päädy suoraan julkiseen käyttöön ennen kuin sen sisältö on käsitelty.

SVG ja Media Library

Turvallisesti käsitelty SVG voidaan liittää WordPressin Media Libraryyn attachmentina.

Tällöin voidaan käyttää myös esimerkiksi:

• otsikkoa
• kuvausta
• alt-tekstiä
• attachment ID:tä
• tiedoston URL-osoitetta

SVG:n kohdalla kannattaa kuitenkin huomioida, että WordPressin tavallinen rasterikuvien käsittely ei sovellu siihen sellaisenaan.

SVG ja WordPressin kuvakoot

JPEG- ja PNG-kuvista WordPress voi luoda esimerkiksi:

• thumbnail
• medium
• large
• muita rekisteröityjä kuvakokoja

SVG:n kohdalla sama prosessi ei toimi samalla tavalla, koska SVG on vektorigrafiikkaa.

Jos projektissa tarvitaan rasteriversioita SVG:stä, muunnos kannattaa tehdä erillisellä kuvanmuunnosprosessilla.

SVG ja alt-teksti

SVG:n tekninen turvallisuus ei poista saavutettavuuden merkitystä.

Jos SVG toimii sisällöllisenä kuvana, sille kannattaa antaa tarkoituksenmukainen vaihtoehtoinen teksti.

Esimerkiksi logo voi olla:

Koristeellinen SVG voidaan puolestaan käsitellä niin, ettei se lisää tarpeetonta sisältöä ruudunlukijalle.

SVG logona

SVG on erinomainen formaatti logoille.

Yrityksen logossa kannattaa huomioida:

• turvallinen sanitointi
• oikea alt-teksti
• riittävä kontrasti
• responsiivisuus
• saavutettavuus
• mahdollinen inline-SVG:n käyttö

Logoja varten voidaan myös käyttää teeman tai design-järjestelmän kautta hallittua SVG:tä sen sijaan, että kaikki käyttäjät voisivat ladata SVG-tiedostoja.

SVG inline-muodossa

SVG voidaan näyttää kahdella yleisellä tavalla.

Tiedostona:

Tai inline-SVG:nä HTML:n sisällä.

Inline-mallissa SVG:n sisältö tulee suoraan osaksi HTML-dokumenttia, joten sanitoinnin merkitys korostuu entisestään.

Jos SVG tulee käyttäjän tai ulkoisen järjestelmän syötteenä, sitä ei pidä sijoittaa suoraan HTML:ään ilman asianmukaista sanitointia.

SVG ja Content Security Policy

Content Security Policy eli CSP voi tarjota lisäsuojakerroksen XSS-hyökkäyksiä vastaan.

CSP:n avulla voidaan rajoittaa esimerkiksi:

• skriptien lähteitä
• inline-skriptejä
• ulkoisia resursseja
• muita selaimen suorittamia toimintoja

CSP ei kuitenkaan korvaa SVG:n sanitointia.

Paras ratkaisu on käyttää useita suojakerroksia.

SVG ja REST API

Jos SVG-tiedostoja ladataan WordPressiin REST API:n kautta, sama turvallisuusmalli pitää säilyttää.

On huomioitava:

• autentikointi
• käyttöoikeudet
• MIME Type
• tiedoston sisältö
• sanitointi
• tallennus
• lokitus

Hallintapaneelin kautta turvallisesti toimiva upload ei automaattisesti tarkoita, että REST API -upload olisi yhtä turvallinen.

SVG ja WooCommerce

WooCommerce-sivustolla SVG:tä voidaan käyttää esimerkiksi:

• tuotemerkkien logoissa
• maksutapojen kuvakkeissa
• käyttöliittymässä
• tuotteen teknisissä piirroksissa
• kategorioiden grafiikassa

Jos asiakkaat tai muut epäluotetut käyttäjät voivat lähettää tiedostoja, SVG:n salliminen vaatii erityistä harkintaa.

SVG:n käsittely mediakirjastossa

Jos sivustolla on suuri määrä SVG-tiedostoja, kannattaa huomioida myös ylläpito.

Hyvä järjestelmä voi:

• validoida tiedoston uploadissa
• sanitoida sisällön
• tallentaa attachmentin
• näyttää tiedoston turvallisesti
• tarjota alt-tekstin
• estää vaaralliset tiedostot
• lokittaa epäonnistuneet uploadit

Näin SVG:t eivät muodostu sivuston tietoturvan heikoksi lenkiksi.

Yleisimmät virheet

SVG-tuen käyttöönotossa tehdään usein samoja virheitä.

Tyypillisiä ovat:

• SVG:n salliminen pelkällä upload_mimes-filtterillä
• kaikkien käyttäjien SVG-uploadin salliminen
• tiedostonimen pitäminen ainoana tarkistuksena
• SVG:n käsittely tavallisena JPEG-kuvana
• inline-SVG:n käyttäminen ilman sanitointia
• käyttäjän käyttöoikeuksien unohtaminen
• REST API -uploadin testaamatta jättäminen

Erityisesti avoimissa upload-järjestelmissä SVG kannattaa ottaa käyttöön vasta, kun koko käsittelyketju on suunniteltu.

Turvallisen SVG-ratkaisun malli

Käytännössä turvallinen toteutus voidaan rakentaa näin:

Jokaisella vaiheella on oma tehtävänsä.

Parhaat käytännöt

SVG-tuen käyttöönotossa kannattaa:

• salli SVG vain todelliseen tarpeeseen
• rajoita upload-oikeudet luotetuille käyttäjille
• validoi tiedosto
• käytä SVG:lle tarkoitettua sanitointikirjastoa
• älä luota pelkkään MIME Typeen
• älä luota pelkkään tiedostopäätteeseen
• pidä WordPress ja riippuvuudet ajan tasalla
• huomioi REST API ja muut upload-reitit
• testaa SVG:t staging-ympäristössä
• huomioi saavutettavuus
• käytä tarvittaessa CSP:tä lisäsuojana

Milloin SVG:tä ei kannata sallia?

SVG ei ole automaattisesti tarpeellinen jokaisella WordPress-sivustolla.

Jos sivustolla käytetään vain:

• JPEG-kuvia
• PNG-kuvia
• WebP-kuvia
• AVIF-kuvia

SVG-tuen lisääminen voi olla tarpeetonta.

Erityisesti monen käyttäjän ympäristössä kannattaa kysyä ensin, tarvitseeko käyttäjien todella pystyä lataamaan SVG-tiedostoja.

Yhteenveto

SVG on WordPressissä erittäin hyödyllinen tiedostomuoto, mutta sen käyttöönotto vaatii enemmän harkintaa kuin tavallisten kuvamuotojen salliminen. SVG on XML-pohjainen tiedosto, joten siihen voi liittyä rakenteita, joita ei haluta hyväksyä sellaisenaan.

Turvallinen SVG-tuki perustuu useaan kerrokseen: käyttöoikeuksiin, tiedostotyypin tarkistukseen, sisällön validointiin ja asianmukaiseen sanitointiin. Pelkkä upload_mimes-filtteri ei riitä.

Kun SVG:t sallitaan vain tarpeellisille käyttäjille, tiedostot käsitellään turvallisesti ja WordPressin oma upload-logiikka säilytetään mukana, SVG:t voidaan ottaa käyttöön ilman, että sivuston tietoturvaa tarpeettomasti heikennetään.