SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA SEMINAR. SVG format datoteke. Filip Sakač. Za predmet: Računalna forenzika

Transcription

1 SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA SEMINAR SVG format datoteke Filip Sakač Za predmet: Računalna forenzika Zagreb, siječanj, 2017.

2 Sadržaj Sadržaj... 2 Uvod... 3 Format datoteke... 4 Prikazivanje elemenata u SVG slici... 4 Osnovni elementi SVG slike... 4 Složeni elementi... 7 Transformacije... 7 Primjeri svg datoteka... 8 Metapodatci Steganografija koristeći SVG datoteke SVG datoteke i virusi Zaključak Izvori... 15

3 Uvod SVG (Scalable Vector Graphics) je format za pohranjivanje slika vektorske grafike, a temelji se na jeziku XML (Extensible Markup Language). Za razliku od rasterske grafike koja sliku pohranjuje kao pravokutnu mrežu točaka (piksela eng. pixel), vektorska grafika sliku pohranjuje pomoću poligona. Poligoni su dvodimenzijonalna geometrijska tijela omeđena konačnim brojem dužina. Glavna prednost takvih slika je da ih se može beskonačno uvećati bez gubitka kvalitete. SVG datoteke obično imaju ekstenziju.svg, a pošto se temelje na XML standardu može ih se čitati i uređivati u tekstualnom obliku. Dodatna prednost korištenja XML formata je da se njime može upravljati pomoću JavaScripta, što omogućuje animiranje SVG slike i interakciju s korisnikom, na isti način kao i HTML dokument. Slike u SVG formatu su obično manje od slika u rasterskim formatima (.jpg,.png,.bmp) i mogu se efikasno komprimirati bez gubitaka isto kao i tekst (komprimirana.svg slika koristi ekstenziju.svgz). SVG specifikacija je otvoreni standard razvijen od strane World Wide Web Consortiuma (W3C) godine [1]. Svi moderni web pretraživači imaju ugrađenu podršku za prikazivanje slika u SVG formatu, također postoje mnogi alati za izradu i obradu SVG slika. Primjeri alata za obradu SVG slika otvorenog koda su: Inkscape, LibreOffice Draw i Dia, a primjeri vlasničkih programa su: Adobe Ilustrator i Corel Draw. Aktualna verzija SVG specifikacije je 1.1 a u izradi je novija verzija 2.0. Postoje i posebne specifikacije s ograničenim mogućnostima prilagođenim mobilnim uređajima SVG Basic i SVG Tiny.

4 Format datoteke SVG datoteka je tekstualna datoteka koja se temelji na XML formatu. Kao i sve XML datoteke tako i SVG počinje sa XML deklaracijom u prvom redu kao što je prikazano u Kodu1. <?xml version="1.0" encoding="utf-8" standalone="no"?> Kod1. Deklaracija XML dokumenta Osnovni XML element koji sadrži sve ostale SVG elemente je <svg>. Jedan <svg> element također može sadržavati i druge <svg> elemente što omogućuje ugnježđivanje slika. S atributima <svg> elementa moguće je definirati osnovne informacije o slici kao što su: verzija SVG jezika kojim je dokument pisan, širina slike u pikselima, visina slike u pikselima, klasa elementa (isto kao i HTML može se koristiti za selekciju elemenata, ili definiranje CSS stila). Ako je <svg> element ugniježden mogu se dodatno definirati atributi x i y kao koordinate na kojima je potrebno prikazati element. Prikazivanje elemenata u SVG slici Elementi SVG slike prikazuju se u kartezijevom koordinatnom sustavu jednako kao i kod HTML-a. Ishodište koordinatnog sustava je gornji lijevi kut ekrana, X vrijednosti rastu prema desno, a Y vrijednosti rastu prema dolje. Mjerna jedinica koja se koristi su pikseli. Elementi se na sliku crtaju u redoslijedu kojim se pojavljuju u datoteci, to znači da noviji elementi mogu u potpunosti ili djelomično prekrivati elemente koji su definirani ranije. Osnovni elementi SVG slike <line> o Koristi se za iscrtavanje linije između dvije točke (x1,y1) i (x2,y2), obavezno je također definirati i boju da bi se linija iscrtala pomoću atributa stroke. U Kodu2 je prikazan osnovni primjer crvene linije između točaka (5,5) i (90,90) <line x1="5" y1="5" stroke="red" x2="90" y2="90" /> Kod2. Implementacija linije

