Building A Secure Note-Taking App: With HTML, CSS, and Javascript

Note-taking apps have exploded in popularity over the past decade. Giants like Evernote, OneNote, and Google Keep make it easy to digitally save personal thoughts, ideas, and memories.

However, concerns around data privacy have increased, with these apps storing troves of private information in the cloud.

This presents an opportunity for developers to build a secure, encrypted note-taking app to give users peace of mind. By using technologies like HTML, CSS, and JavaScript on the front end and encryption on the back-end, it's possible to create an app that keeps data private while still usable and accessible.

In this article, we'll explore the landscape of note-taking apps, outline how to build secure client-side and server-side functionality, discuss challenges around encryption, and provide best practices for a privacy-first note app. Let's dive in!

Note-Taking App Usage and Privacy Concerns

The note-taking app market has boomed, with an estimated 600 million people using these apps in 2022. Evernote leads with over 250 million users, followed by OneNote, Google Keep, and others. Annual revenues for top note apps exceed $500 million.

Up to 68% of note app users store personally identifiable information like passwords, addresses, and credit card numbers. This has led to growing worries over data privacy. A 2022 survey found that 80% of people were concerned their sensitive data may be hacked, leaked, or exploited by note app companies.

Indeed, note apps have suffered several embarrassing breaches. In 2016 over 68 million Dropbox accounts were compromised with encrypted passwords stolen.

In 2020, Evernote had to reset user passwords after detecting unauthorized access to its network.

Note apps can leave user data vulnerable without adequate encryption and security measures.

Prerequisites

Basic knowledge of HTML, CSS, and Javascript
Code Editor

To get started, fork the repo from here and follow along.

Building the Note App Front-end

The first step in creating a secure note app is building an intuitive front-end interface using standard web technologies. HTML provides the content structure and semantic tags to organize the UI into logical sections:

<!DOCTYPE html>
<html>
<head>
  <title>Secure Notes</title>

  <!-- CSS stylesheet -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <!-- Top navigation bar -->
  <nav>
    <div class="logo">Secure Notes</div>
    <ul>
      <li><a href="#">My Notes</a></li>
      <li><a href="#">Notebooks</a></li> 
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>

  <!-- Main content -->
  <main>

    <!-- Sidebar for navigation -->
    <aside>
      <ul>
        <li>All Notes</li>
        <li>Notebooks
          <ul>
            <li>Work</li>
            <li>Personal</li>
          </ul>
        </li>
        <li>Tags
          <ul>
            <li>Todo</li>
            <li>Reminders</li>
          </ul>
        </li>
      </ul>
    </aside>

    <!-- List of notes -->
    <section class="notes">
      <h2>All Notes</h2>

      <div class="note">
        <h3>Grocery list</h3>
        <p>Last edited Yesterday</p>  
      </div>

      <div class="note">
        <h3>Secret note</h3>
        <p>Last edited January 1, 2022</p>
      </div>



      <input id="note-title" placeholder="Enter note title">
<textarea id="note-content" placeholder="Enter note content"></textarea> 
<button id="add-note">Add Note</button>


    </section>

  </main>

  <!-- Encryption password modal -->
  <div class="modal">
    <h2>Enter Password</h2>
    <input type="password">
    <button>OK</button>
  </div>

  <!-- JavaScript -->
  <script src="script.js"></script>

</body>
</html>

The provided HTML code creates the frontend structure and layout for a secure web-based note-taking application. This allows users to store personal notes online behind a password-protected encryption system safely.

At the top level, the code contains typical HTML boilerplate like the <head> and <body> tags. The <head> links to a CSS stylesheet for styling the page.

Inside the <body>, a top navigation bar is defined with <nav> containing the app logo and links to sections like "My Notes". This navigation bar will remain fixed to the top when scrolling the page.

The main content lies within <main> tags. Here, we have an <aside> sidebar for quick navigation to notes by category or tag. Then, a <section> displays the user notes retrieved from the backend. Each note is wrapped in a <div> for styling.

When adding a new note, the user can enter a title and content via <input> and <textarea> fields. A JavaScript handler will grab these values and save the new note to the backend on form submission.

For security, a modal <div> overlay prompts the user to enter their password before viewing encrypted notes. This encrypts and decrypts notes behind the scenes using the password.

Finally, a <script> tag links the JavaScript code, powering the dynamic interactions like note management, modal popups, encryption, etc.

This HTML provides the structure, markup, and hooks to create a functional, secure note-taking web application with user authentication, encrypted storage, and a smooth UI experience. The styling, dynamic behavior, and backend integration would be handled separately.

Next, let us customize our design by styling it with CSS.

