Building and Securing a Python Web App

I have finally made it to the end of the chapter!! For the final project I learned how to turn my raspberry pi in to a server, host web sites from it, use the tornado module to build web apps, and how to secure those web apps using cookies. HTTP and HTML is discussed heavily throughout this project and I actually built a total of 8 simple websites to test my knowledge using both.

HTTP is an acronym for Hypertext Transfer Protocol. It is a method that browsers and websites use to communicate. HTML is an acronym for HyperText Markup Language. This is the language that most of your favorite websites use as a framework for displaying text, links, and images.

Some basics of HTML:

  • Every webpage is a separate HTML file

o  For example, the home page of a website is a completely different file than the about me page file

  • Every HTML file has two parts

o The <head>: contains what is displayed onto the screen about the webpage

o The <body>: contains what is displayed onto the screen about the webpage

  • Uses tags to describe the different parts of the document

o Most tags come in pairs

§  Opening tag: <head>

§  Closing Tag: </head>

§  Always enclosed in triangular brackets

§  Closing brackets start with a forward slash

 

Below is the first simple website I built with HTML to test hosting it from the pi to the web.

index.png

When the file is opened in a web browser it appears like this:

index in browser.png

To be able to host this to the web I built this HTTP server in python as shown below.

server.png

This code will start a web server on your pi with the root in your home directory. I’m pretty sure there is a way you can hack this to be able to run it on other devices, but we’ll stick with the pi for now. The blue “8000” is the port it will be running on. The default port for web servers is 80 but the book suggested using this one just in case we had something running on that specific port. If you’d like, you can change it to 80 to see how this project will work as well. Once the web browser is up and running I can now point my pi’s web browser to this address:

http://localhost:8000/

localhost directory.png

Localhost is a loopback address linked to the ip address 127.0.0.1. Localhost always point back to the machine it’s running on, in this case it would be my pi.

Basics of HTML:

  • Works with directories and files in exactly the same way your computer does

o   Starts from root directory

o   /home/pi