5 o Od ostalih atributa mogu se naglasiti: stroke-width za definiranje širine linije, stroke-linecap koji definira dali je kraj linije zaobljen ili ravan, te stroke-dasharray s kojim je moguće definirati isprekidanu liniju s točno određenim segmentima <rect> o Koristi se da bi se nacrtao kvadrat, određene visine i širine atributima height i width, i s definiranim koordinatama gornjeg lijevog kuta atributima x i y. U Kodu3. je prikazan osnovni primjer kvadrata. <rect x="60" y="95" height="30" width="50" /> Kod3. Implementacija kvadrata o Neki ostali važniji atributi: fill za definiranje ispune kvadrata, ako atribut nije naveden koristi se crna boja za ispunu. Osim boje kvadrat može biti ispunjen i kompleksnijim efektima kao što su gradijent. Atributi stroke, stroke-width i stroke-dasharray imaju jednaku funkciju kao i u <line> elementu. <circle> o Element se koristi da bi se nacrtao krug, središte kruga definirano je koordinatama cx i cy, a polumjer je definiran atributom r. S tim elementom je također moguće koristiti i ostale atribute navedene kod elemenata <line> i <rect>. U Kodu4. je prikazan osnovni primjer elementa <circle>. <circle cx="80" cy="50" r="40"/> Kod4. Implementacija kruga <elipse> o Element je vrlo sličan elementu <circle> samo što koristi dva polumjera rx i ry. Polumjeri označavaju duljinu horizontalne i vertikalne poluosi. Elipsa je uvijek jednako orijentirana osim ako se nad njom ne izvrši rotacija. U Kodu5. je prikazan osnovni primjer elipse.

6 <ellipse cx="80" cy="110" rx="75" ry="105"/> Kod5. Implementacija elipse <path> o Najbitniji element u SVG formatu, s njim je moguće implementirati sve do sad navedene oblike. Može koristiti sve navedene atribute za opis linije i ispunu kao i dosad navedeni elementi. Razlika je da su svi vrhovi poligona pohranjeni u atributu d kao string sa vrijednostima koordinata napisanima u nizu. Osnovna implementacija prikazana je u Kodu6. o Navedene koordinate u stringu povezuju se linijama, te se na kraju dobiveni lik ispuni bojom. Način na koji se povezuju vrhovi mogu se definirati slijedećim slovima napisanim ispred koordinate: L ravna linija, Q kvadratna linija, C kubna linija, A eliptični odsječak i M pomicanje bez crte. Ako slovo nije navedeno pretpostavlja se ravna linija. Na kraju stringa se sa oznakom Z označava spajanje s početnom točkom. <path d="m 50, ,200 50,150"/> Kod6. Implementacija puta <image> o Omogućuje uključivanje slika rasterske grafike u SVG sliku. Funkcionira slično kao i <rect> element s dodatnim atributom xlink:href koji pokazuja na lokaciju slike. Slika se prilagodi dimenzijama navedenima u elementu. <text> o Ovaj element dodaje tekst u SVG sliku. Za razliku od ostalih slika tekst u SVG slici se može označavati, kopirati i pretraživati kao da se nalazi u HTML-u. Sam tekst koji se želi prikazati je sadržan unutar <tekst> elementa. S atributom font-family moguće je definirati željeni font na jednak način kao i u CSS-u. Atribut font-size definira veličinu korištenog fonta. U Kodu7. je prikazan primjer tekst elementa. <text x="0" y="100" font-size="80" fill="red">example text</text> Kod7. Implementacija elipse

7 o SVG ima definirano još mnogo atributa kojima se utječe na prikaz teksta. Zanimljiva je mogućnost prikaza teksta na način da prati neki definirani put. To se može postići stavljanjem elementa <textpath> unutar <text> elementa, s atributom koji pokazuje na id neke već definirane krivulje. Složeni elementi <g> o Služi za grupiranje više osnovnih elemenata u jednu cjelinu. Takvo <use> grupiranje omogućava stvaranje kompleksnijih objekata, koji se mogu koristiti u ostatku slike. Elemente koje treba skupiti u grupu se jednostavno stave kao djeca ovom elementu. Nad cijelom grupom se kasnije mogu izvršavati transformacije, te se grupa može referencirati tako da joj se zada atribut id. o Ovom elementu moguće je definirati atribute koje nasljeđuju njegova djeca tako da postave vrijednost zadanog atributa na inherit. Na taj način moguće je na jednom mjestu promijeniti više atributa elemenata djece. o Koristi se da se napravi kopija nekog elementa ili grupe elemenata. Omogućuje ponovno iskorištavanje elemenata. Kao atribut xlink:href prima id elementa kojeg treba kopirati. Transformacije Transformacije se mogu izvršiti na svim dosada navedenim elementima na način da im se doda atribut transform koji sadrži string s transformacijama koje treba izvršiti nad elementom. Transformacije se u stringu navode kao pozivi funkcija, a međusobno ih se razdvaja zarezom. Postoje slijedeće transformacije: translate(dx, dy) o Pomiče zadani element za dx piksela po x osi, i dy piksela po y osi. rotate(r, cx, cy) o Rotira element za r stupnjeva oko točke s koordinatama (cx, cy) scale(f) o Koristi se za skaliranje objekta za faktor f. Radi na način da sve koordinate pomnoži tim faktorom, što može kao posljedicu imati

