Grasping the fundamentals

This lab is an exercise in the fundamentals of a basic Flask app and an introduction to some secure coding.

It is not a practical real-world app in itself, but it does have some of the core structure of any real app, and you will build it from scratch.

This should give you a solid grasp on the fundamentals of Flask apps and some basic security.

It also requires some logic in your code, which may take some time to get working correctly.

####

The URLs

Create a Flask app that serves these URLs

· /

· /register

· /login

· //home

· /unclosedBackdoor

This is a basic user registration and login app.

Your app saves secure versions of the usernames and passwords in a Python dictionary data structure, which is not persistent.

After you close the app and start it again, all the accounts are gone.

Later, we will use a database for persistency.

But if you can't do this, you can't do that.

####

What to use

Write only Python, HTML, and Jinja2 in your source code files.

Do not use the bootstrap extension.

Do not use the WTForms extension.

Do not include any features that are not asked for here.

Do not use any CSS or JavaScript.

####

Follow the specs

I need the submissions to be consistent.

I have code that automatically reads your submissions and grades it automatically.

I am not discouraging you from being creative.

I encourage you to do more with the idea of this app, but that is your side project.

I would be very glad to look at your side project with you on the side if time allows.

Do not submit your side project here.

Please follow the specifications stated here exactly. Nothing more. Nothing less.

####

Files and folders

You should have the following files in your project

lab5.py

templates\index.html

templates\login.html

templates\register.html

templates\userhome.html

Zip these 5 files up and submit your zip file here.

Do not include any other files
or folders
in your zip file.

Do not use any other names for the files.

Name your zip filelastname_lab5.zip, wherelastnameis your last name.

The HTML

I don't care about the UI.

I'm interested in you understanding the programming.

Your HTML files do not need a or element.

The general template for all your HTML files is this:

textContent

####

View functions and return statements

All your view functions should use only one return statement as described in the announcement.

Week 5: Lab details

Reviewing and referencing

If you are unsure of the basic HTML, Python, or Flask terms below, use our study material to make certain that you understand exactly what is being asked for in the specifications.

If you need to, refer to the Grinberg textbook for Flask or the
official
Flask documentation site.

For HTML and Python basics, refer to the tutorials on w3schools or MDN, or the textbooks in our playlists on O'Reilly.

After you've done that, then please ask me if you are still unsure.

Also use my demos and notes on Canvas.

####

The / URL

Save your HTML code in file namedindex.html.

Name the view functionindex.

Include an

element with "w24 lab week 5" as its text content.

Include an

element with your name as its text content.

Include two

elements.

Each

element should have only one child, an element.

The first element should have "login" as its text content.

The other should have "register" as its text content.

The two elements should use only use the href attribute, which should take the browser to the /login or /register URL accordingly.

(As a programmer, you should know that your page should not include the quotation marks that I wrote above. I used quotation marks here because I am referring to string values.)

####

The /register URL

Name the view functionregister.

The /register front end

Save the HTML in a file namedregister.html.

This page has a simple form for a user to create an account for our app.

This page should have an

element with "register" as its text content.

It should have a element with only 1 attribute.

There should be 3 elements and 2 elements.

The label elements should have "username: " and "password: " as their text content.

Use the appropriate value for thetypeattribute for the password field.

For the submit button, you can use any appropriate string for the button's text.

Put each field in its own

element.

The browser should send the form data with the POST method.

So a template for your register.html file is

register

textContent

textContent

The /register back end

Our app will save all the usernames and passwords in a Python dictionary.

Name the dictionaryuser_db.

Define the dictionary at the top-level of the source code.

Define it in the line right afterapp = Flask(__name__)

Define it with the statementuser_db = {}

That is, initialize it with an empty dictionary.

The usernames should be the keys.

Hashed passwords should be the values associated with the keys. (You'll read details about hashed passwords below.)

Don't assume. Test. Use if/elif. Don't use if/else.

Your view function definition should use an if/elif structure.

It should not use an if/else structure.

Specifically, you should test the request method. If it is GET, process it accordingly.

If it is not GET, then do not assume that it is POST. Explicitly test it. That's a little bit of secure coding there.

You know there are more than just GET and POST request methods. Your reading this week discusses some other exploitable methods like DELETE and UPDATE.

So explicitly test for GET and POST by using an if/elif structure.

Only 1 return statement

All your view functions should have only one return statement, ONLY ONE RETURN STATEMENT.

What to do with GET and POST?

A GET request should render the appropriate HTML file.

A POST request should create a
new
user in a Python dictionary with the username/password values from the form as the key/value pair.

If the username isalready in the dictionary, then the existingpasswordin the dictionaryshould not change.

In other words, ignore attempts to register an account with an existing username.

So you will have to write some logic here about dictionaries.

After the form data is processed, the browser should go to the / URL.

####

The /login URL

This page lets the user enter a username and password, and if they are authenticated, then they are taken to their home page.

This is extremely similar to /register.

In fact, copy the register.html file and change two things, the

text content and the submit button's value attribute.

The functional difference is that instead of the username and password being saved in the user_db dictionary, the username and password are compared with what is already in the dictionary.

If the user is authenticated, the browser should go to the //home URL.

If not, the browser should go to /.

####

The //home URL

This page just has an

element with "welcome !"for its text content.

You know is not literal. You know how to make the real username value appear on the page.

Use your Jinja skills.

####

PASSWORDS!

Do not save passwords as plain-text in the user_db dictionary.

Hash the password.

Save the hashed password in the dictionary.

We will talk about the details of hashing later.

So this is the small discovery part of the lab, use theargon2-cffipackage to handle the password hashing.(Links to an external site.)

Its home page on PyPI has an example that shows you enough to see how to use it to do what you need to do for this app.(Links to an external site.)

Your app should not crash.

It should not throw any exceptions.

If you need to know how to handle exceptions, the w3schools tutorial is good enough to learn how to use try blocks in Python in less than a minute.

####

The /unclosedBackdoor URL

Often, in development, coders have backdoors in the code as part of the testing.

Sometimes, backdoors are not removed. That could be intentional or unintentional, but you look up cases where unintentional backdoors were left in the code when the app was released and put into production.

Conspiracy theorists believe all software has a hidden backdoor that only the Lizard People know how to use.

The backdoor we'll have in this app is a view of the username/password dictionary.

Name the view function for this URLclose_me.

The view function definition should havejust one statement.

That statement shouldshow all the usernames and (hashed) passwordson the browser page.

####

Testing

SOME tests you should do on your app:

Attempting to log in with a username that has not been registered takes the browser back to the URL /.

Attempting to log in with a registered username and an incorrect password takes the browser back to the URL /.

Using the registration form with an existing username does not change the password that was set when the account was first registered. The only thing that happens is the browser returns back to the URL /.

You should think about whether there are other tests that you should do for the app.