I saved the file that I displayed earlier as index.html in my root directory and when I visit the link (http://localhost:8000) I can now see the file displayed as a homepage.

index in root.png

I’m going to be using this web server throughout this post to demonstrate the different ways you can incorporate HTML in python to display webpages. It will need to be running every time you run a new website for it to successfully open inside the browser.

I also learned that this server module is not very good with displaying information that changes. The python tornado module is a great resource to be able to display webpages that need more versatility. Tornado works with a virtual file structure and instead of working with individual HTML files, you can create classes within python code the will output the HTML you want. To install tornado, use the command line below:

sudo apt-get install python3-tornado

 After tornado was successfully installed I tested it with the following code:

do not save the file as tornado.py; it shadows the actual tornado import causing and import error

do not save the file as tornado.py; it shadows the actual tornado import causing and import error

The first half of the code creates the web page and the second half (if __name__ ==  “__main__”:) starts the web server.

application = tornado.web.Application([

            (r”/”, MainHandler),

],)

This creates a new web application and sets options for it. The final two lines tell it to listen to port 8888 and I will be able to see how it works. Now using this link http://localhost:8888/, I will be able to see the website in my browser.

dynamic web1.png

Tornado is great for serving static content, but it can become messy for the fact that we are including HTML inside of python code. The real focus of using tornado is for serving up dynamic pages that change. The next examples show how I was able to generate a specific greeting for certain users. In this example I added another class to be able to specify which name should be presented as the output.

users names1.png

As you can see, the MainHandler class stays the same but I have now added a new HelloHandler class. I have also updated the web application part of the code to be able to process the new handler. When I run this, I will now point the browser to:

http://localhost:8888/hello/Empress

The output is shown below.

dynamic web2.png

Any name can be used in place of the one I used, and the greeting can also be changed to display something else. Along with learning how to create more dynamic webpages with tornado, I learned how to use templates instead of inserting HTML in python code. My first template for the HelloHandler is displayed below. Make sure to save this inside your root directory for this to work.

hello template.png

I also updated the HelloHandler once more to be able to display the web page correctly.

template server.png

When the program is run again you should see the same output as before. Along with generating a specific greeting for users, I also learned how to use the POST method for sending information back to the server using HTML forms. I created this website template so that users can enter their information into it. I basically created what we all use to sign into our favorite social media accounts and email accounts but just the username part.

userinfo.png

 

I also updated the HelloHandler class as well as the tornado application code to be able to successfully display the HTML site.

userinfoserver.png

When ran, the website is shown with a text box so that you can enter your name. This works when pointing your browser to http://localhost:8888/hello/ because the browser sends a GET request. A GET request is used to retrieve data from the browser. When I got to this part of the project I wasn’t sure if I was supposed to be getting the name I entered into the text box inside the python shell. Every time I entered my name in the text box and hit sign in I got a 405 POST error. I’m still doing my research on this issue, but this also happened later in the project when it came to securing my web application. I eventually decided to use the chapters original code to show how it works for the sake of showing a working output.

You can also put pieces of python code inside a template that are enclosed inside of brackets. The most common pieces are:

{% set my_var = 0%}  {% for x in y %}  {% end %}

I built and example of this to see how it works compared to the regular HTML templates.

brackethtml.png

The book describes it as not being useful code, but it does a lot more than the previous template I discussed. This specific template is supposed to display each letter of the name on a different line. When running this code, I also get the same 405 error as explained before and I will be doing more research to see why both projects aren’t working.

this will not be posted onto my github until the issue is fixed

this will not be posted onto my github until the issue is fixed

userinfo405.png

I was very excited when I got to the securing part of this project because I am currently working towards becoming an application security engineer. The security provided in this is nowhere near being completely secure but it’s a start. When building web applications that require a user’s personal information it’s always a great idea to provide the best security so that unauthorized access can’t exploit user’s information. I’m sure we’ve all heard of a few hacks where this has happened. The method of security I’ll be using in this example is cookies. Cookies are bits of information that our web apps store in the browser. They will be used to track which sessions are logged in. When users successfully log in, a secure cookie is set with the username. When the user logs out the cookie is cleared and if they do not have a cookie set the user is directed back to the login page. I had to set up a total of 5 different files for this part of the project to work. 1 python file and 4 different HTML templates.

This is the python file that will be handling all of the web application work.

pi-status.png

The SysStatusHandler does most of the work and takes a page argument called type that can take the values – processes, system, syslog, storage, network, or all. HTTP GET request arguments are sent after a question mark in the url. So, to be able to get to this page you would point your browser to:

http://localhost:8888/sysstatus?type=network

This link sends the argument type with the value network to the sysstatus page.The rest are the HTML templates that are used to display the login page, logout page, sysstatus page, and login fail page.

sysstatus

sysstatus

logout page

logout page

login page

login page

login fail page

login fail page

Below is a demonstration of everything working together:

secure gif.gif

After reading this chapter I now understand new concepts and even concepts I’ve learned in the past a lot better. Data can be sent back and forth between computers using a host and a port number, hosts are defined by IP addresses or hostnames, and sockets allow you to connect computers to be able to send data between them. I also learned that APIs are interfaces that programmers use to access web servers and the data inside of them. The twitter API has a module that lets you retrieve and manipulate twitter information. APIs also use a universal data format called JSON to make it easier to parse and share data between programs. The http.server module allows you to create a really simple web server for hosting web pages. Tornado can be used to create more dynamic web pages and tornado templates make working with python and HTML less messy. A server can receive information form users using HTML forms and POST requests and cookies allows you to store information in the client’s web browser for minimum security.

This was one of the most annoying chapters to deal with next to the last chapter dealing with 3D modules. I’m really determined to get through the book to keep learning but I also can’t wait to finish the book to move onto something a bit more updated. I will be starting chapter 8 next week which will be touching on Minecraft. Stay tuned for my python and raspberry pi journey and if you have any suggestions on any part of this project please feel free to reach out to me. 

You can find the security part of this project here.

Happy Hacking!