Masarykova univerzita Fakulta}w¡¢£¤¥¦§¨ informatiky !"#$%&'()+,-./012345<yA| Portlet pro 3D vizualizaci časových řad Diplomová práce Bc. Petr Jelínek Brno, Jaro 2014 Prohlášení Prohlašuji, že tato diplomová práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a li- teraturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj. Bc. Petr Jelínek Vedoucí práce: RNDr. Radek Ošlejšek, Ph.D. ii Poděkování Na tomto místě bych rád poděkoval vedoucímu práce RNDr. Radku Ošlejšekovi, Ph.D. a celému vizualizačnímu týmu projektu Kyberne- tický polygon za cenné rady a příjemný pracovní kolektiv. Děkuji i li- dem v mém nejbližším okolí za pomoc při vypracování textové části a trpělivost při ukázkách grafického výstupu této práce. iii Shrnutí Diplomová práce popisuje možnosti zobrazení prostorové grafiky přímo v internetovém prohlížeči pomocí WebGL s využitím knihovny Three.js. Dále popisuje implementaci portletu pro 3D vizualizaci pro Liferay portál v rámci projektu Kybernetický polygon. Výsledná apli- kace se aktivně využívá a bude na ní navazováno v dalších diplomových pracích. iv Klíčová slova 3D grafika, interaktivní grafika, WebGL, Three.js, JavaScript, port- let, Liferay portál v Obsah 1 Úvod3 2 Projekt Kybernetický polygon4 2.1 Architektura Kybernetického polygonu.......... 4 2.2 Bezpečnostní scénáře.................... 6 2.3 Simulace infrastruktury................... 7 2.3.1 Požadavky na infrastrukturu............ 7 2.3.2 Navržené řešení................... 7 2.4 Měření a analýza provozu ................. 8 2.4.1 Části měřící infrastruktury............. 8 2.5 Vizualizace ......................... 9 3 WebGL 10 3.1 Podpora WebGL v prohlížečích .............. 11 3.2 Ukázka přímé práce s WebGL............... 12 3.2.1 Canvas element a vykreslovací kontext . 12 3.2.2 Nastavení hranice vykreslování........... 13 3.2.3 Vykreslovací data.................. 14 3.2.4 Transformační matice................ 15 3.2.5 Implementace shaderu ............... 16 3.2.6 Vykreslení...................... 18 3.3 JavaScriptové knihovny................... 19 4 Knihovna Three.js 20 4.1 Jednoduchá stránka..................... 21 4.1.1 Černý čtverec.................... 21 4.1.2 Rotující krychle se stínem a texturou . 23 4.2 Kamery ........................... 25 4.2.1 Perspektivní kamera ................ 25 4.2.2 Ortografická kamera ................ 27 4.3 Geometrie.......................... 28 4.3.1 Předdefinované geometrie ............. 28 4.3.2 Tvorba vlastní geometrie.............. 30 4.4 Materiály .......................... 32 4.5 Světla ............................ 34 1 4.6 Shrnutí kapitoly....................... 35 5 Implementace vizualizace 36 5.1 Vizuální návrh ....................... 36 5.2 Návrh zdrojového kódu................... 38 5.2.1 Struktura souborů zdrojových kódů . 41 5.2.2 Zprovoznění aplikace................ 42 5.3 Vybrané implementační detaily .............. 42 5.3.1 Obarvování povrchu vizualizace.......... 43 5.3.2 Přizpůsobení vstupních dat ............ 44 5.4 JavaScriptové postupy použité v aplikaci......... 45 5.4.1 Definice tříd..................... 45 5.4.2 Definice vlastností ................. 46 5.4.3 Callback funkce................... 47 5.4.4 Jmenné konvence.................. 47 5.5 Vytvoření portletu pro Liferay portál........... 47 6 Závěr 49 Seznam obrázků 50 Seznam zdrojových kódů 51 Seznam použité literatury 52 A Ukázky WebGL aplikácí 53 A.1 Zygote body......................... 53 A.2 Wannaplan ......................... 54 A.3 Chrome World Wide Maze................. 54 B Virtualizační portlety 55 C Dokumentace 57 2 1 Úvod Vlivem pokroku informačních technologií stále roste množství dat, která mohou být bez dalšího zpracování nepřehledná. Vizualizace těchto dat umožňuje rychle a efektivně získávat požadované informace. Pro- jekt Kybernetický polygon produkuje data z různých měření nad si- mulovanou počítačovou sítí, kde se provádí bezpečnostní experimenty. Právě díky vizualizaci získaných hodnot jsou výsledky měření přehledné a snadno tak dále zpracovatelné. Cílem této práce je vytvořit prostorovou vizualizaci, která dokáže zobrazovat časové řady získané v rámci experimentů projektu Kyber- netický polygon. Vizualizace musí umožňovat přímou 3D interakci (ro- tace, přibližování apod.) a další funkcionalitu dle potřeb projektu. Dále dle zadaných požadavků je cílem práce vytvořit vizualizaci v podobě portletu pro Liferay portál. Pro zobrazování musí být použita technologie WebGL, která umožňuje vykreslovat hardwarově akcelero- vanou prostorovou grafiku v prostředí webového prohlížeče bez nutnosti instalovat rozšíření. Portlet s vizualizací se musí také synchronizovat s ostatními portlety na stejné stránce tak, aby všechny vizualizace zob- razovaly stejná data. 3 2 Projekt Kybernetický polygon Jedním z důležitých cílů a závazků České republiky je zajistit ky- bernetickou bezpečnost. To má za úkol Národní bezpečnostní úřad, rezort Ministerstva vnitra a bezpečnostní týmy (vládní CERT1 a ná- rodní CSIRT2). Při plnění tohoto úkolu vznikají potřeby, na které svým řešením reaguje projekt Kybernetický polygon (KYPO). Cílem navrhovaného Kybernetického polygonu je vznik prostředí pro vývoj a výzkum metod, které budou sloužit jako ochrana proti ky- bernetickým útokům. Metodou dosažení tohoto cíle je provádět kom- plexní kybernetické útoky na reálné síťové infrastruktuře ve virtualizo- vaném prostředí cloudu3. Jednotlivé útoky pak bude možné analyzovat a vyhodnocovat, a to jak v samotném průběhu, tak i po jejich skon- čení. Vytvořené prostředí může dále sloužit pro vývoj bezpečnostních nástrojů a pro školení ze strany bezpečnostních týmů. V současné době dostupná řešení mají dle provedených pozorování a porovnání jistá omezení snižující jejich použitelnost, která brání uspo- kojivě řešit problematiku předloženou v požadavcích kladených na pro- jekt KYPO. V následujících kapitolách je probrána architektura Kybernetického polygonu, podrobněji je popsána v technické zprávě viz [1]. 2.1 Architektura Kybernetického polygonu Ve své podstatě je KYPO fyzická síť simulovaná v cloudovém pro- středí, kde se simuluje síťový provoz včetně kybernetických útoků. Tento provoz a další projevy sítě a uzlů se poté měří a následně analyzují a vi- zualizují. 1. Bezpečnostní tým, do jehož kompetence spadají sítě státní správy, samosprávy a kritické infrastruktury ČR. 2. Bezpečnostní tým pro koordinaci řešení bezpečnostních incidentů v počítačo- vých sítích provozovaných v České republice. Tento tým aktuálně provozuje správce české národní domény, sdružení CZ.NIC. 3. Obecně se jedná o poskytování služeb či programů, které běží na vzdálených serverech a uživatelé se k nim mohou připojovat např. pomocí webového prohlížeče. 4 2. Projekt Kybernetický polygon Architektura Kybernetického polygonu se skládá ze čtyř modulů, přičemž každý představuje jednotlivou funkční část polygonu. Graficky tuto architekturu znázorňuje obrázek 2.1. Moduly řeší své přidělené okruhy problémů a komunikují spolu zasíláním zpráv. • Správa scénářů je hlavní a řídicí modul polygonu. Jeho úkolem je vytvářet a spravovat celkovou konfiguraci a příslušné části pak předávat dalším modulům k implementaci. • Správa cloudu vytváří a zabezpečuje správu cloudového pro- středí. Podle konfigurace síťové topologie zapíná a vypíná virtu- ální stroje a vytváří mezi nimi síťovou infrastrukturu. • Správa měření je modul pro řízení měřící infrastruktury, který má za úkol nastavovat a spouštět měření. • Správa vizualizace zajišťuje grafickou prezentaci síťové topo- logie a vizualizaci dat, které předává správa měření. Scénář 1 LAN 1 Scénář .... Správa LMN 1 .... scenáře Konfigurace Routing LMN 2 scénáře Node Zpracování LMN n dat Vstupní portál Uzel správy scénáře LAN 2 ... LAN n Vizualizace Scénář n Uzel správy scénáře Databáze Simulace & Měření Obrázek 2.1: Architektura Kybernetického polygonu [1] 5 2. Projekt Kybernetický polygon Následující podkapitoly se věnují podrobnějšímu popisu jednotli- vých modulů. Správou scénářů se zabývá podkapitola 2.2, správu cloudu popisuje podkapitola 2.3, správou měření se zabývá podkapitola 2.4 a správu vizualizace popisuje podkapitola 2.5. 2.2 Bezpečnostní scénáře Hlavní podstata bezpečnostního scénáře je popsat konfiguraci sítě a uzlů (hardwarová a softwarová výbava, propustnost sítě atd.) a popsat průběh bezpečnostního experimentu. Scénář se proto skládá z následu- jících částí: Popisná část obsahuje vysvětlení celého scénáře. Varianta scénáře popisuje odchylky scénáře se zachováním popisu a hlavního cíle. Variantou může být např. změna umístění měřících prvků. Technická část obsahuje informace pro realizaci a skládá se z těchto dalších částí: • Konfigurace uzlů popisuje vlastnosti a konfigurace všech zaří- zení, které jsou zapojeny do scénáře. • Síťová topologie definuje rozložení uzlů v počítačové síti a její konfiguraci. • Logická topologie říká, který uzel má jakou roli (oběť, útočník atd.) a v jakém časovém okamžiku se která role aktivuje. Uzel může zastávat v jeden okamžik pouze jednu roli. Dále se po- mocí logické topologie rozdělují uzly do skupin představujících organizace. • Konfigurace měřící infrastruktury definuje vlastní měřící uzly, jejich typ a umístění. 6 2. Projekt Kybernetický polygon 2.3 Simulace infrastruktury Pro simulaci bezpečnostního scénáře je nutné prostředí, ve kterém lze s daným scénářem dále pracovat a produkovat tak monitorovací data. Několik takových prostředí již existuje, ale každé má jistá ome- zení, např. projekt Emulab má možnost využívat pouze