Receiving User Input

00:00 Receiving User Input. In the action attribute of your <form> element, you specified that the data of your HTML form should be sent back to the same URL it came from. Now you need to include the functionality to fetch the value in index(). For this, you need to accomplish two steps. Import Flask’s request object.

00:22 Like many web frameworks, Flask passes HTTP requests along as global objects. In order to be able to use this global request object, you first need to import it. Fetch the value.

00:35 The request object contains the submitted value and gives you access to it through a Python dictionary syntax. You need to fetch it from the global object to be able to use it in your function. On-screen, you’ll see the code being rewritten to add these two new changes.

01:04 You’ll also want to add the captured value at the end of the form string to display it after the form.

01:18 The request.args dictionary contains any data submitted with an HTTP GET request. If your base URL gets called initially, without a form submission, then the dictionary will be empty and you’ll return an empty string as the default value instead. If the page gets called through submitting the form, then the dictionary will contain a value under the celsius key, and you can successfully fetch it and add it to the returned string.

01:45 When you try the web app now, you’re able to enter a number and see it displayed right underneath the form’s button. If you enter a new number, then the old one gets replaced.

01:55 You’re correctly sending and receiving the data that your users are submitting. Before you move on to integrate the submitted value with your temperature converter code, are there any potential problems you can think of with this implementation?

02:10 Currently, your web app accepts any kind of input, be it a number, a string, or even HTML or JavaScript code.

02:24 This is extremely dangerous because your users might accidentally or intentionally break your web app by entering specific types of content. Most of the time, you should allow Flask to take care of these security issues automatically by using a different project setup. However, you’re in this situation now, so it’s a good idea to find out how you can manually make the form you created input safe.

02:49 Taking input from a user and displaying that input back without first investigating what you’re about to display is a huge security hole. Even without malicious intent, your users might do unexpected things that cause your application to break.

03:05 Try to hack your unescaped input form by adding some HTML text to it. Instead of entering a number, try entering code similar to what you see on-screen.

03:29 Flask inserts the text directly into HTML code, which causes this text input to get interpreted as HTML tags. Because of that, your browser renders the code dutifully, as it would with any other HTML.

03:43 Instead of displaying back the input as text, you suddenly have to deal with a stylish educational spam link that time-traveled here right from the nineties.

03:52 While this example is harmless and goes away with a reload of the page, you can imagine how this might present a security problem when other types of content are added in this way.

04:01 You don’t want to open up the possibility of your users editing aspects of your web app that aren’t meant to be edited. To avoid this, you can use Flask’s built-in escape(), which converts special HTML characters into equivalent representations that can be displayed safely.

04:19 You’ll first need to import escape into your Python script to use this functionality.

04:26 Then, when you submit the form, you can convert any special HTML characters and make your form input hacker-proof.

04:39 Refresh the development server page and try submitting some HTML code. Now it’ll be displayed back to you as the text string that you entered.

04:52 Note that it’s necessary to convert the escaped sequence back to a Python string. Otherwise, Flask will also greedily convert the form element your function returns into escaped strings.

05:04 When building larger web applications, you shouldn’t have to deal with escaping your input since all HTML will be handled using templates. If you want to learn more about that, then check out this Real Python course.

05:20 After learning how to collect user input and also how to escape it, you’re finally ready to implement the temperature conversion functionality and show a user the Fahrenheit equivalent of the Celsius temperature they entered. And that’s what you’ll cover in the next part of the course.