8 pomicanje objekta prema ili od ishodišta. Također ako je f negativan objekt će biti zrcaljen. scale(fx, fy) o Jadnako kao i scale transformacija, samo s drugačijim faktorima za povećanje po x i y osima. Osim ovdje navedenih elemenata i transformacija, SVG format nudi i naprednije opcije kao što su: gradijenti, uzorci, maske, razni filteri, generiranje fraktala, itd. Primjeri svg datoteka Najzanimljivije svojstvo vektorske grafike, i prednost nad rasterskom grafikom, je to da se slike mogu skalirati bez gubitka kvalitete. Da bi se to svojstvo demonstriralo preuzet je primjer SVG slike sa stranice [2] te je uz pomoć alata [3] pretvorena u PNG format (format rasterske grafike). Na Slici1 prikazana je originalna slika u mjerilu 1:2. Na Slici2 je prikazan usporedba slika u SVG i PNG pormatu kada su uvećane i fokusirane na jedno oko lika na slici. Može se uočiti da kvaliteta lijeve slike se nije promjenila s njenim uvećavanjem, dok su na desnoj slici vidljivi pikseli koji su posljedica povećanja slike i konačne rezlučivosti. Danas postoji trend povećanja vrsta uređaja koja se povezuju na Internet, a i s time postoji sve više ekrana različitih dimenzija i razlučivosti, od mobilnih telefona do TV prijamnika. Zbog toga je danas svojstvo promjene dimenzija SVG slika bez gubitka kvalitete vrlo zanimljivo. Slika1. Originalna slika

9 Slika2. Uvećane slike u SVG i PNG formatu U Kodu8. prikazan je kod jedne jednostavne SVG slike u kojem je implementirana većina osnovnih slikovnih elemenata. Rezultat tog koda prikazan je na Slici 3. Na slici se može primijetiti kako zelena linija prolazi ispod kruga, te kako je tekst napisan iznad plavog poligona, tu je prikazan redoslijed iscrtavanja SVG slike u kojem elementi koji su kasnije definirani u kodu prekrivaju prijašnje elemente. <?xml version="1.0" encoding="utf-8" standalone="no"?> <svg xmlns=" width="500" height="500"> <line x1="50" y1="50" x2="170" y2="270" stroke-width="2.5" stroke="green"/> <circle cx="80" cy="160" r="40" fill="red" stroke="black" strokewidth="20"/> <rect x="160" y="25" height="100" width="200" fill="yellow" stroke="black" stroke-width="3"/> <path d="m L Z" fill="blue" stroke="black" stroke-width="3"/> </svg> <text x="100" y="320" font-size="70" fill="red">some text</text> Kod8. SVG slika s implementiranim osnovnim elementima

10 Metapodatci Slika 3. Prikaz SVG slike iz Koda8. U standardu SVG definiran je element <metadata> koji je namijenjen da sadrži metapodatke o SVG slici. Preporuča se da postoji samo jedan takav element u SVG dokumentu, kao dijete vanjskog SVG elementa. Sadržaj <metadata> elementa su elementi nekog drugog jezika temeljenog na XML-u koji je namijenjen opisu metapodataka, kod SVG slika se u tu svrhu najčešće koristi RDF. RDF (Resource Description Framework) je obitelj W3C specifikacija koja je namijenjena kao model za spremanje metapodataka čitljiv računalu [4]. Vezija 1.0 objavljena je godine, a trenutna verzija 1.1 je iz godine. RDF model je implementiran u više jezika, verzija koja koristi XML zove se RDF/XML. Osnovna struktura u RDF formatu je uređena trojka (subjekt, predikat, objekt), a označava neki odnos, prikazan u predikatu, postoji između subjekta i objekta. Takva struktura je pogodna za opis metapodataka, na primjer predikat je autor, subjekt ime autora, a objekt SVG slika. Primjer SVG datoteke sa metapodacima prikazan je u Kodu9.

