[Solved] CSE312 Homework3-Dynamic Site

You can host content with the server youve written in HW1/2. Now its time for your users to send content to your server to be shared with other users. As you do this, there are many security concerns that will arise since you cannot trust that every user will act in good faith.

Replace your index.html with the one provided in the sample site and host it at the root path /. If you created a custom page in the bonus for HW2, you can add these two forms to your page. You may also modify the forms as much as youd like as long as both forms accept at least 2 inputs and the second accepts file uploads.

Caution: There is a significant increase in difficulty from the first 2 assignments. Please start early and manage your time accordingly.

Objective 1: Text Form

Add a form to your home page (The HTML you serve at the root path /) that allows the user to input at least 2 values with at least one text input. You have full freedom to design this form and if you created your own site for the bonus objective in HW2 you should create a form that fits your page. If you dont want to create your own form, feel free to use this sample form. You may cut and paste this into your submission.

<form action=/comment id=comment-form method=post enctype=multipart/form-data><label for=text-form-name>Name: </label><input id=text-form-name type=text name=name><br/><label for=form-comment>Comment: </label><input id=form-comment type=text name=comment><input type=submit value=Submit></form>

Note: This sample form sends a multipart/form-data POST request. You may change this to anything that still provides the correct functionality for the user, though it is recommended that you use multipart/form-data since you will need to use it for image uploads.

When a user submits this form, your server must store the submitted data and respond with a confirmation that contains the user inputted values. Example: Using the sample form, your server could respond with Thank you {{name}} for your comment of {{comment}}. This response may be text/plain or text/html. After completing objective 2, you may change this response to a 301 redirect to your homepage.

Note: This objective implies that you will store all form submissions on your server. Storing them in data structure is fine.

Security: You must escape any HTML in the users submissions. Since your users can submit any text they want, a malicious user could submit HTML tags that attacks other users. You cannot allow this. You must escape any submitted HTML so it displays as plain text instead of being rendered by the browser.

Testing Procedure

1. Start your server using Docker
2. Open a browser and navigate to http://localhost:<local_port>/
3. Find the form without a file upload input and submit it with text including HTML
4. Verify that the submitted data is displayed somewhere on the page that loads after submission
5. Security: Verify that the submitted HTML displays as text and is not rendered as HTML

Objective 2: Hosting All Text Form Data

Add the data of all of the form submissions from objective 1 to your home page. You should convert the HTML of your home page to a template if you havent already. Use your template to add all of the stored form submissions to the page in any format.

Testing Procedure

1. Start your server using Docker
2. Open a browser and navigate to http://localhost:<local_port>/
3. Find the form without a file upload input and submit it several times, including at least once with text including HTML
4. Verify that all of the submitted data is displayed somewhere on the home page
5. Security: Verify that the submitted HTML displays as text and is not rendered as HTML

Objective 3: Image Uploads

Add a form to your home page that allows the user to upload an image and at least 1 other input. You have full freedom to design this form and if you created your own site for the bonus objective in HW2 you should create a form that fits your page. If you dont want to create your own form, feel free to use this sample form. You may cut and paste this into your submission.

<form action=/image-upload id=image-form method=post enctype=multipart/form-data><label for=form-file>Image: </label><input id=form-file type=file name=upload><br/><label for=image-form-name>Caption: </label><input id=image-form-name type=text name=name><input type=submit value=Submit></form>

When a user submits this form, your server must save the uploaded file and store the submitted data. Your server will respond with a confirmation page that contains the uploaded image and caption. After completing objective 4, you may change this response to a 301 redirect to your homepage.

It is ok if your site only handles .jpg images and assumes that every file upload is a .jpg file. You can test your uploads using the image files from HW2.

For full credit your server must handle large uploads that will overflow your buffer. A maximum of 2 points will be awarded for a server that doesnt accept arbitrarily large files.

Security: Dont allow the user to request arbitrary files on your server machine. Starting with this objective, you will be hosting content at paths that cannot be hardcoded since you dont know what images will be uploaded to your site. Even if you replace the file names with your own naming convention (eg. image1.jpg image2.jpg) you still dont know how many images will be uploaded. This means that you must accept some variable from the user that you will use to read, and send, a file from your server. You must ensure that an attacker cannot use this variable to access files that you dont want them to access.

Testing Procedure

1. Start your server using Docker
2. Open a browser and navigate to http://localhost:<local_port>/
3. Upload one of the images from the HW2 sample site using the form that accepts file uploads
4. Verify that the image and caption are displayed in the servers response
5. Upload a .jpg image that is larger than your buffer
6. Verify that the image and caption are displayed in the servers response
7. Security: Attempt to use your file hosting path to access a non-image file from your server. Verify that this is not possible
8. Security: Verify that submitted HTML displays as text and is not rendered as HTML

Objective 4: Hosting All Images

Display all of the images and captions uploaded through the feature in objective 3 to your home page. Use your template to add all of the stored images and captions to the page in any format of your choosing.

Testing Procedure

1. Start your server using Docker
2. Open a browser and navigate to http://localhost:<local_port>/
3. Upload several of the images from the HW2 sample site using the form that accepts file uploads
4. Verify that all of the submitted images and captions appear somewhere on the home page
5. Security: Verify that the submitted HTML displays as text and is not rendered as HTML

Bonus Objective: XSRF Tokens

Add randomly generated XSRF tokens to each of your forms. If a form submission is received that does not contain one of your tokens, do not save the submitted data and respond with a 403 Forbidden response notifying the user that their submission was rejected.

Testing Procedure

1. Start your server using Docker
2. Open a browser and navigate to http://localhost:<local_port>/
3. Inspect the HTML of one of forms and verify that there is a CSRF token included somewhere as part of the form
4. Refresh the page and verify that the token is different
5. Modify this token in any way
6. Submit the form
7. Verify that the response from the server had a code of 403 and the browser displays a message that the request was rejected
8. Navigate to the home page and verify that the submitted data does not appear on the page