====HTML, CSS I JavaScript====


===Općenito===

HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) I JavaScript su  tri glavne komponente od kojih se sastoje web stranice. HTML se koristi za strukturu i sadržaj stranice, CSS za uređivanje i pozicioniranje elemenata unutar stranice, a JavaScript kao skriptni programski jezik koji se izvršava na korisničkoj strani.
Pri unošenju nekog URL-a u preglednik ili klikom na poveznicu, naše računalo šalje zahtjev za preuzimanje stranice i svih dijelova od kojih je ona sastavljena. Nakon toga poslužitelj šalje kao odgovor HTML dokument, popratni CSS dokument i JavaScript kod. Kada naše računalo preuzme sve ove komponente, naš web preglednik (FireFox, Google Chrome, Safari, …) s pomoću ovih sadržaja sastavlja prikaz web stranice koju nam prikazuje. Sav preuzeti JavaScript kod se izvršava lokalno na našem računalu. 


__PRIMJER__ - **Zadatak s Hacknite platforme - Raspršeni podatci**\\

<file>
Matija nikad nije volio izrađivati web stranice, a nije baš ni volio organizirati podatke na tim stranicama: stavio bi podatke onako kako bi se sjetio.

Flag je u formatu CTF2022[brojevi]

http://chal.platforma.hacknite.hr:7067


</file>

Na primjer, odlaskom na neku web stranicu, u ovom primjeru je stranica Hacknite zadatka „Raspršeni podatci“ korištenjem Google Chromea i otvaranjem ugrađenih razvojnih alata (eng. developer tools), na primjer pritiskom gumba F12, otvara nam se detaljniji prikaz i konzola za pregledom i upravljanjem web stranice i njenih dijelova. Odabirom kartice „Sources“ možemo vidjeti sve datoteke od kojih se sastoji web stranica, kao što je prikazano na slici ispod.

{{ :htmlcssjsimage1.png?400 |Datoteke od kojih se sastoji web stranica }}


Na slici vidimo tri datoteke, datoteku „(index)“, u kojoj se nalazi HTML kod stranice, datoteku my_style.css u kojem se nalazi kod CSS stila koji web stranica koristi i datoteku my_script.js unutar koje se nalazi JavaScript kod web stranice. 

Pošto se sve ove datoteke nalaze na našem računalo lokalno, mi možemo mijenjati njihov sadržaj kroz razvojne alate, i te promjene sadržaja će biti prikazane na stranici.

Detaljnim pregledom ovih triju datoteka možemo pronaći tri dijela flaga koji se nalaze kao komentari unutar datoteka, te ih zato možemo vidjeti samo direktnim pregledom datoteka, a ne na web stranice.

{{ :htmlcssjsimage2.png?400 |(index)}}
Prvi dio flaga  unutar (index) dokumenta

{{ :htmlcssjsimage3.png?400 |my_style.css}}
Drugi dio flaga unutar my_style.css dokumenta i hint

{{ :htmlcssjsimage4.png?400 |my_script.js}}
Treći dio flaga unutar my_script.js dokumenta

Vidimo da nam još jedan dio flaga fali i da se ne nalazi unutar ovih triju datoteka, ali u tekstu zadatka piše „kako zabraniti google - u da indeksira moju stranicu?
Kako bi web tražilica znala koji se sadržaj i informacije nalaze na kojim web stranicama, da ih potom može adekvatno spremiti u svoju veliku bazu web stranica, tražilice koriste programe (tzv. web crawlere), koji sistemski pretražuje sve stranice weba na koje može naići i pregledava sadržaj tih web stranica kako bi zabilježio u svoju bazu podataka pronađenu web stranicu i ključan sadržaj koji se nalazi na toj stranici.
Kako bi se reguliralo koje web stranice tražilice smiju indeksirati, moguće je stvoriti datoteku „robots.txt” u kojoj je moguće navesti dozvole i zabrane indeksiranja . Legitimni web crawleri poštuju te dozvole i neće indeksirati stranice koje su u dokumentu „robots.txt” označene kao zabranjene za indeksiranje.
U zadatku „Raspršeni podatci“, gdje je hint prikazan na slici 3,  „kako zabraniti google – u da indeksira moju stranicu?“, možemo zaključiti da nas hint navodi na pregledavanje robots.txt datoteke. Kako bi dohvatili robots.txt datoteku, moramo na kraj URL-a dodati putanju "/robots.txt".