11 <?xml version="1.0" standalone="yes"?> <svg width="400" height="300" version="1.1" xmlns = ' <metadata> <rdf:rdf xmlns:rdf = " xmlns:dc = " > <rdf:description about=" dc:title="myfoo Financial Report" dc:description="$three $bar $thousands $dollars $from 1998 $through 2000" dc:publisher="example Organization" dc:date=" " dc:format="image/svg+xml" dc:language="en" > <dc:creator> <rdf:bag> <rdf:li>irving Bird</rdf:li> <rdf:li>mary Lambert</rdf:li> </rdf:bag> </dc:creator> </rdf:description> </rdf:rdf> </metadata> </svg> Kod9. Primjer SVG slike sa metapodatcima u RDF formatu Steganografija koristeći SVG datoteke Steganografija je način sakrivanja tajnih informacija u nekim drugim slikama, tekstovima, videima ili datotekama. Za razliku od kriptografije koja tajnu komunikaciju kodira na način koji ne nečitljiv trećoj strani, steganografija prikriva da komunikacija uopće postoji. Korištena je u mnogim slučajevima kroz povijest, a i u današnje vrijeme kao dodatak kriptografiji, ili u nekim zemljama gdje je kriptografija zabranjena. U ovom radu opisuju se tehnike sakrivanja tajnih informacija unutar SVG datoteka. Steganografija u SVG datotekama može koristiti vrlo jednostavne metode, koje je lako koristiti i kasnije pročitati, do vrlo kompleksnih metoda opisanih u znanstvenim radovima. Neke jednostavne metode koje bi se mogle koristiti je postavljanje teksta jedne boje na istobojnu površinu. Kod gledanja slike tekst bio neprimjetan, no primatelj poruke koji zna da tekst postoji mogao bi ga jednostavno označiti mišem i pročitati. Primjer takve jednostavne steganografije prikazan je na Slici4.

12 Slika4. Kvadrat sa skrivenim tekstom prije i poslije označavanja mišem Malo bolje skriven tekst bi se postigao tako da se tekst stavi iza kvadrata (definira se prije u SVG kodu), tada tekst ne bi bio vidljiv kada bi se kvadrat označilo mišem, no mogao bi se pronaći pretraživanjem u pregledniku, ili označavanjem kvadrata i kopiranjem teksta pa njegovim lijepljenjem u neku tekstualnu datoteku (ctrl + c, ctrl + v). Naprednije tehnike sakrivanja datoteka u SVG datoteke mogu se podijeliti u dvije kategorije: odstupanje (engl. Jitter) i ugrađivanje (engl. embedding) [5]. Takve metode pokušavaju sakriti postojanje informacije i iz prikaza slike, i iz njezinog koda. Sakrivanje informacije odstupanjem temelji se na malim, oku nevidljivim promjenama u slici, koje se koriste za prijenos informacija. Primjer takve tehnike je da se informacija koja se želi prenijeti najprije kodira u binarne podatke, a zatim u niz decimalnih brojeva. Ti decimalni brojevi dodaju se kao znamenke iza decimalne točke svim koordinatama u dokumentu. Takva promjena u dokumentu je oku nevidljiva na konačnom prikazu slike. Da bi se dodatno informacija sakrila i u njenom XML obliku, na svim točkama koje su promijenjene izvrši se neka mala reverzibilna transformacija (na primjer rotacija za vrlo mali kut), to promjeni decimalni zapis broja te se više informacija ne može jednostavno pročitati. Transformacija koja je izvršena koristi se kao svojevrsni ključ, primatelj ako ju zna može na svim točkama izvršiti reverznu transformaciju te zatim pročitati sakrivenu kodiranu informaciju [6]. Steganografija ugrađivanjem radi na način da se u sliku dodaju elementi koji ne utječu na njezin prikaz, a i nisu vidljivi iz koda slike. Primjer takve tehnike je dodavanje točaka na ravne linije elemenata slike. Dodatne točne ne utječu na prikaz slike, a mogu sadržavati informacije u sebi. Ako se ravna linija podijele na segmente duljina tih segmenta mogla bi predstavljati određenu kombinaciju bitova (na primjer ako je dozvoljeno 256 različitih duljina segmenata, svaka dodana točka označavala bi jedan

13 bajt informacije) [5]. Problem kod ove tehnike je da bi treća strana kod detaljnije analize koda mogla primijetiti veliku količinu točaka na poligonima koji izgledaju jednostavnije u prikazu. SVG datoteke i virusi Same SVG datoteke i njihovo pregledavanje ne može naštetiti računalu budući da se radi o običnoj XML datoteci, no SVG datoteke mogu korisnike navesti na drugi sadržaj koji može sadržavati viruse. Glavni mehanizam kojim se to postiže su <script> elementi. SVG podržava <script> elemente isto kao i HTML dokumenti, a pošto se većina SVG slika otvara pomoću web preglednika moguće je izvršiti neki JavaScript kod na računalu godine hakirani Facebook profili koristili su se za širenje jedne SVG slike po Facebooku. Korisnici su otvarali sliku jer su mislili da je slikovni format bezopasan, a i zato jer je slika dolazila od njihovih Facebook prijatelja. SVG slika se najčešće otvara s web preglednikom, a u ovoj slici bila je sadržana skripta koja otvara dodatan tab u pregledniku s stranicom koja je vrlo slična YouTubeu, ali je zapravo dizajnirana za prijevaru korisnika. Stranica je korisnika tražila da instalira određeni program pod isprikom da je potreban codec da bi se prikazao video sadržaj. Naravno nije se radilo o codecu nego o malicioznom programu klase ransomware, takav program enkriptira sve korisnikove podatke na računalu, te traži novac kako za šifru kojim bi se oni otključali [7] [8].