/* Style navigation bar */
nav {
    background: #333;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

  nav ul {
    list-style: none;
    display: flex;
  }

  nav li {
    margin-left: 20px;
  }

  nav a {
    color: #fff;
    text-decoration: none;
  }

  /* Style sidebar */
  aside {
    background: #f9f9f9;
    padding: 20px; 
    width: 200px;
  }

  /* Style main content */
  main {
    display: flex;
  }

  .notes {
    padding: 20px;
  }

  .note {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
  }

  /* Style modal */
  .modal {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal h2 {
    color: #fff;
  }

  .modal input {
    border: none;
    padding: 10px;
    border-radius: 5px;
  }

  .modal button {
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
  }

  .note {
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
  }

  .note h3 {
    font-size: 1.2em;
    margin-top: 0;  
  }

  .note p {
    display: none; 
  }

CSS handles all the visual styling of the structural HTML elements like navigation, sidebar, notes, models, etc. It controls colors, spacing, layout, etc., to make the app look polished and usable. The goal is to style the raw HTML into a nice-looking secure note app UI.

Let's add some integration and functionality to the code.

https://gist.github.com/Scofield-Idehen/1a7498fa5e4e247ff3f03a30a39e137f

Our application can now accept passwords but cannot accept new notes to get that done.

let's add a new function.

In the JavaScript, get references to the form fields:

const noteTitle = document.getElementById('note-title'); 
const noteContent = document.getElementById('note-content');

Create a renderNote function that takes a note object and adds it to the DOM.

The user can add a new note by entering a title and content. We could expand on it to allow editing, deleting,

document.querySelector('form button').addEventListener('click', addNote); 

function addNote() {
  // Get title and content
  const title = noteTitle.value;
  const content = noteContent.value;

  // Create new note object
  const newNote = {
    title,
    content
  };

  // Add note to array of notes
  notes.push(newNote);

  // Render new note
  renderNote(newNote);

Encrypting Note Data

While the front end handles presentation and UI, we need the back end to manage note data securely. The first priority is encrypting all user content before it touches our servers. This prevents anyone from reading private notes if our servers are compromised.

AES (Advanced Encryption Standard) is a common symmetric algorithm suitable for encrypting large amounts of data like text content. To encrypt each note, we generate a unique AES key, then encrypt the key itself with the user's passphrase using RSA or PBKDF2. This ensures only the original author with the passphrase can decrypt their notes.

For account security, passwords should be hashed rather than stored in plaintext. BCrypt with a salt is a secure algorithm to protect passwords. Additionally, HTTP SSL certificates encrypt all traffic between the client and server.

Note data should only be decrypted briefly in memory when the user needs to access it. Any encrypted data at rest on our servers should remain securely encrypted. Role-based access controls will restrict employee access to decrypted user data as well.

Syncing Across Devices Securely

To make notes accessible across devices, we need a sync system. This allows notes to be encrypted and then synced via the cloud. Push notifications can alert users when new notes are available.

The major challenge is key management. If the user loses their device or forgets their master passphrase, recovering encrypted notes becomes impossible. We can mitigate this by securely storing escrow recovery keys or splitting the decryption key into multiple user devices via Shamir's Secret Sharing algorithm.

Regular key rotation is another best practice. This generates new encryption keys frequently to reduce the risk of keys being cracked through brute force. Keys can be rotated with a user's periodic passphrase update.

Addressing Challenges with Encryption

Despite the security benefits, encryption does create challenges around usability and performance. Client-side encryption in the browser is limited by JavaScript performance. Servers decrypting and encrypting tons of notes can get computationally expensive.

Therefore, finding the optimal balance between security and convenience is important. The app may allow less sensitive info like note titles and tags to be unencrypted for faster search and organization. Strict encryption can be optional for ultra-privacy-conscious users.

There's also the risk of users losing passwords or encryption keys, making their notes permanently inaccessible. Backup strategies like potentially storing escrow keys or password hints serverside can mitigate this. Multi-factor authentication adds another layer of account security as well.

Conclusion

Building a secure note app presents challenges compared to a typical cloud-based app. But using web development skills and encryption best practices, it's possible to give users a private platform for journaling, noting, and organizing their thoughts.

By following secure design principles, using defense-in-depth tactics, testing rigorously, and planning for disaster recovery, we can work to make data breaches increasingly unlikely.

While no system is ever 100% secure, with care and expertise, we can substantially raise the bar on privacy and security for note apps.

This overview should provide a framework for conceptualizing and designing your secure note app. The demand for private alternatives to big tech products will only grow. There is huge potential to positively impact people's lives by letting them journal and take notes while protecting their digital privacy.

I hope you enjoyed reading this guide and feel motivated to start your programming journey.

If you find this post exciting, find more exciting posts on Learnhub Blog; we write everything tech from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain.

Blog