Security Control Inventory Web App - Local Storage

• 🔨 Build a web app with local storage using HTML, Javascript, and CSS.
  • Add and update your security controls with ease through this UI web page

Pre Steps

• Open Visual Studio to organize files and make edits (download if not already installed)

  • 

• Sync files within a specified folder with Git repo and enable auto-save

  • 

• Ensure live server extension is installed for the dev local server

  • 

• Reference bootstrap open-source front-end framework code for pre-design and pre-built components for javascript

  • Get started with Bootstrap

Create Files for the Web App

• Create an HTML file

  • This HTML code is a web page for this Security Control Inventory application. It uses Bootstrap for styling and includes a form to enter control details, action buttons for updating controls, and a table to display control information. The page integrates custom CSS for additional styling and relies on JavaScript functions to manage data interactions.

• Create a Javascript file

  • validateForm(): Validates form fields for completeness, alerts for missing information, and returns true if valid, false otherwise.

    • 
    • 
    • 
    • 

  • showData(): Populates HTML table with control information, retrieving data from local storage.

    • 

  • AddData(): Adds a new control to controlList if form is valid, checks for duplicate Main Control IDs, updates local storage, and refreshes table.

    • 
    • 

  • deleteData(index): Deletes a control at specified index, confirming deletion before updating.

    • 

  • updateData(index): Enables control data editing in the UI, highlights selected row, disables delete buttons, updates controlList after validation, refreshes table, and clears form on successful update.

    • 

  • downloadCSV(): Creates CSV data from HTML table, generates downloadable CSV file, and releases object URL after download.

    • 

• Create a CSS file

  • This CSS script structures the visual design of the Security Control Inventory web page by defining a dark gray background with white text, styling the table with dark headers and rows, and incorporating visual cues for disabled buttons and edited rows, contributing to a cohesive and user-friendly interface.

Dockerize this app

• 🐳 Deploy this app using Docker
• 

1. Download and install Docker Desktop for your OS from Docker's official website: https://docs.docker.com/engine/install/.

2. Add a docker file to the folder # Base image for a web server FROM httpd:2.4

   # Copy your web app files to the container's document root
   COPY . /usr/local/apache2/htdocs/
   
   # Expose port 80 for the web server
   EXPOSE 80
   

3. build a docker base image by running this command in the folder

   docker build -t my-security-app .

4. start the container by running this command in the folder

   docker run -d -p 8080:80 my-security-app

5. Access the app through http://localhost:8080 in the browser

Host this app in AWS

• ☁️ Deploy this app using AWS
• 

1. Login to AWS console
2. create S3 bucket
3. Load files into S3 bucket
4. Update permissions of the bucket policy (see allow all permissions below)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::security-controls-inventory/*"
        }
    ]
}

6. Enable static website hosting and name index document: index1.html
7. access site: http://security-controls-inventory.s3.us-east-2.amazonaws.com/CRUD%20App/index.html