CS5331 Submission

.gitignore

@@ -0,0 +1,3 @@
+*.pyc
+.ipynb_checkpoints
+.idea

Dockerfiles/app/Dockerfile

@@ -0,0 +1,20 @@
+FROM ubuntu:latest
+
+RUN sed -i 's/archive\.ubuntu\.com/ap-southeast-1\.ec2\.archive\.ubuntu\.com/g' /etc/apt/sources.list &&\
+    apt update
+ADD setup.sh requirements.txt /
+RUN ls
+RUN sh setup.sh
+#RUN apt-get install -y python-pip
+#RUN pip install -U pip
+#RUN pip install -U flask
+#RUN pip install -U flask-cors
+#RUN pip install -U pymongo
+#RUN pip install -U flask-sqlalchemy
+#RUN pip install -U flask-mongoengine
+
+WORKDIR /usr/src/app
+
+EXPOSE 8080
+# figure out how to change this based on ENV
+CMD ["python", "./service/app.py"]

Dockerfiles/app/Dockerfile-dev

@@ -0,0 +1,13 @@
+FROM ubuntu:latest
+
+RUN sed -i 's/archive\.ubuntu\.com/ap-southeast-1\.ec2\.archive\.ubuntu\.com/g' /etc/apt/sources.list &&\
+    apt update
+ADD setup.sh requirements.txt /
+RUN sh setup.sh
+RUN rm setup.sh requirements.txt
+
+WORKDIR /usr/src/app
+
+EXPOSE 8080
+# figure out how to change this based on ENV
+CMD ["sh", "-c", "FLASK_DEBUG=1 FLASK_APP=/usr/src/app/service/flask_app.py python -m flask run -p 8080 -h 0.0.0.0"]

Dockerfiles/app/Testfile

@@ -0,0 +1,9 @@
+FROM python:2.7
+
+ADD requirements.txt /
+
+RUN pip install -r requirements.txt --user
+RUN pip install pytest pytest-cov pytest-flask
+
+COPY . /usr/src/app
+WORKDIR /usr/src/app

Dockerfiles/web/Dockerfile

@@ -0,0 +1,11 @@
+FROM ubuntu:latest
+
+RUN apt-get update \
+   && apt-get install -y apache2
+
+RUN echo "ServerName localhost  " >> /etc/apache2/apache2.conf
+RUN echo "$user     hard    nproc       20" >> /etc/security/limits.conf
+
+WORKDIR /var/www/html
+EXPOSE 80
+CMD rm -f /var/run/apache2/apache2.pid && apachectl -D FOREGROUND

README.md

@@ -96,48 +96,71 @@ 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. Chen Hui
+2. Kyaw Zawlin
+3. Shi Qing
+4. Tan Xue Si
 
 ### Short Answer Questions
 
 #### Question 1: Briefly describe the web technology stack used in your implementation.
 
-Answer: Please replace this sentence with your answer.
+Answer:
+1. HTML, JS, CSS for front-end
+2. Apache to host web server
+3. MongoDB for database,mongoengine as our orm framework
+4. Python + Flask for backend API
+5. pyTest for testing framework
+
+All contained within their individual docker containers.
 
 #### Question 2: Are there any security considerations your team thought about?
 
-Answer: Please replace this sentence with your answer.
+Answer: 
+1. Since we use http instead of https, password is transmitted in plaintext. The password is hashed and salted before storing into the database.
+2. Salting prevent rainbow table type attacks from succeeding and recovering the original plaintext even when our database is compromised.
+3. There may be multiple users with the same password, thus the password is salted with both the user's username and password before hash3ng to ensure that the hashed password is not the same for users with the same password.I
+4. For user authentication, token is used and this method is not safe since a hacker may be able to get his hands on one token and use it to authenticate as a legitimate user. We include a check for the user's IP address during token authentication to make sure that this is the user who owns the token.
+5. In the diary delete and permission adjust API, only diary id and token are given. An attacker may want to delete a diary which does not belong to them. We check the token owner and diary owner before processing the diary. An alternative method such as openid where token is encrypted and can contain private data fields, our method is slightly better because we do not have protection of https.
+6. Our app is not vulnerable to typical sql injection attacks as 1) we don't use sql or directly execute db queries and 2) we use an orm framework as our database interface which provides both security and ease of use.
 
 #### 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.
