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:
echo "<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:
<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ä.
<p>
Hakutulokset haulle:
<script>
alert('XSS')
</script>
</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.
Oikea tapa: Templaatit
Oikea tapa rakentaa dynaamista HTML:ää on käyttää templaattikirjastia kuten Jinja2 jota Flask käyttää natiivisti.
Jinja2-mallien käyttäminen Flask-sovelluksessa on suhteellisen helppoa. Tässä on lyhyt kuvaus siitä, miten voit käyttää Jinja2-malleja Flaskissa:
- Asenna Jinja2 Flaskin avulla: Jinja2 tulee yleensä asennettuna Flaskin kanssa, mutta varmista, että sinulla on uusin versio käytössäsi. Voit tarkistaa sen komennolla "pip show Flask".
- Luo Jinja2-mallit Flask-sovelluksessa: Luo Flask-sovelluksen "templates" -kansioon malli (mallit) käyttämällä Jinja2-syntaksia. Voit käyttää mallissa Jinja2:n templaattikieltä, joka tarjoaa erilaisia toimintoja kuten silmukoita, ehtoja ja muuttujia.
- Välitä tietoja malliin Flask-sovelluksessa: Voit siirtää tietoja Flask-sovelluksesta Jinja2-mallille käyttämällä Flaskin "render_template" -toimintoa. Tämä toiminto luo HTML-sivun, joka käyttää Jinja2-mallia ja välittää sille tietoja.
- Näytä malli selaimessa: Kun Flask-sovellus vastaanottaa pyynnön, se kutsuu näkymäfunktiota, joka käyttää render_template-toimintoa lähettääkseen HTML-sivun, joka on generoitu Jinja2-mallin avulla.
Yksinkertainen esimerkki
main.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', nimi='Maailma')
if __name__ == '__main__':
app.run(debug=True)templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Flask & Jinja2 Esimerkki</title>
</head>
<body>
<h1>Hei, {{ nimi }}!</h1>
</body>
</html>Harjoittele
Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.
Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.
Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.