This course will help students learn the Fundamentals of Web Applications. This will include a study of HTTP, APIs and Application Architectures. Students will perform guided labs, designed to augment the knowledge gained from the lecture portion of the class.
Provision your Azure Environment, enter your Email address and click Provision
Provisioning can take several minutes. \*\*\* __PLEASE DO NOT SUBMIT MULTIPLE TIMES__ \*\*\*
When provisioning is complete, one of the following will happen.
Tasks
Each Student will have their own environment for the lab. The following diagram provides an overview of the Student environment.
The below document references “student number” for a couple of the steps. This is the first portion of the Username you recived in the initial email with your Azure credentials. For example if your username is web10@fortinetcloud.onmicrosoft.com then your student number would be web10
Login to Azure Cloud Portal https://portal.azure.com/ with the provided login/password
Select Yes when asked if you would like to stay signed in
If you are presented with a “Welcome to Microsoft Azure” screen, click Cancel
Click on Cloud Shell icon on the Top Right side of the portal
Select Bash
Next, you will see a “Getting started” page.
On the Mount storage account screen
click Select existing storage account
click Next
On the Select storage account screen (values in drop down)
choose Internal-Training as description
resource group will be “student number”-http101-workshop
storage account name will be “student number” floolowed by some random numbers and letters
File share will be cloudshellshare
Click Select
Your Cloud shell is now configured.
All the components required for Lab are deployed through terraform.
Perform the following steps in your Cloudshell console to create your environment.
git clone https://github.com/FortinetCloudCSE/api-and-websvc-fundamentals.gitcd api-and-websvc-fundamentals/terraform folderterraform initgit clone https://github.com/FortinetCloudCSE/api-and-websvc-fundamentals.git
cd api-and-websvc-fundamentals/terraform
terraform init
Run the following command to apply it
terraform apply -var="username=$(whoami)" --auto-approveYou can manually specify your username (found in your Azure Account email) in the command
If your Workshop Azure account login is web31@ftntxxxxx.onmicrosoft.com, your username is web31, and the command to enter is:
terraform apply -var='username=web31' --auto-approve
To print the node VM’s login password, you can run this command
terraform output -raw password
For this lab, we will only need to interact with the Kali linux device. We will use guacamole to create an RDP session in your browser.
In your browser window, type in the url below, substituting your Kali server IP.
Kali Linux takes about 20 minutes to fully deploy, so you may get a connection refused error. Please be patient and the login prompt will eventually appear. Even after Kali is reachable via HTTPS, some of the initial packages may still be downloading.
https://<kali-IP>:8443Accept all warnings and proceed to the site.
You will be prompted to login to Apache Guacamole.
guacadmin for Username and enter S3cur3P4ssw0rd123!
There are portions of this lab that will require large amounts of text to be entered on the Kali desktop. To accomplish this:
S3cur3P4ssw0rd123! and click Authenticate
In this Module, we will explore the fundamentals of the HTTP protocol by observing network traffic sent to and from a web application using Wireshark. All of these applications will reside on the Kali linux device.
| Goal | Start application |
| Task | Clone github repository and deploy application |
| Verify task completion | You should see the repo |
According to Google AI: Flask is a web development framework written in Python that helps developers build web applications. It’s a microframework, which means it doesn’t rely on specific tools or libraries, and it’s considered a good choice for developers who are already familiar with Python. Flask’s minimalistic design gives developers more control over their applications’ structure, and it includes features like templating, database integration, and routing.
More information about Flask can be found at the Flask documentation page
For this exercise, we will be using a very simple flask application. Students will start the application within a python virtual environment. It is useful to monitor the debug messages for the application during user interactions.
We will be opening two CLI connections to Kali. If you have the ability to ssh from your laptop, you can open two sessions:
ssh labuser@<kali-ip>
password: S3cur3P4ssw0rd123!If you prefer, you can open two terminal windows from the Kali Desktop
Choose one of the terminal sessions that you opened and issue the below commands:
git clone https://github.com/fortidg/simple_flask_auth.git
cd simple_flask_auth
python3 app.pyYou should see that the flask application has successfully started and is listening on port 8000.
Leave this terminal window open so the app continues to run
If you would like to take a look at the Flask Application itself, you can use
cat simple_flask_auth/app.py or navigate to this Github Repo.
| Goal | Learn how to use netcat to craft http requests |
| Task | Use netcat to interact with our simple application by using form data and json. We will monitor network behavior using Wireshark. |
| Verify task completion | If entered properly, the flask application will return data, as highlighted below |
According to the “manpage”: netcat is a simple unix utility which reads and writes data across network connections, using TCP or UDP protocol. It is designed to be a reliable “back-end” tool that can be used directly or easily driven by other programs and scripts. At the same time, it is a feature-rich network debugging and exploration tool, since it can create almost any kind of connection you would need and has several interesting built-in capabilities. Netcat, or “nc” as the actual program is named, should have been supplied long ago as another one of those cryptic but standard Unix tools.
We will be using Netcat to craft a series of HTTP calls to our flask application and observing the resulting actions. We are using “localhost” as our destination because we are executing NC from the same Kali Linux instance that’s hosting the Flask Web App, but it could just as easily use a public URL.
For this first example, we want to use Wireshark to watch the interaction between netcat and the Flask web server.
In wireshark, select Loopback:lo as the interface and enter host 127.0.0.1 and port 8000 into the capture filter
Please take care when entering the commands below. Please enter the commands one line at a time, and be sure to hit enter twice after each web command.
For Example:
1. Open the TCP 3-way handshake and wait for the return
```
nc localhost 8000 -vvv
```
2. Enter the HTTP request
```
GET /hello HTTP/1.1
```
3. _**Hit enter 2 times**_
From the 2nd ssh session terminal to Kali Linux, let’s start the tcp connection
nc localhost 8000 -vvvThe resulting Wireshark capture should show us the TCP three-way handshake
Now let’s finish the call by adding L7 components
GET /hello HTTP/1.1
<hit enter again>You should see some response headers returned as well as the programmed response from the app. We can see the 200 OK status, meaning that our application is actually working, and we requested a valid resource.
Now we can look back at Wireshark and see the rest of the traffic associated with this call.
We can see the underlying HTTP in this Wireshark capture because we are not using Secure HTTP (TLS or Quic) If this traffic were encrypted using TLS, we would only see TCP and TLS
We also get some other useful information about the application, including the Application server software as well as the python version used. Generally speaking the less information potential attackers have about your application, the better. If this information is exposed, it is imperative to ensure that servers are appropriately patched.
Take a look back at the terminal where you originally started the Flask application. You should see your first debug message.
In our first call above, we used the GET method against http://localhost:8000/hello. Let’s try the same thing against a different resource
nc localhost 8000 -vvvGET /login HTTP/1.1
<hit enter again>
As you can see, we got the Method Not Allowed (405) error. In the example output, you can see that we only allow POST and OPTIONS methods for the /login resource.
The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values. Formdata is useful if the client does not support Javascript, or in a situation where it is desirable to send binary data without text encoding. For This step, we are going to set the “Content-Type” to x-www-form-urlencoded and then add key/values for username and password.
nc localhost 8000 -vvvPOST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 34
username=student&password=welcome 
JavaScript Object Notation (JSON) is a text-based format for representing and exchanging data that is both human and machine-readable. It is often used in web applications, but can be used independently from JavaScript and in any programming language. JSON is popular with developers because it is lightweight, easy to parse and generate, and requires less coding. For This step, we are going to set the “Content-Type” to json and then add key/values for username and password in a simple JSON string.
For more information about JSON, click on this link.
nc localhost 8000 -vvvPOST /save HTTP/1.1
Content-Type: application/json
Content-Length: 32
{"id": 5150, "name": "student"} 
| Goal | Learn to use Browser based developer tools |
| Task | We will enable Firefox’ Developer tools and use them to inspect the content returned by our simple flask application |
| Verify task completion | You will be able to see detailed information about the application’s content |
For this exercise, we will take a high level look at the Web Developer tool in Firefox. For more information about this tool, you can go to the Firefox DevTools User Docs.
Almost all browsers have developer toolkits. Below are some notable examples:
http://localhost:8000/The inspector tab shows the HTML used to render this page. Take a look at the code and expand some of the menus.
Scroll down and right-click on the link “To hear what other have to say”. Select Inspect(Q). This will highlight the code associated with this line.
We can see that this is a href (hypertext reference). this tells us the source of the file used in this tag.
Open your terminal and input:
more simple_flask_auth/templates/view_feedback.htmlYou should see something like:
Now, left-click on the link to go to the page. Compare the html to the outputs on the rendered page.
The network tab gives us a lot of information about traffic to and from the application itself. This can be quite useful for viewing how the application is actually operating at layer 7.
Click on The “Network” tab in the Web Developer Tool section at the bottom of the page.
At a glance, we can see the HTTP status code, method and domain.
By default, All option is selected. The other options to the right, are high level category filters.
On the left hand side of this screen is the “Storage tree”, which lists all the storage types that can be inspected. Objects under each type are organized by origin. In our output, we only have two origins (http://localhost:8000 and https://giphy.com)
Expand the Cookies storage type. Note that our two origins are there, but we cannot see any cookies.
Back on the web page (http://localhost:8000/view_feedback), click the link below the GIF to give feedback.
student and Password Fortinet1! and select Sign InBack on the Storage tree, expand the Cookies Section and you will notice that you now have a cooked with a key/value of “name/whatever name you entered” in the “Table Widget” to the right of the Storage Tree
Click on the new cookie. You will notice a new “Sidebar” pop up to the right of the Table Widget. This contains more detailed information about the cookie.
| Goal | Create a web defacement attack against our browser |
| Task | We will use a simple cross site scripting attack to deface our web page |
| Verify task completion | If properly executed, you will see our replacement content displayed on the feedback page |
While this is not intended as an ethical hacking course, it is useful to understand how simple attacks work. The simple flask site that we have here doesn’t have any juicy databases, chock-full of Personally Identifiable Information (PII) that can be harvested, but we can set a trap for a user who logs in to check the site feedback.
http://localhost:8000/view_feedbackNow that we have established the fact that we can leave feedback, let’s use that to perpetrate a Defacement XSS attack.
In your browser on Kali, navigate to http://localhost:8000/view_feedback
Click on the link to leave feedback and follow the process to do so.
<svg onload="document.body.innerHTML='<img src=https://objectstorage.us-ashburn-1.oraclecloud.com/n/fortinetoraclecloud1/b/public-bucket/o/Cordimungus.svg>'">You should be re-directed to the Thank You Page.
Navigate back to http://localhost:8000/view_feedback and note that your feedback was recorded.
In this module, we used some very common troubleshooting tools to interact with a very simple monolithic web application written using Flask.
Hopefully this engendered a desire on the part of the student to use these tools and techniques to further explore and learn how to secure this type of application.
What is a cookie?
What can you learn from developer tools in the browser?
Web attacks are difficult to perpetrate,m and you need to be an inveterate hacker to attempt it (True or False)
This Module covers APIs starting with basics and then moving on to more advanced topics. As with the first module. All applications used for this module will be contained on the Kali linux device.
| Goal | Ensure flask application is running |
| Task | You will clone and/or restart the app |
| Verify task completion | If properly executed, you will see debug information about the application as pictured below |
These are the same steps which you maybe already have done in the previous Module. If you have the Application still running, proceed to the next task.
For this exercise, we will be using a very simple flask application. Students will start the application within a python virtual environment. It is useful to monitor the debug messages for the application during user interactions.
We will be opening two CLI connections to Kali. If you have the ability to ssh from your laptop, you can open two sessions:
ssh labuser@<kali-ip>
password: S3cur3P4ssw0rd123!If you prefer, you can open two terminal windows from the Kali Desktop
Choose one of the terminal sessions that you opened and issue the below commands:
git clone https://github.com/fortidg/simple_flask_auth.git
cd simple_flask_auth
python3 app.pyYou should see that the flask application has successfully started and is listening on port 8000.
If you would like to take a look at the Flask Application itself, you can use
cat simple_flask_auth/app.py or navigate to this GitHub Repo.
| Goal | Learn to use CURL and Postman to interact with our REST API |
| Task | Use CURL and postman to perform get and post actions |
| Verify task completion | If properly executed, you will be able to do simple math using the API |
Make sure that you are still logged in to your Kali Linux Desktop environment and the Flask application is running.
curl is a command line tool to transfer data using various network protocols, mostly commonly HTTP. It is available on most operating systems and can be used to interact with APIs.
curl -X GET 'http://localhost:8000/api/v1/systeminfo'cmd parameter to pass a command to the API and review the output.curl -X GET 'http://localhost:8000/api/v1/systeminfo?cmd=whoami'Postman is a collaborative platform used for developing, testing, and documenting APIs, enabling developers to streamline and automate their API workflows.
To open the Postman application, type the following command in a terminal window:
PostmanDouble check you're using capital 'P' when launching Postman
A new window will open which will look like this:
A new window will appear:
An empty Workspace will open.
To create a new request, click on the + sign on the top left corner.
Enter the URL http://localhost:8000/api/v1/systeminfo and select the HTTP method GET.
Click on Send and review the output.
Repeat the above steps by passing the ?cmd=whoami parameter (`http://localhost:8000/api/v1/systeminfo?cmd=whoami’) and review the output.
Test the endpoint with different HTTP methods like POST, PUT, DELETE and review the output.
HTTP POST is not another tool, it is a different communication method used by APIs to send data to the server. You can use e.g. curl or Postman to send a POST request to the API. In this task you are free to use the tool of your choice.
Use curl or Postman to send a POST request to the API endpoint http://localhost:8000/api/v1/calculate and review the output. In the Body,click on raw add empty JSON object {} and select JSON in the dropdown.
If you use curl, a http header needs to be added to the request:
curl -X POST 'http://localhost:8000/api/v1/calculate' -H 'Content-Type: application/json' -d '{}'
Try to walk through the error messages (or the code) to understand, which parameters need to be provided to get a successful api response.
Hint: Example Payload:
{
"operation": "add",
"num1": 1,
"num2": 2
}Test the endpoint with different operations like add, subtract, multiply, divide and review the output. Use different tools to send the requests.
| Goal | In this Lab you will explore different types of APIs. |
| Task | You will use different tools like curl, Postman or Burp Suite to interact with the APIs. |
| Verify task completion | If properly executed, the applications will return data as pictured below |
This will give you a better understanding of how APIs work and how they can be used in different scenarios.
In the previous task you have already gained some experience with a REST API. In this task you will explore different types of APIs like SOAP or GraphQL.
Open the Postman application by typing the following command in a terminal window:
PostmanA new window will open which will look like this:
select lightweight API client below the Account creation form.
An empty Workspace will open.
To create a new GraphQL request, select File…New in the top left and then GraphQL
As URL, enter https://spacex-production.up.railway.app/. Postman will automatically detect that this is a GraphQL API and populate the Queries.
Click below the url to open the list of queries
It should look something like:
Spend a moment exploring the Queries.
In the query editor on the right, start by writing a simple query to fetch the name and date of the next SpaceX launch. Enter the following query:
{
launchNext {
mission_name
launch_date_utc
}
}Click on the Blue Query button to the right of the URL. You may need to click on the up “^” symbol to on the Response line in order to view the output.
Let’s continue by getting more data and details by including the rocket and the launch site. Enter the following query:
{
launchNext {
id
mission_id
mission_name
launch_date_utc
rocket {
rocket_name
}
launch_site {
site_name_long
}
}
}Click on Query and review the output.
GraphQL queries all the usage of Arguments/Variables within Queries. Update the previous query by adding an Argument. Enter the following query:
{
launch(id: "6243aec2af52800c6e91925d") {
mission_name
launch_date_utc
details
rocket {
rocket_name
}
launch_site {
site_name_long
}
}
}
Click on Query and review the output.
Let’s advance our GraphQL skills and adjust the queries using variables. Enter the following query:
query LaunchDetails($id: ID!) {
launch(id: $id) {
mission_name
launch_date_utc
details
rocket {
rocket_name
}
launch_site {
site_name_long
}
}
}Click on Variables and enter the following JSON:
{
"id": "6243aec2af52800c6e91925d"
}
Click on Query and review the output.
To get some more practice, try to write your own queries and explore the SpaceX API.
List the last 5 launches with their mission names and launch dates.
Retrieve details of a specific rocket by its ID, including its name, type, and stages.
Get the upcoming launches with their mission names and launch dates.
Open Firefox Browser from the navigation bar
Open the following URL: https://www.crcind.com/csp/samples/SOAP.Demo.cls?wsdl
You will see the WSDL document, which describes the methods available in the SOAP API and their parameters.
Open the Postman application. If Postman is still open from the previous task, you can skip step 1-4
A new window will open which will look like this:
select lightweight API client below the Account creation form.
An empty Workspace will open.
Create a new HTTP request by clicking on New at the left top and the select HTTP
Change the request type to POST and enter the URL https://www.crcind.com/csp/samples/SOAP.Demo.cls
Click on the “Headers” tab. Add 2 new headers with the following key/value pairs:
| Key | Value |
|---|---|
Content-Type | text/xml |
SOAPAction | http://tempuri.org/SOAP.Demo.GetByName |
Click on the “Body” tab. Select the raw option and enter the following XML:
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tem="http://tempuri.org">
<soapenv:Header/>
<soapenv:Body>
<tem:GetByName>
<!--Optional:-->
<tem:name>Solomon,Thelma J.</tem:name>
</tem:GetByName>
</soapenv:Body>
</soapenv:Envelope>
Click on Send and review the output. (Scroll down to find the details)
The GetByNameResponse contains the result of the GetByName method call.
The GetByNameResult contains the details of the person with the name Solomon,Thelma J.
The WSDL document describes other methods that you can experiment with. For example, you can try the AddInteger method.
Update the header SOAPAction according to the function you want to use.
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tem="http://tempuri.org">
<soapenv:Header/>
<soapenv:Body>
<tem:AddInteger>
<tem:Arg1>5</tem:Arg1>
<tem:Arg2>10</tem:Arg2>
</tem:AddInteger>
</soapenv:Body>
</soapenv:Envelope>
| Goal | In this lab you will explore more advanced API handling techniques. |
| Task | We will cover topics like OAuth and JWT tokens, API security, and API testing. |
| Verify task completion | If properly executed, the applications will return data as pictured below |
This will build upon the previous labs and require you to use the tools you have learned about. We will cover topics like OAuth and JWT tokens, API security, and API testing.
Open the Firefox Browser and navigate to the following URL: https://petstore.swagger.io/
Familiarize yourself with the Swagger UI layout. The interface is divided into several sections: the header, the API information, and the list of endpoints.
At the top, you will see general information about the API including the title, version, description, and terms of service. Note the available schemes (HTTP or HTTPS) and the host (petstore.swagger.io).
Scroll down to see a list of available endpoints categorized by functionality (e.g., pet, store, user). Each endpoint shows the HTTP method (GET, POST, PUT, DELETE), the path, and a brief description of what the endpoint does.
Click on an endpoint to see more details about it. For example, click on the GET /pet/findByStatus endpoint.
You will see a description of the endpoint, the parameters it accepts, and the responses it returns. You can also try out the endpoint by clicking on the Try it out button.
After executing the call, review the response directly in the Swagger UI. The response section will show the URL, the request parameters, the server response including the status code, response body, and headers.
Spend some time exploring the different endpoints and trying them out. Try different HTTP methods (GET, POST, PUT, DELETE) and explore how the API handles each request.
change into folder from Task1 where you have cloned the Flask application to and start it
cd simple_flask_auth
python3 app.py You should see that the flask application has successfully started and is listening on port 8000.
Open the Postman application by typing the following command in a terminal window. If Postman is still open from the previous task, you can skip step 1-4
PostmanA new window will open which will look like this:
select lightweight API client below the Account creation form.
An empty Workspace will open.
Create a new HTTP request by clicking on + at the top bar and enter the URL http://localhost:8000/api/v1/protected
Change the request type to POST and then click Send
You will receive a 403 Forbidden response. This is because the API requires a token to access it.
To keep it simple, only a specific header with a token need to be present in the request. This can be identified in the Flask application code.
@app.route('/api/v1/protected', methods=['POST'])
def protected():
if 'X-API-KEY' in request.headers and request.headers['X-API-KEY'] != 'VGhpcyBpcyBhIFNzZWNyZXQgdG9rZW4gd2hpY2ggc2hvdWxkIGJlIGhhbmRsZWQgdmVyeSBjYXJlZnVsbHkh':
return jsonify({"message": "ERROR: Unauthorized - This is a protected resource. Specify the secret token in the header to access it."}), 403
elif request.headers.get('X-API-KEY') != 'VGhpcyBpcyBhIFNzZWNyZXQgdG9rZW4gd2hpY2ggc2hvdWxkIGJlIGhhbmRsZWQgdmVyeSBjYXJlZnVsbHkh':
return jsonify({"message": "ERROR: Unauthorized - Please provide the secret token in the header."}), 403
elif request.headers['X-API-KEY'] == 'VGhpcyBpcyBhIFNzZWNyZXQgdG9rZW4gd2hpY2ggc2hvdWxkIGJlIGhhbmRsZWQgdmVyeSBjYXJlZnVsbHkh':
return jsonify({"message": "OK: Authorized"}), 200Configure the HTTP header X-API-KEY with the correct value identified in the Flask Python code.
| Key | Value |
|---|---|
X-API-KEY | VGhpcyBpcyBhIFNzZWNyZXQgdG9rZW4gd2hpY2ggc2hvdWxkIGJlIGhhbmRsZWQgdmVyeSBjYXJlZnVsbHkh |
You can now try to access the protected endpoint with the correct token. You should receive a 200 OK response.
In this module, we expanded on the previous module, by exploring and learning how to interact with the RESTful APIs on our simple Flask application. We also spent some time interacting with other popular APIs
Postman can only be used for RESTful API interactions. (True or False)
Error code 500 is returned when you attempt unauthorized interaction with a protected API (True or False)
In this section, we have discussed the benefits of using modern tiered applications. The below diagram highlights the architecture of a very simple Docker application which will be deployed on our Ubuntu host using Docker-Compose. We will interact with this application from the Kali host. Our goal is to better understand this architecture and how these different tiers interact with one another.
| Goal | Install application |
| Task | We will clone a simple, 3 tiered web application and use docker-compose to deploy it |
| Verify task completion | If properly executed, you should see that four containers are running |
For the purpose of this lab, we are going to use an application adapted from the excellent training found at this link. If you would like to dig deeper into how to create a 3 tiered application using Docker, go check it out. We will be using Docker-Compose to bring up a pre-configured Application.
According to IBM: Docker is an open-source platform that enables developers to build, deploy, run, update and manage containers.
Containers are standardized, executable components that combine application source code with the operating system (OS) libraries and dependencies required to run that code in any environment.
Containers simplify the development and delivery of distributed applications. They have become increasingly popular as organizations shift to cloud-native development and hybrid multicloud environments. For more information check out this link.
If you need help accessing Kali, refer back to Module 1: HTTP Fundamentals. The IP Address of the Kali server can be found by opening the Azure shell and typing cd api-and-websvc-fundamentals/terraform and then typing terraform output. Also, the terraform output command will have the public IP of the Ubuntu host, just in case you would like to log in from an ssh app or terminal on your laptop.
ssh labuser@10.0.0.15 when prompted for the password enter S3cur3P4ssw0rd123!Open the Kali clipboard by typing ctrl+shift+alt and selecting Text input
Paste in git clone https://github.com/fortidg/docker-compose-101.git
Right Click and select Paste Clipboard to put the text into the Kali terminal
You may have to type ctrl+shift+alt again to close the clipboard.
Hit enter to clone the repo
Go to the docker-compose-101 folder by typing cd docker-compose-101
At the prompt, type sudo docker-compose up.
The application will take a few minutes to come up and download all required packages. Once it is complete you should see something along the below lines, indicating that the sql server is ready.
database_1 | 2024-07-09T16:10:24.495277Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '9.0.0' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.Open a second terminal ssh labuser@10.0.0.15 enter password S3cur3P4ssw0rd123!
Let’s see what containers are running, by issuing the sudo docker ps -a command.
You will see a number of apps open.
Take note of the port numbers for the apps
| Goal | Inspect the application to determine what (if anything) is not working |
| Task | Use Firefox dev tools to inspect content. Use nano to fix it and re-inspect |
| Verify task completion | If properly executed, you should see the full content of the application rendered |
Now that we have the application up and running, let’s look around at the app and see if we can spot any issues
http://10.0.0.15:3000. You should see some text and a picturehttp://10.0.0.15:5000. You should see a “todo” list.At first glance, everything seems to be operating properly. We can see both the front end and the back end services. The back end is serving data from the Database service. Let’s take a closer look at the developer tools and determine if anything is missing.
Open Firefox from Kali, and “right click” on the window. Select **Inspect (Q)
Now browse to the front end service http://10.0.0.15:3000
Click on the Console tab. Notice that we see a “Cross-Origin Request Blocked” message regarding http://localhost:5000
We’ve determined that there is some content which is not being served properly to the front end. We know that the data is there from our first exercise above. Since we found the issue by interacting with the front end, let’s go check that first.
SSH to the Ubuntu server ssh labuser@10.0.0.15 enter password S3cur3P4ssw0rd123!
Navigate to the front end folder, type cd docker-compose-101/frontend
Now let’s look at the index.html page and see if we can find any reference to http://localhost:5000 by typing nano index.html
Use your arrow keys to navigate the cursor until you find it
If you would like a hint, see below
This bit of “script” code is telling the web client to fetch the data at http://localhost:5000. If we remember from our first exercise, port 5000 was returning data.
Why isn’t this working?
Ok, so how can we fix it? See if you can figure it out before checking the answer!
Use Nano to fix the code.
Depending on the method you decided on to fix the code, use Nano to update the Hosts file on Kali
sudo nano /etc/hosts10.0.0.15 appexample
Now we should be able to navigate to the page and see that our todo list from the Database has been rendered.
| Goal | Gain a better understanding of the Database Tier |
| Task | Use phpMyAdmin application to manage the database |
| Verify task completion | If completed properly, you should see changes made to the database reflected on the rendered web page. |
Now that we have explored the interaction between the Front End and Back End services, lets’ take a look at the Database portion of the Application. When the browser requests content from http://appexample:5000, a series of PHP scripts generate a SQL query which is sent to the Database service. The returned data is formatted into JSON and sent to the browser for inclusion in the page content.
The term PHP is an acronym for – Hypertext Preprocessor. PHP is a server-side scripting language designed specifically for web development. It is open-source which means it is free to download and use. It is very simple to learn and use. The file extension of PHP is “.php”.
If you would like to know more about PHP, W3 schools has a great tutorial.
This is a free tool written in PHP intended to provide a web GUI for the administration of MySQL Databases.
From the Kali Desktop, open Firefox and navigate to http://appexample:8080
If ```http://appexample:8080``` isn't resolving for you, go back and check the hints for the last task around hosts file editing.
You will be presented with a login screen. Enter todo_admin as the Username and enter password as the Password. Click login.
Now that we are logged in, let’s add some new data
From the left side menu, click on the + sign next to todo_app
Next click on todos. You should see the Database we are using for our app in the main window.
Now let’s add a new data point. Click on the tab labeled Insert
For _id add a value of 6
For todo add a value of I will spend the rest of the day learning to secure it all with Fortinet
Leave all other values as default and click Go
You should see a screen like below indicating that you have successfully inserted a new row
Now click on the Browse tab. You should see your new line at the bottom.
Finally, in a Firefox browser on Kali, navigate to http://appexample:3000. You should see the new data populated.
In this module, we built a 3 tiered application, including a Front End, Back End and Database. We learned how these three tiers interact with one another, by discovering and fixing errors on the Front End. We also made modifications to the Database and observed how these changes affected the end user experience.
The client browser only interacts with the Front End of any application (True or False)
Does modifying the Database have any impact on the Front End or Back End applications?
Tiered applications are less secure than monolithic applications (True or False)