Zadanie

Ak máte akékoľvek otázky ohľadom tejto úlohy napíšte Máriovi Lipovskému na

Táto úloha bude trochu odlišná. Jej zadanie nájdete na tejto stránke: ksp.sk/~prask/specialne/1/1/3/. Že nič nevidíte? Asi ste nerozsvietili svetlo.

Vaším cieľom je zistiť jedno tajné heslo1. Naviac nám podrobne popíšte, ako ste postupovali pri objavovaní a aké rôzne spôsoby ste skúsili. Tak spravte, aj keby sa vám heslo napokon nepodarilo zistiť. Nikdy neviete ako blízko ste boli.

Na záver vám ešte trochu poradíme. V tomto zadaní (a ani inom) nie je skrytá žiadna potrebná informácia. Všetko potrebné je na spomínanom odkaze. Nebojte sa pri riešení použiť Google.


  1. A “Nič” nie je správna odpoveď.

Čo je to webová stránka1?

Všetci vieme, ako taká stránka vyzerá. Je na nej text, obrázky, okienka alebo vôbec nič. Ale čo to je?

Dáta. Všetko, čo sa nachádza v počítači alebo na internete sú dáta – súbory. Obrázky, videá, hudba, programy sú všetky uložené v počítači ako postupnosti núl a jednotiek a tieto postupnosti nazývame súbory. Rovnako aj webová stránka je len súbor – textový dokument, podľa ktorého vie webový prehliadač/browser čo, kde a ako má zobraziť. Obsah tohto súboru voláme zdrojový kód stránky, lebo v jeho texte je zakódované všetko čo môžeme vidieť na stránke.

Zdrojový kód býva najčastejšie napísaný v jazyku HTML (Hypertext markup language), ktorý používa špeciálne značky na formátovanie textu, tabuliek, zoznamov atď. Napríklad všetko, čo sa napíše medzi značky/tagy <b> a </b> sa v prehliadači zobrazí hrubým/bold fontom. Tag <img src="obrazok.png" /> vloží na stránku obrázok, ktorý je v jednom priečinku so zdrojovým súborom a volá sa obrazok.png.

Takýto textový dokument viete vytvoriť aj vy, napríklad písaním do notepadu. Stačí, keď ho uložíte s príponou .html a potom ho viete otvoriť v prehliadači.

Keď do prehliadača naťukáme webovú adresu alebo keď klikneme na hypertextový odkaz, počítač pošle prosbu serveru2. Server potom vášmu počítaču pošle súbory, o ktoré ste požiadali – zdrojový kód stránky a ďalšie potrebné súbory ako napr. obrázky, súbory popisujúce grafický výzor stránky, miniprogramy/skripty, čo sa na stránke spúšťajú…

Tieto súbory sa dočasne uložia v pracovnej pamäti vášho počítača a stránka sa zobrazí v prehliadači.

Nájdenie neviditeľného

Prehliadač na stránke ksp.sk/~prask/specialne/1/1/3/ nič nezobrazuje. Nedá sa tu na nič klikať ani nič označovať. Vieme však, že webová stránka je akýsi textový dokument so zdrojovým kódom, a preto sa pozrieme do tohto dokumentu.

V menu alebo v popup menu (pri kliknutí pravým tlačítkom myši na stránke) vášho prehliadača nájdite možnosť zobraziť zdrojový kód/view source code/view page source. V Google Chrome a Mozille Firefox môžete použiť skratku Ctrl+U. Ak ste bezradní, vyhľadajte si na internete spôsob pre zobrazenie zdrojového kódu – určite to vie aj váš prehliadač.

Čítanie neviditeľného

Ak sme úspešne našli zdrojový kód stránky, mali by sme sa poriadne pozrieť, čo sa v ňom nachádza. Niečo tam predsa musí byť. A veruže je. A oveľa viac akoby ste čakali. Na úplnom vrchu vidíme tag <title>, vnútri ktorého je napísané Nic. Asi nie je ťažké si tipnúť, že to bude zodpovedať textu, ktorý vidíme ako názov stránky v priehliadači.