14 Zaključak SVG je format datoteke koji se koristi za pohranjivanje slika vektorske grafike, a temelji se na jeziku XML, i specificiran je W3C standardom. Vektorska grafika razlikuje se od standardne rasterske grafike (formati kao što su JPG, PNG, BMP,..) u tome da sliku ne pohranjuje kao niz piksela, već kao geometrijske oblike i krivulje. Prednost koja se dobiva takvim opisom slike je da se slika može povećavati beskonačno bez da izgubi oštrinu, što naravno nije slučaj kod rasterske grafike koja ima ograničenu razlučivost. To svojstvo je vrlo zanimljivo u današnje vrijeme kada se Internetu pristupa raznim uređajima koji imaju različite dimenzije ekrana, od mobilnih telefona do TV prijamnika, pa web stranice moraju biti responzivne. SVG slike opisane su kao tekstualna datoteka, i kao takve mogu se dobro komprimirati standardnim kompresijskim metodama, što im omogućuje manju veličinu od jednakih slika u rasterskim formatu. Zbog toga su SVG slike popularne na Internetu jer se brže učitavaju, i danas svi poznatiji web preglednici podržavaju prikaz SVG slika. Dodatno zanimljivo svojstvo SVG datoteka je da se njima može upravljati pomoću koda u JavaScriptu, jednako kao i HTML dokumenti. JavaScript omogućuje animiranje SVG slika, i interaktivnost s korisnikom, kao što je promjena slike kada se preko nje prolazi mišem. No takva kompatibilnost s JavaScriptom također donosi i probleme, jer daje hakerima mogućnosti širenja zlonamjernih web stranica. Iz tog razloga, a i zbog sve veće popularnosti, SVG format je zanimljiv za računalnu forenziku. U ovom radu opisan je sam format SVG datoteke i elementi od kojih se sastoji SVG slika, dani su primjeri slika na kojima je prikazano svojstvo povećavanja bez gubitka kvalitete i kako se XML kod pretvara u sliku, zatim je opisan način kako se pohranjuju metapodaci o SVG slici, što je uvijek zanimljivo za forenziku. U zadnja dva poglavlja opisane su široke mogućnosti primjene SVG slika za steganografiju, i jedan primjer gdje su SVG slike korištene za širenje zlonamjernih programa.

15 Izvori [1] An SVG Primer for Today's Browsers, W3C, Rujan 2010, [2] Open clip art, [3] SVG to PNG converter, [4] RDF 1.1 XML Ssyntax, W3C preporuka, 25. veljače 2014, [5] STEGANOGRAPHIC ALGORITHM FOR INFORMATION HIDING USING SCALABLE VECTOR GRAPHICS IMAGES, B. Madoš, J. Hurtuk, M. Čopjak, P. Hamaš, M. Ennert, Faculty of Electrical Engineering and Informatics, Technical University of Košice, Slovačka, 4. Studeni 2014, [6] Information Hiding in SVG by Affine Transformation with Small Perturbations, Chyuan-Huei Thomas Yang, Tsung-Ming Lin, Chin-Chih Chang, Husan- Chuang University, Hsinchu City, Taivan, 2008, [7] Soft2Secure, Beware of.svg file virus on Facebook, 22. Studeni 2016, [8] Security Week, Cybercriminals Use SVG Files to Distribute Ransomware, 22. Svibanj 2015,