The following contents is a spoiler of my on going project, I decided to post it already because I want to announce it in advance what I am currently doing and what I am up to. I plan to add more features before uploading the source code to my github page. This is version 3 already, I am almost done with version 2 but I felt that it lacks so many things. In version 2, there is no upgrade in the UI and cyber security, I just added registration page, a successful registration redirect page, added some error messages when user enters a wrong password, used extensively the redirect(url_for()) instead of the render_template and the python scripts config.py and functions.py are moved to a separate folder. So I hope you enjoy reading this post.
In today's post, I will be discussing about the upgrade that I applied to my Python Flask Login script which is the previous post. From now on, I shall be calling my project User Management System because I have made it to be a fully functioning system that will allow users to register, login to access the dashboard, logout from the system and update their profile. Not to mention the administrative functions to allow administrators to create/delete/update a user profile and reset a user's password. On the back side of these things are the python scripts. My previous post is so disorganized and I think it is not optimized. I even used a custom session manager which does not really works as it frequently does not remember who is logged in. I included on the first version because it initially passed my testing. I noticed the occurrence of the error during my frequent testing. I often retest each features on the application. This made me decide to embark on a refactoring task which has drastically changed the structure of the files and because of this, big changes in the codes is needed and as a result, it now follows the model-view-controller(MVC) design pattern. MVC is commonly used in big well known programming languages like PHP Code Igniter and LARAVEL frameworks. SAP's FIORI which is also a framework of UI5 also uses MVC. Since I have completely redesigned the back-end script, I thought that it is also necessary to completely redesign the graphical user interface. And that is what I exactly did. The front-end is now using Bootstrap 5 to make it more visually appealing. But it does not just stop there, in terms of defense against cyber attacks, a new OWASP top 10(Command Injection) was included and to detect other vulnerabilities, I did some scanning using Wapiti.
Everything is new at the Front-end
The project in its humble beginning had only 2 screens(Login Page and the Dashboard). It is meant to be just a demo program of flask. But in this blog, it has been a tradition to start from a simple app and eventually gets upgraded to a fully working system. And that is what this simple Login web application is getting. The latest version had fully expanded to full system. A User Management System. But it still very simple because it still lacks the Authorization Management System which in real sense is just as equally important and complicated as the User Management System. As a system, it should now have a landing page or a home page, a login screen, 2 dashboards(the dashboard of an administrator is different from a user), a registration page, a successful registration redirect page and 2 profile modification pages(the administrator has different view of this page). I also scrapped the css-html plain design and upgraded to Bootstrap 5 because there are much better website templates that are free and ready for downloading from the web. I am no expert in front-end development so I just used the example pages available at the Bootstrap Homepage.
The Landing Page:
The New Login Page:
The Registration Page:
The File Structure
In order for the code to be readable, I need to classify each functions being used in the program, group them and put each group in one file. I prefer to make it look very simple by putting all database related functions on the model, business process related functions on the controller and all screen routings on the views file. And that is just for the python files. This project uses a lot of css, js and image files so I created one folder for each of these files under static folder. The css files are grouped to custom css and bootstrap5 css. The bootstrap5 css files are on the main folder css and the rest of custom css files are inside the custom folder inside the css folder. I have no custom js files so all bootstrap5 js are on the main folder js. If it is necessary to create a custom js files which I think there will be in the future, should be inside a folder named custom located inside the main folder js. And lastly, I have organized the html files according to the modules where they belong, for example, for any html file that are under user management system module should be inside the accounts folder, for dashboard, redirect pages, and other similar pages that do not really belong to a module should be in the pages folder and the base layout html files should be in the layouts folder.
There is no changes in handling of global variables. The declaration is still in the config.py and all changes is handled in function.py. The changes are both python scripts are now in a separate folder(general folder), since I have implemented MVC design pattern, the controller and model modules shall contain functions that will update the global variables and these functions are typically called from the view module. So this means that the view module will not be able to look at the global variables but could display their values from the return values of the functions inside the controller and model modules.
The coding strategy
The old version codes had to be reorganized. All routings must handled by a separate function module wherein at the browser side it is a completely separate page for example, if I have to redirect to the login page, I should not just call it directly from the current page by using return render_template but instead, I shall use return redirect(url_for()). This will allow to execute the general validation sequences before entering the page login screen and I dont have to retype the same validation sequences every time I use the render_template method. Another disadvantage of render_template method is it does not really leaves the function module it just stays there so it gets way too big making the whole code more complex and too many codes that need to be retyped each time. As the project becomes bigger by adding more modules into it, it has to be organized in such a way that this sets of codes must not really get affected after each module is added.
How the program works
In general the project root directory contains the run.py program. This python script is the entry point and it contains only one line of code which is the importation of the module app. The app here refers to folder app in the root directory which contains all the folders and files(python scripts, js, html, css and images) needed by the program. The folder app should contain the __init__.py file which automatically executed everytime an import command from another module is invoked. It is similar how the constructor works in a class in object oriented programming. Since it gets automatically executed, it should contain the necessary routines to initialize and run Flask. And towards the end of this python script is the importation of the views, model and controller scripts.
Fortifying against possible cyber attacks
In my previous post I have mentioned that I already implemented CSRF and CSP and did some testing on Sql Injection attacks. Those features are still present in this latest version and as an added features, I implemented some validation of inputs to strengthen further the defense against Sql Injection and will also fortify it against Command Injection and do more testing and finally do some scans using Wapiti but this scanning will be done after I have made the website working. The reason for this is because Wapiti is only available in Kali Linux so the web application has to be uploaded on my Kali Linux Virtual Machine to perform the scanning. I have used Wapiti in my Mr Robot Penetration Testing series and it seems that the result is quite accurate and easier to understand than Owasp Zap. Wapiti returns the CVE number of the detected vulnerability. It mainly scans for vulnerabilities that are listed in OWASP Top 10. So if it detected a vulnerability about SQL Injection, it will state in its report that it found a vulnerability in SQL Injection and will suggest the possible remediation by returning a CVE number. I think Owasp Zap needs additional customization in order to get a more accurate result. That's makes it so user unfriendly.
Running the program
Step 1: You will need to install python and the dependent libraries and setup MySql.
Step 2: Download the source code from my github page.
step 3: I primarily use windows so from CMD, navigate to the folder
step 4: Set up the Environment by typing at the command prompt: set FLASK_APP=run.py
step 5: (optional) Enable DEBUG Environment (local development) by typing set FLASK_ENV=development
step 6: Start the project by typing flask run --host=0.0.0.0 --port=5000
Setting up MySql:
step 1: Download and install WAMP64
step 2: Run Wamp64
step 3: Open phpMyAdmin
step 4: Create the database and table
Access the app in browser: http://127.0.0.1:5000/
No comments:
Post a Comment