HTML-Pohjat

HTML-generointi on tärkeä osa perinteisiä web-sovelluksia joissa palvelin rakentaa HTML:n dynaamisesti esimerkiksi sen perusteella mitä käyttäjä on syöttänyt sovellukseen.

Vanha, vaarallinen tapa

Ennen vanhaan monet web-sovellukset rakensivat HTML:ää vain yhdistelemällä merkkijonoja. Tässä esimerkki "legacy" PHP-sovelluksesta joka palauttaa HTML:n joka sisältää käyttäjän syötteestä otetun hakusanan:

1echo "<p>Hakutulokset haulle: " . $_GET('haku') . "</p>"

Jos käyttäjä menisi vaikka URL-osoitteeseen https://www.example.com/?haku=kissa, sovellus palauttaisi selaimeen HTML:n:

1<p>Hakutulokset haulle: kissa</p>

Tärkein syy siihen miksi tämä on hirvittävän huono ja vaarallinen tapa rakentaa dynaamista HTML:ää, on että HTML:n rakenne ja HTML:ssä näytettävät tiedot menevät helposti sekaisin. Mitä jos käyttäjä olisikin mennyt tällaiseen URL-osoitteeseen? https://www.example.com/?haku=<script>alert('XSS')</script>

Silloinhan sovellus palauttaisi HTML:n jossa on JavaScript-koodia jonka ei ollut tarkoitus olla siellä.

1<p>
2  Hakutulokset haulle: 
3  <script>
4    alert('XSS')
5  </script>
6</p>

Tätä ilmiötä kutsutaan XSS-haavoittuvuudeksi josta voit oppia enemmän XSS-kurssilla.

Flaskin käyttäminen HTML-pohjien kanssa on melko suoraviivaista, ja se vaatii vain muutaman perusaskeleen.