Nasleduje tag <style>. Na ten sa pozrieme neskôr, zatiaľ len môžeme usúdiť, že mení štýl stránky, nech to už znamená čokoľvek.

Ďalší zo zaujímavých tagov je <table>, ktorý bude zodpovedať nejakej tabuľke, ktorú síce nevidíme, ale je niekde na čiernej stránke skrytá. No a potom nasleduje veľké množstvo už spomínaných tagov, ktoré zobrazujú rôzne obrázky. Pri každom obrázku je naviac napísaná presná adresa toho, kde sa obrázok nachádza, takže si môžeme tieto obrázky pozerať tak, že ich adresu nakopírujeme do prehliadača, kde sa nám zobrazia samostatne. A s prekvapením zisťujeme, že obrázky sú vlastne nakreslené písmená.

Kopírovanie adries je však pomalé, mohli ste si preto všimnúť, že adresa každého obrázka písmenka sa začína predponou http://people.ksp.sk/~prask/specialne/1/1/3/obr/. Ak si otvoríte tento odkaz v prehliadači, zobrazí sa vám obsah celého priečinku s obrázkami. Ďalej stačí klikať, čo je oveľa jednoduchšie.

Ani tento postup však nie je dostatočne rýchly, predsa len je tých obrázkov \(95\). Po zobrazení prvého písmenka ale viete, že text je napísaný čiernou farbou. Otázka je, prečo ho teda nevidíme na stránke. Lebo na našej stránke je čierne všetko, aj pozadie. A čierny obrázok na čiernom pozadí nevidieť.

Chceli by sme preto zmeniť pozadie stránky na inú farbu, aby sme videli, čo ukrýva. A v tomto prípade sa dostávame späť k tagu <style>. Keď si pozrieme, čo je vo vnútri, väčšina vecí nedáva zmysel, ale nachádza sa tam jedna veľmi podozrivá časť background-color: #000000, čo je po preložení do slovenčiny farba pozadia. A nie je ťažké zistiť, že #000000 je špeciálny kód pre čiernu farbu.

Ako teda zmeniť túto farbu, napríklad na bielu? Jedna možnosť je skopírovať si zdrojový kód do počítača3 a upraviť vlastnosť background-color4. Buď zistíte, ako sa kóduje biela farba (je to #FFFFFF) a nahradíte ňou tú čiernu alebo stačí, ak zmažete celé background-color:#000000;, lebo automatická farba pozadia je biela.

V Google Chrom-e a aj v iných prehliadačoch je navyše možnosť použiť nástroje pre vývojárov/developer tools. Buď sa k nim preklikáme alebo použijeme skratku Ctrl+Shift+I a otvorí sa nám okienko, v ktorom môžeme upravovať zdrojový kód stránky priamo v prehliadači. Tam môžeme spraviť podobnú úpravu s rovnakým výsledkom.

Objaví sa text: VYBORNE! CEZ BEZPECNOSTNU PRASKLINU V STRANKE SEM PRENIKLO ‘SVETLO’ MOZES UZ ZHASNUT. DOBRU NOC.

Odpoveďou je teda slovo SVETLO.


  1. Jeden web/website (napr. prask.ksp.sk, ufo.fks.sk) obsahuje viacero webstránok/webpage (napr. prask.ksp.sk/ulohy/, prask.ksp.sk/vysledky/).

  2. Server je program, ktorý beží na ľubovoľnom počítači a odpovedá na rôzne prosby (napr. na HTTP requesty).

  3. Napríklad si vytvoríte nový súbor s príponou .html v notepade.

  4. Štýl býva väčšinou oddelený (v samostatnom súbore, alebo aspoň tagmi <style>) od obsahu stránky – textu, obrázkov… Na jeho popis sa používa jazyk CSS.

Diskusia

Tu môžte voľne diskutovať o riešení, deliť sa o svoje kusy kódu a podobne.

Pre pridávanie komentárov sa musíš prihlásiť.