Na link web zadatka: 
<code>
http://chal.platforma.hacknite.hr:7067
</code>  dodajemo putanju 
<code>/robots.txt </code> 
te je puni URL, zajedno s putanjom: 
<code>http://chal.platforma.hacknite.hr:7067/robots.txt </code>

{{ :htmlcssjsimage5.png?400 |robots.txt dokument}}


Na slici vidimo sadržaj datoteke robots.txt, gdje se nalazi zadnji dio flaga, s kojim imamo cijelo rješenje zadatka. Također možemo vidjeti linije: 


<code>
User-agent: *
Disallow: /index.html
</code>

Kojima se svim web crawlerima zabranjuje indeksiranje  „/indeks.html“ putanje web stranice, odnosno web crawlerima se zabranjuje pregled i pohrana sadržaja početne stranice u baze podataka web tražilica. Važno je razumjeti da iako legitimni crawleri poštuju robots.txt, on nije sigurnosna mjera. Moguće je napraviti crawler koji ignorira robots.txt.


=== Client side i Server side poslovna logika === 

Kada se kreira web stranica, važno je obratiti puno pažnje na to kako će biti implementirana poslovna logika, kao na primjer provjera lozinke ili registracija korisnika. Naime, različite funkcionalnosti naše stranice mogu biti implementirane ili s pomoću JavaScripta, koji se uz HTML i CSS šalje klijentima, te ga oni koriste na **klijentskoj strani**, ili se može implementirati na **poslužiteljskoj strani**, te se na samoj web stranici ostavi neki način pozivanja funkcije sa serverske strane. Glavna razlika je što samu implementaciju određene funkcionalnosti, koja je na poslužiteljskoj strani, korisnici ne vide, ne znaju kako je izvedena i ne mogu ju mijenjati (osim ako je drugačije zamišljeno), dok sav kod koji poslužitelj šalje korisnicima za korištenje na korisničkoj strani, korisnici mogu po želji analizirati i potencijalno mijenjati.

Važne funkcionalnosti poslovne logike, koje moraju biti „zaštićene“ i koje korisnik ne smije mijenjati, moraju biti implementirane na **poslužiteljskoj strani**, te se unutar same web stranice, koja se poslužuje korisnicima i prikazuje na **klijentskoj strani** samo stvori sučelje s pomoću kojega korisnici pozivaju željene funkcionalnosti sa serverske strane.

__PRIMJER__ - **Zadatak s Hacknite platforme - Najsigurnija provjera lozinke**\\

<file>
Ivan je oduvijek htio znati kako najbolje provjeriti je li upisana lozinka točna ili ne. Nakon dugo istraživanja, otkrio je na koji način bi to mogao napraviti. U tu svrhu, smislio je jednu jako dobru lozinku i napravio stranicu kako bi testirao tu svoju ideju.

Flag je u formatu CTF2021[brojevi]

http://chal.platforma.hacknite.hr:10006


</file>

Ovaj zadatak ima sličan princip rješavanja  prethodnom zadatku. Pri otvaranju linka zadatka, otvara nam se sučelje za unos i provjeru točnosti unesene lozinke. Pri analizi posluženog koda stranice na klijentskoj strani, s pomoću **razvojnih alata (F12)**, nailazimo na 
<code> HTML <script> </code> 
element, unutar kojeg je JavaScript kod, s pomoću kojega je implementirana sama funkcionalnost provjere točnosti lozinke. Spomenuti dio koda je prikazan na slici ispod.

