Module 8: Web Security - Single Origin Policy

  • This module requires that you work in pairs. However, please put your answers in your individual GitHub repository.
  • Put your answers in the README.md file in the GitHub repository.
  • Github Classroom Link: https://classroom.github.com/a/MdiCeWmP

Important Note:

In the following instructions, you must replace the # sign with the server number assigned to you for this module. For example, if your number is 4 then spiderwebdev#.xyz should be replaced with spiderwebdev4.xyz

Introduction

This module is designed to introduce the basics of web security using an Apache web server on Ubuntu Linux and the fundamentals of html, javascript, and cookies.

Getting familiar with the web servers

The servers are a newly provisioned Virtual Machines (VMs) with a LAMP stack software bundle installed. LAMP (Linux, Apache, MySQL, PHP/Python) is an acronym denoting one of the most common software stacks for the web's most popular applications.

Step 1. In a browser window navigate to the URLs of your assigned servers:

https://spiderwebdev#.xyz
https://attackwebdev#.xyz

Once loaded read the initial out of the box index.html page shown in the browser.

Step 2.

Login via ssh to your web servers.

$ ssh spiderwebdev#
$ ssh attackwebdev#

Step 2.

Once you've logged into the server. Verify that the apache2 web server is running. Press q or type Ctrl-C to return to the prompt.

$ sudo systemctl status apache2

Step 3.

Navigate to the /var/www/html directory. And list the files. This is the home folder for the web content that is served by the Apache web server. Notice that the index.html is the same as what you read above. When using more command, use the space bar to go to the next page.

$ cd /var/www/html
$ ls
$ more index.html

Step 4.

Create your own home page. You can work with nano or VSCode connecting remotely.

$ sudo rm index.html
$ sudo chmod 777 /var/www/html
$ nano index.html

For spiderwebdev#.xyz add the following to index.html:

<html>
  <body>
    <h1>Welcome to SpiderWebDev</h1>
  </body>
</html>

For attackwebdev#.xyz add the following to index.html

<html>
  <body>
    <h1>Welcome to AttackWebDev</h1>
  </body>
</html>

Step 5.

Refresh your browser to verify that your changes are shown on the web.

https://spiderwebdev#.xyz
https://attackwebdev#.xyz

Step 6.

Copy the files in the repository folder SpiderWebDev to the /var/www/html folder on spiderwebdev#.xyz.

Copy the files in the repository folder AttackWebDev to the /var/www/html folder on attackwebdev#.xyz.

Edit each file and replace spiderwebdev#.xyz with your number. For example, spiderwebdev4.xyz

Step 8.

Open the web developer tools in your browser.

Step 9.

Refresh the pages:

https://spiderwebdev#.xyz
https://attackwebdev#.xyz

Note the network traffic in the Network tab.

Step 10.

Click on the link "Cross origin request to attackwebdev" and then click the button "Send Ajax".

What error is shown in the Network tab of the browser tools?

Step 11.

On attackwebdev#.xyz modify the file getdata.php uncomment the line.

#header("Access-Control-Allow-Origin: https://spiderwebdev#.xyz");

change to (Don't forget to modify the #)

header("Access-Control-Allow-Origin: https://spiderwebdev#.xyz");

Step 12.

Click on the link "Cross origin request to attackwebdev" and then click the button "Send Ajax". The cross site request should now work correctly.