Differences

This shows you the differences between two versions of the page.

--- html-css-js [2024/03/04 16:21] – mbunic
+++ html-css-js [2025/12/01 11:40] (current) – external edit 127.0.0.1
@@ Line 42: / Line 42: @@
 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 indeksiranjef.
+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
+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".
-<code>/robots.txt</code>
 Na link web zadatka:
@@ Line 51: / Line 50: @@
 </code>  dodajemo putanju
 <code>/robots.txt </code>
-te je puni URL, zajedno sa putanjom:
+te je puni URL, zajedno s putanjom:
 <code>http://chal.platforma.hacknite.hr:7067/robots.txt </code>
@@ Line 65: / Line 64: @@
 </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 razumijeti da iako legitimni crawleri poštuju robots.txt, on nije sigurnosna mjera. Moguće je napraviti crawler koji ignorira robots.txt.
+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“}}