{{ :htmlcssjsimage6.png?400 |Neispravna implementacija poslovne logike na klijentskoj strani}}

Na slici se vidi 
<code> HTML <script> </code>
element, unutar kojeg je definirana JavaScript funkcija „checkPassword“, koja se poziva pritiskom na gumb „Pokušaj“ pored polja za unos lozinke. Analizom ove funkcije možemo vidjeti da su kritični informacije i dijelovi poslovne logike koje bi inače trebale biti nedostupne i nalaziti se na serverskoj strani, poslužene na klijentskoj strani svim korisnicima. U kodu funkcije možemo vidjeti i SHA256 sažetak (eng. hash) ispravne lozinke, kao i lokaciju na koju se stranice preusmjerava pri unosi ispravne lozinke.

Pokušajem ručnog unosa lokacije, na koju bi se stranica preusmjerila prilikom unosa točne lozinke, dobivamo rješenje zadatka.

Na URL stranice: 
<code> http://chal.platforma.hacknite.hr:10006/<code> 
dodajemo lokaciju iz koda funkcije 
<code> /flag_712301349fd.html</code> 
te je puni URL koji unosimo u preglednik: 
<code> http://chal.platforma.hacknite.hr:10006/flag_712301349fd.html</code> 

{{ :htmlcssjsimage7.png?400 |Rješenje zadatka}} 

//(komentar za čitatelje)  Za vježbu pokušajte riješiti jednostavan zadatak „izlet“, koji predstavlja još jedan jednostavan zadatak na principu neispravne implementacije kritične poslovno logike na klijentskoj strani. 

HINT: ovaj put kritična funkcionalnost nije implementirana s pomoću JavaScripta, nego s pomoću HTML-a.//

=== Nezaštićeni API ===

Kada je određen dio poslovne logike implementiran na poslužiteljskoj strani, jedan način korištenja tih funkcionalnosti je onda preko njihovog **aplikacijskog programskog sučelja (eng. API, Application Programming Interface)**. 

Korisničko sučelje se nalazi na samoj web stranici koja je poslužena korisniku, čija je namjena pojednostaviti i olakšati korištenje sustava običnim korisnicima.  Na primjer, pri stvaranju novog korisničkog računa, forma za unos korisničkog imena i passworda, kao i gumb „Stvori račun“ su dijelovi korisničkog sučelja. Nakon unosa korisničkog imena i lozinke i pritiskom na gumb „Stvori račun“,  jedina poslovna logika koja se nalazi na korisničkoj strani jest preuzimanje unesenog korisničkog imena i passworda i slanje tih informacija na serversku stranu.

Te informacije se moraju poslati na točno određenu lokaciju na serveru, u unaprijed definiranom formatu. Možemo zamisliti da na serverskoj strani postoji skup „otvorenih vrata“ koje stoje i čekaju zahtjeve, pri prihvatu ispravnog zahtjeva ga obrađuju na serverskoj strani i šalju nazad odgovor korisniku koji je poslao zahtjev. Slikovito opisano, taj skup „otvorenih vrata“ na serverskoj strani koji čeka zahtjeve jest aplikacijsko programsko sučelje, odnosno API. 

Ono uglavnom nije zamišljeno za direktnu „ljudsku“ upotrebu, jer su često zahtjevi i formati u kojima se šalju zahtjevi kompleksni i teški za upotrebu, nego bi se trebao nalaziti dio koda koji bi informacije i zahtjeve korisnika, iz korisničkog sučelja, transformirao i formatirao u ispravne zahtjeve koji se onda dalje prosljeđuju na programsko sučelje serverske strane.

No to što su zahtjevi koji se šalju na API servera često složeni i slabo čitljivi i na prvi pogled nejasni, ne znači da nisu podložni manipulacijama zlonamjernih korisnika i da ne moraju biti dodatno zaštićeni. 

