CS5331 Submission

.gitignore

@@ -0,0 +1,3 @@
+*.pyc
+*.swp
+.pytest_cache/

Dockerfile

@@ -5,10 +5,26 @@ RUN apt-get install -y apache2
 RUN pip install -U pip
 RUN pip install -U flask
 RUN pip install -U flask-cors
+RUN pip install -U mongoengine
+RUN pip install -U pymongo
+RUN pip install -U flask-bcrypt
+RUN \
+  apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5 && \
+  echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-3.6.list && \
+  apt-get update && \
+  apt-get install -y mongodb-org && \
+  rm -rf /var/lib/apt/lists/*
+VOLUME ["/data/db"]
+VOLUME ["/log/mongodb.log"]
 RUN echo "ServerName localhost  " >> /etc/apache2/apache2.conf
 RUN echo "$user     hard    nproc       20" >> /etc/security/limits.conf
 ADD ./src/service /service
 ADD ./src/html /var/www/html
 EXPOSE 80
 EXPOSE 8080
+# Expose ports for testing from host only, remove this for deployment
+#   - 27017: process
+#   - 28017: http
+# EXPOSE 27017
+# EXPOSE 28017
 CMD ["/bin/bash", "/service/start_services.sh"]

README.md

@@ -85,59 +85,105 @@ If a response is received, you're good to go.
 
 ## Screenshots
 
-Please replace the example screenshots with screenshots of your completed
-project. Feel free to include more than one.
+Login Page
 
-![Sample Screenshot](./img/samplescreenshot.png)
+![Login Page](./img/login.png)
+
+Register User
+
+![Login Page](./img/register.png)
+
+Create Diary Entry
+
+![Create Diary Entry](./img/createentry.png)
+
+View Public Entries
+
+![View Public Entries](./img/viewpublicentries.png)
+
+View My Personal Entries
+
+![View My Personal Entries](./img/viewmyentries.png)
+
+View Diary Entry Details and Modify Permissions
+
+![View Diary Entry Details and Modify Permissions](./img/viewentrydialog.png)
+
+Delete Entry
+
+![Delete Entry](./img/deleteentry.png)
 
 ## Administration and Evaluation
 
 Please fill out this section with details relevant to your team.
 
 ### Team Members
 
-1. Member 1 Name
-2. Member 2 Name
-3. Member 3 Name
-4. Member 4 Name
+1. Ngo Kim Phu
+2. Choo Rui Bin
+3. Ouyang Danwen
+4. Chai Wai Aik Zander
 
 ### Short Answer Questions
 
 #### Question 1: Briefly describe the web technology stack used in your implementation.
 
-Answer: Please replace this sentence with your answer.
+The web app is written on Python Flask framework that connects to a MongoDB database and the frontend web server is hosted on Apache.
+The frontend is designed using HTML, Bootstrap 4 and JavaScript (jQuery 3.3.1).
 
 #### Question 2: Are there any security considerations your team thought about?
 
-Answer: Please replace this sentence with your answer.
+We had identified the following security considerations, however it had been stated in the assignment brief that there is no need to implement the actual security measures to counter these issues.
+
+Implemented:
+- Password salted-hashing using bcrypt
+- Client-side XSS sanitisation using DOMPurify
+
+Considered but not implemented:
+- JWT for better management of the authentication token
+- Basic Auth tokens to prevent direct access to the API endpoints
+- Enhanced challenge/response password authentication to prevent login timing attacks
+- CSRF tokens
+- Server-side XSS sanitisation
 
 #### Question 3: Are there any improvements you would make to the API specification to improve the security of the web application?
 
-Answer: Please replace this sentence with your answer.
+Include a Basic Auth token to be sent along with every RESTful API call; this token will be generated upon login and subsequently validated on the server-side. This prevents direct access to the API endpoints (without the need for a user login), which otherwise represents a potential information leak.
 
 #### Question 4: Are there any additional features you would like to highlight?
 
-Answer: Please replace this sentence with your answer.
+The generated cookie has an expiry time of 2 hours to reduce the possibility of replay attacks. However, this can be deemed insecure (See Question 5).
 
 #### Question 5: Is your web application vulnerable? If yes, how and why? If not, what measures did you take to secure it?
 
-Answer: Please replace this sentence with your answer.
+One potential weakness is in the cookie management - currently we are still using the default JavaScript cookie functions. Since these are implemented at the client side, a better implementation would be to use JWT. However, it was assured that we would not have to do its implementation in this current assignment.
+
+Another vulnerability is the lack of SSL. Due to that, all web traffic is sent / received in the clear, allowing all kinds of MITM attacks to occur.
+
+Our usage of DOMPurify provides client-side sanitisation for our web app. However, it is not a foolproof way. For a more rigorous defense (e.g. against persistent XSS), server-side sanitisation should be employed as well.
 
 #### Feedback: Is there any other feedback you would like to give?
 
-Answer: Please replace this sentence with your answer.
+Logging should be done on the server-side to track all the significant actions made by all the users of the web app.
+A framework/tool we could use to test our final webapp would be really appreciated.
+The API should also consider RESTful features like: correct http verbs for end-points (GET for idempotent, resource-info-acquiring end-points, DELETE for resource deletion...), response status codes that make more sense (4xx for client-side errors), maybe a header instead of a field for the auth token...
 
 ### Declaration
 
 #### Please declare your individual contributions to the assignment:
 
-1. Member 1 Name
-    - Integrated feature x into component y
-    - Implemented z
-2. Member 2 Name
-    - Wrote the front-end code
-3. Member 3 Name
-    - Designed the database schema
-4. Member 4 Name
-    - Implemented x
-
+1. Ngo Kim Phu
+  - Managed project, GitHub organization, repository
+  - Configured CircleCI continuous integration for quality control
+  - Wrote the back-end routing and logic code
+2. Choo Rui Bin
+  - Wrote the front-end code
+  - Integrated the RESTful API into the front-end
+  - Wrote the documentation
+3. Ouyang Danwen
+  - Designed the Docker configuration
+  - Designed the database schema
+  - Wrote the back-end db code
+4. Chai Wai Aik Zander
+  - Wrote the front-end code
+  - Integrated the RESTful API into the front-end

run.sh

@@ -8,5 +8,6 @@ fi
 TEAMID=`md5sum README.md | cut -d' ' -f 1`
 docker kill $(docker ps -q)
 docker rm $(docker ps -a -q)
+docker volume rm $(docker volume ls -qf dangling=true)
 docker build . -t $TEAMID
 docker run -p 80:80 -p 8080:8080 -t $TEAMID

src/html/css/home.css

@@ -0,0 +1,14 @@
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    background-color: white;
+    padding: 0px 0;
+    font-size: 16px;
+    border-radius: 50%;
+    border-color: black;
+}
+
+.jqueryDialogNoTitle .ui-dialog-titlebar { 
+    display: none; 
+}

src/html/css/index.css

@@ -0,0 +1,47 @@
+.wrapper {    
+	margin-top: 80px;
+	margin-bottom: 20px;
+}
+
+.form-signin {
+  max-width: 420px;
+  padding: 30px 38px 25px;
+  margin: 0 auto;
+  background-color: #eee;
+  border: 3px dotted rgba(0,0,0,0.1);  
+  }
+
+.form-signin-heading {
+  text-align:center;
+  margin-bottom: 30px;
+}
+
+.form-control {
+  position: relative;
+  font-size: 16px;
+  height: auto;
+  padding: 10px;
+}
+
+input[type="text"] {
+  margin-bottom: 0px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+input[type="password"] {
+  margin-bottom: 20px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.colorgraph {
+  height: 7px;
+  border-top: 0;
+  background: #c4e17f;
+  border-radius: 5px;
+  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
+  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
+  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
+  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
+}