HW#5 --- last modified November 23 2022 16:35:48.

Solution set.

Due date: Dec 5

Files to be submitted:
  Hw5.zip

Purpose: Experiment with web security exploits and their mitigations. To gain experience with XML, AJAX, and server-side Javascript.

Related Course Outcomes:

CLO2 -- Write schemas, DTDs, and style sheets for XML documents.

CLO3 -- Write server-side scripts that process HTML forms.

CLO4 -- Write client-side scripts that validate HTML forms.

CLO5 -- Develop and deploy web applications that involve components, web services, and databases.

Specification: For this homework you are going to implement a simple dating website using node.js and express.js or reactjs. This web app will have three main parts (1) a sign-in landing page, (2) an onboarding, set-up profile page, and (3) a refine date options components where users can see profiles and indicate that they want a profile more like this one, less like this one, or set up a date. For this homework, I will let you guys have more control over the look and feel of the UI as long it conforms to the items below:

1. First, so we can get some practice with XML, I want you to make an XML DTD info_card.dtd for a language used to store a people's, names, addresses, and quiz responses. Store this file and an example XML file test.xml that validates according to this DTD in a subfolder named XML of your Hw5.zip folder. You can use OxygenXML to test for validation.
2. Your project should have a readme.txt file listing team mates. It should have a configs sub-folder, containing a CreateDB.js file used to create the database tables used by your project. It will be run from the command line by the grader using the syntax:

   node CreateDB.js
   

   before the grader grades the rest of your project. Your app should bind to port 8888 by default, but this should be configurable in a file Config.js in the same folder. The project will then be run by the grader using either the syntax:

   node index.js
   

   if you decide to use express, or

   npm start
   

   if you decide to use reactjs.
3. The sign-in page (if you are using reactjs, you have a single page where what you see changes), should have a user name and password form to allow a user to log in. It should also have two links: Log-in Vulnerable, and Create Account.
4. Log-in Vulnerable should show the log in page, but this version should be vulnerable to click-jacking; whereas, the original version should not be. You should also have a test to demonstrate that it is vulnerable (indicate how to test in your readme.txt file).
5. The Create Account/onboarding, set-up profile page should get the following information from the user: (a) full name, email (can be used for login), answers to 10 yes-no questions about dating preferences (think of as like a Cosmo quiz). The collected data should be stored in tables in your database.
6. After a user fills in their profile and the data is saved, the user should be taken back to the log in page and the user can then log in with this information. Similarly, if the user had already set up an account, when they come back to the log in page, they can sign in.
7. For users with an account, signing in takes one to the a refine date options page. This page should have a sign out link on it, so user's can sign out if they want.
8. At least one item on this page should make use of either an XHR request that you directly code, or make use of a Fetch API request that you code.
9. The refine date option page should have a title and h1 header like "Suggested Date". Beneath this it should give the name of some account holder satisfying: (a) they aren't the same person as the current user, (b) they haven't been suggested previously, (c) they are the "best choice" from those who haven't been suggested previously. If no suggests remain, have a page indicating sorry no person left to suggest and offer to reset the list of who has already been viewed.
10. To choose the "best choice", we imagine that each user account has a 10 dimensional floating point vector based on quiz answers. Initially, the ith component of this vector has value 1 if they answered yes to the ith quiz question and 0 otherwise. The vector is then normalized to make it a unit vector. The best choice is the user whose vector is closest using euclidean distance to the current user subject to (a) and (b).
11. The refine date option page should have more like this one, less like this one, and set up date links. The more like this link should take the current user's vector, and add .1 times the suggestion vector to it, renormalize the result, and save this as the new current user vector. The less like this link current user's vector and subtract .1 times the suggestion vector to it, renormalize the result, and save this as the new current user vector (if you want to add a decay exponent to the .1 that's okay).
12. The set up date link, should display the suggestions email address so the use can email the person to set up a date.

Point Breakdown