__PRIMJER__ - **Zadatak s Hacknite platforme - Kemijske reakcije**\\

<file>
Maja je profesorica kemije, nedavno je naučila Javascript pa je odlučila napraviti web aplikaciju na koju će stavljati nastavne materijale. Ipak, još nije skroz zadovoljna izgledom stranice pa je odlučila sakriti neke funkcionalnosti.

http://chal.platforma.hacknite.hr:12001/

Flag je u formatu CTF2023[brojevi].
</file>

Analizom zadatka, na prvi pogled nije nam dostupno skoro ništa, samo je prikazana rečenica „Dobro došli na moj forum. Registracija će uskoro biti otvorena.“ Otvaranjem razvojnih alata (F12), unutar tijela HTML dokumenta ( unutar <body> elementa ), vidimo da se koriste tri skripte, jedna je definirana unutar samog HTML-a, dok su druge dvije definirane s pomoću veze na lokaciju gdje se nalazi skripta.


{{ :htmlcssjsimage8.png?400 |Tri skripte unutar tijela HTML dokumenta}}

Prvu skriptu možemo analizirati direktno unutar HTML dokumenta, dok za dohvat drugih dviju skripti moramo unijeti lokaciju skripte u browser, kao URL, odnosno za dohvat skripte koje se nalazi na putanji: 
<code>/static/js/2.010c019a.chunk.js</code>
moramo nadodati tu putanju na putanju početnu putanju stranice: <code>http://chal.platforma.hacknite.hr:12001/</code>
čime dobivamo potpunu putanju: <code>http://chal.platforma.hacknite.hr:12001/static/js/2.010c019a.chunk.js</code>

Analizom ovih skripti, možemo zaključiti da je JavaScript kod koji se nalazi unutar njih „minificiran“. Minifikacija je postupak u kojemu se ulazni JavaScript kod modificira tako da se maksimalno odstranjuju svi dijelovi koda i znakovi uz održavanje iste funkcionalnosti samog koda. Time dobivamo kod koji više nije čitljiv i jednostavan za pregled ljudima, ali jest kao dokument manji, te troši manje resursa/prometa uz održavanje iste funkcionalnosti.

Iako postoje načini za „deminifikaciju“ minificiranog koda, koji bi trebali u nekoj mjeri povratiti originalnu čitljivost, i dalje će biti potrebno malo više truda i vremena za razumijevanje koda. No postoje dijelovi koda koji se ne mijenjaju minifikacijom, kao na primjer određene vrijednosti varijabli i lokacije ili adrese nekih resursa koji se pozivaju.

Ovom logikom, možemo probati pretražiti par ključnih pojmova u minificiranim skriptama, kao na primjer „admin“, „password“ i „flag“.

Pretraživanjem riječi „flag“ u zadnjoj skripti, dobijemo zanimljiv isječak koda prikazan na slici ispod.

{{ :htmlcssjsimage9.png?400 |Pretraživanje riječi „flag“ u zadnjoj skripti}}

Izvučena linija koda u kojoj je pronađena riječ flag: 
<code>fetch("/api/b3c865a0-4d24-420d-a055-34be59d0c8fb/flag")</code>

Vidimo da se ovom linijom koda vrši poziv određene API funkcionalnosti serverske strane, koja se poziva unošenjem putanje 
<code>/api/b3c865a0-4d24-420d-a055-34be59d0c8fb/flag</code>
 na početnu putanju web stranice.

Ručnim pozivanjem tog API poziva, koji izvršavamo unošenjem punog URL-a: 

<code>http://chal.platforma.hacknite.hr:12001/api/b3c865a0-4d24-420d-a055-34be59d0c8fb/flag</code>

Dobivamo rješenje zadatka prikazano na slici ispod.

{{ :htmlcssjsimage10.png?400 |Rješenje zadatka „Kemijske reakcije“}}