HTML Basics

HTML generation is an important part of traditional web applications where the server builds HTML dynamically based on what the user has input into the application.

Old, dangerous way

In the olden days, many web applications constructed HTML by simply concatenating strings. Here is an example of a "legacy" PHP application that returns HTML containing a search term taken from user input:

1echo &quot;<p> Search results for search: &quot; . $_GET(&#39;search&#39;) .&quot;</p> &quot;

If the user would go to the URL address https://www.example.com/?haku=kissa, the application would return the HTML to the browser:

1<p>Search results for: cat</p>

The main reason why this is a terribly poor and dangerous way to build dynamic HTML is that the structure of HTML and the data displayed in HTML can easily get mixed up. What if the user had gone to this URL address? https://www.example.com/?haku=<script>alert('XSS')</script>

Then the application would return HTML with JavaScript code that was not intended to be there.

1<p>Search results for:<script>
2    alert('XSS')
3  </script></p>

This phenomenon is called an XSS vulnerability, from which you can learn more in the XSS course.

Using Flask with HTML templates is quite straightforward and requires only a few basic steps.