+Answer: 
+1. Hashg the passwrod on the client side and we send the hashed password. The server side can hash again with the salt and store the double hashed result in the db. This weay we can avoid plain text transmission of passwords.
+2. For diary delete and permission adjust, processing a group of diaries by given ids rather than one id would be a good idea
+3. Better response codes for different responses instead of just returning 200 with json error fields
 
 #### Question 4: Are there any additional features you would like to highlight?
 
-Answer: Please replace this sentence with your answer.
+Answer: 
+1. In order to develop this app in the future, we added a debug mode which can test the APIs and show the status of the database. It is very convenient.
+2. We also have a full test suite utilzing standard scalable testing framework pytest.
 
 #### 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.
+Answer: 
+1. Yes. Data (password, token, text...) is not encrypted during the transmission. Hacker can obtain it via man in the middle attack. We can secure it via https protocol. However,since api require us to provide http. We can implement this by proxying flask traffic through apache server.
+2. There is no limitation for response times. This app is vulnerable under flooding attack.
 
 #### Feedback: Is there any other feedback you would like to give?
 
-Answer: Please replace this sentence with your answer.
+Answer: Docker is fun!
 
 ### 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
+1. Chen Hui
+    - Implemented diary and user API endpoints
+    - Implemented additional test cases
+2. Kyaw Zawlin
+    - Designed database schema
+    - Setup app and database interfaces
+3. Shi Qing
+    - Front-end design
     - Wrote the front-end code
-3. Member 3 Name
-    - Designed the database schema
-4. Member 4 Name
-    - Implemented x
+4. Tan Xue Si
+    - Implemented test runner
+    - Dockerize and docker-compose containers
 

clean_docker.sh

@@ -0,0 +1,4 @@
+#/bin/sh
+
+sudo docker stop $(sudo docker ps -a -q)
+sudo docker rm $(sudo docker ps -a -q)

dev.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -e
+sudo docker-compose -f docker-compose-dev.yml build
+sudo docker-compose  -f docker-compose-dev.yml up

docker-compose-dev.yml

@@ -0,0 +1,25 @@
+version: '2'
+services:
+    app:
+        build:
+            context: ./
+            dockerfile: Dockerfiles/app/Dockerfile-dev
+        ports:
+            - "8080:8080"
+        depends_on:
+            - mongodb
+        volumes:
+            - ./src:/usr/src/app
+
+    web:
+        image: apache
+        build: Dockerfiles/web
+        ports:
+            - "80:80"
+        volumes:
+            - ./src/html:/var/www/html
+
+    mongodb:
+        image: mongo:latest
+        volumes:
+            - /data

docker-compose-test.yml

@@ -0,0 +1,28 @@
+version: '2'
+services:
+    tests:
+        build:
+            context: ./
+            dockerfile: Dockerfiles/app/Testfile
+        links:
+            - mongodb
+            - app
+
+    app:
+        build:
+            context: ./
+            dockerfile: Dockerfiles/app/Dockerfile-dev
+        ports:
+            - "8080:8080"
+        depends_on:
+            - mongodb
+        volumes:
+            - ./src:/usr/src/app
+
+    mongodb:
+        image: mongo:latest
+
+        ports:
+            - "27017:27017"
+        volumes:
+            - /data

docker-compose.yml

@@ -0,0 +1,23 @@
+version: '2'
+services:
+    app:
+        build: Dockerfiles/app
+        ports:
+            - "8080:8080"
+        depends_on:
+            - mongodb
+        volumes:
+            - ./src:/usr/src/app
+
+    web:
+        image: apache
+        build: Dockerfiles/web
+        ports:
+            - "80:80"
+        volumes:
+            - ./src/html:/var/www/html
+
+    mongodb:
+        build: Dockerfiles/mongodb
+        volumes:
+            - /data

drop_db.py

@@ -0,0 +1,6 @@
+
+from flask_mongoengine import MongoEngine
+from mongoengine import connect
+db = connect('db_test',host='mongodb')
+db.drop_database('db_test')
+db.close()

requirements.txt

@@ -0,0 +1,5 @@
+flask
+pymongo
+flask-sqlalchemy
+flask-cors
+flask-mongoengine

run.sh

@@ -8,5 +8,7 @@ fi
 TEAMID=`md5sum README.md | cut -d' ' -f 1`
 docker kill $(docker ps -q)
 docker rm $(docker ps -a -q)
-docker build . -t $TEAMID
-docker run -p 80:80 -p 8080:8080 -t $TEAMID
+#docker build . -t $TEAMID
+#docker run -p 80:80 -p 8080:8080 -t $TEAMID
+docker-compose -f docker-compose-dev.yml -p $TEAMID build
+docker-compose -f docker-compose-dev.yml -p $TEAMID up

setup.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+set -e
+apt install python-pip -y
+pip install --upgrade pip
+pip install -r requirements.txt --user

src/html/diary/create.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Create Diary</title>
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    </head>
+    <body>
+        <div class="col-sm-12"><h1>Create Diary</h1></div>
+
+        <form class="container" name="diaryForm" onsubmit="return createDiary()">
+            <div class="form-group row">
+                <label class="col-sm-2 col-form-label">Title: </label>
+                <div class="col-sm-10"><input class="form-control" type="text" name="title" required/></div>
+            </div>
+
+            <div class="form-group row">
+                <label class="col-sm-2 col-form-label">Text: </label>
+                <div class="col-sm-10"><textarea class="form-control" name="text" required></textarea></div>
+            </div>
+
+            <div class="form-group row">
+                <label class="col-sm-2 col-form-label">Public: </label>
+                <div class="col-sm-10">
+                    <input type="radio" name="public" value="true">True<br>
+                    <input type="radio" name="public" value="false" checked>False
+                </div>
+            </div>
+
+            <div class="form-group row">
+                <input class="btn btn-primary offset-sm-2 col-sm-4" type="submit" value="Submit">
+            </div>            
+        </form>
+        <div id="response_status">
+        </div>
+        <div id="demo_dbg">
+        </div>
+        <script src="./create.js"></script>
+    </body>
+</html>

src/html/diary/create.js

@@ -0,0 +1,52 @@
+var API_ENDPOINT = "http://localhost:8080"
+
+function ajax_post(url, data, callback) {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 201) {
+            console.log('responseText:' + xmlhttp.responseText);
+            try {
+                var data = JSON.parse(xmlhttp.responseText);
+            } catch(err) {
+
+		        document.getElementById("demo_dbg").innerHTML = err.message + " in " + xmlhttp.responseText;
+                console.log(err.message + " in " + xmlhttp.responseText);
+                return ;
+            }
+            callback(data);
+        }else{
+
+		    document.getElementById("demo_dbg").innerHTML = xmlhttp.responseText;
+        }
+    };
+
+    xmlhttp.open("POST", url, true); 
+    xmlhttp.setRequestHeader("Content-type", "application/json");
+    xmlhttp.send(JSON.stringify(data));
+}
+
+function createDiary() {
+    var title = document.forms["diaryForm"]["title"].value;
+    var text = document.forms["diaryForm"]["text"].value;
+    var public = document.forms["diaryForm"]["public"].value;
+    var token = localStorage.getItem("token");
+
+    var data = {
+        'title': title,
+        'text': text,
+        'token': token,
+        'public': (public === "true")? true: false
+    }
+
+    ajax_post(API_ENDPOINT + '/diary/create', data, function(data) {
+        if (data.status) {
+            document.getElementById("response_status").innerHTML = "Create diary success";
+        }
+        else {
+            document.getElementById("response_status").innerHTML = "Create diary failed";
+        }
+    });
+    return false;
+}
+
+

src/html/diary/private-list.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>My Diary List</title>
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    </head>
+    <body>
+        <div class="col-sm-12"><h1>My Private Diary List</h1></div>
+
+        <div id="my-diary-list" class="container">
+        </div>  
+        <div id="response_status">
+        </div>
+        <div id="demo_dbg">
+        </div>
+        <script src="./private-list.js"></script>
+    </body>
+</html>