Thilan Dissanayaka Application Security Feb 11

Common Web Application Technologies

JWT - JSON Web Tokens

JWT is short for JSON Web Token. It is a compact and secure way to send information between two parties – like a client (browser) and a server.

We usually use JWTs to:

Log users in
Keep them logged in
Allow or deny access to parts of an app

JWTs are very common in modern web apps, especially in single-page apps (SPAs), mobile apps, and APIs.

A JWT has three parts, separated by a dot

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJ1c2VybmFtZSI6ImpvaG4iLCJpZCI6IjEyMyJ9.
AbC1234567890xYz

These parts are:

Header – Tells which algorithm is used (like HS256)
Payload – Contains the data (like user ID, username)
Signature – A hash created using a secret key, used to verify the token is not changed.

Why use JWT?

Stateless: The server doesn't need to remember sessions.
Portable: Can be used across web, mobile, and APIs.
Secure: Can be verified and signed (but keep secrets safe!).

JWTs can be secure if used correctly:

Use HTTPS always.
Keep your secret key hidden.
Don't store sensitive data like passwords in the token.
Set an expiration time for tokens.

Common Mistakes to Avoid

Storing JWTs in localStorage without thinking about XSS (cross-site scripting)
Not setting an expiry (exp) for the token
Using weak or public secret keys
Trusting data inside the token without verifying

Cookies

Cookies are small pieces of data stored on the browser by websites. They are used to remember information about the user, like:

Whether the user is logged in
User preferences (like language or theme)
Items in the shopping cart

What does a cookie look like? A cookie is just a name-value pair, like this:

token=abc123xyz;

The browser automatically sends cookies to the server with every request (for that domain).

Types of Cookie Options When a server sets a cookie, it can define options like:

Option	What It Does
`HttpOnly`	Stops JavaScript from reading the cookie (protects from XSS)
`Secure`	Sends cookie only over HTTPS (not HTTP)
`SameSite`	Controls cross-site sending (protects from CSRF)
`Expires` / `Max-Age`	Controls how long the cookie stays alive
`Path`	Controls which paths get the cookie

Feature	Cookies (HttpOnly)	Local Storage
Auto-sent to server	Yes	No
Accessible by JS	No	Yes
Secure from XSS	Yes (HttpOnly)	No
Secure from CSRF	Needs SameSite	Yes (not sent automatically)
Storage limit	Small (\~4KB)	Larger (\~5MB)

Local Storage

What is Local Storage? Local Storage is a feature in your web browser that allows websites to store data on your computer. It’s part of the Web Storage API.

Unlike cookies, local storage:

Is not sent to the server automatically
Can only be accessed using JavaScript
Can store more data (usually up to 5–10MB)

What can you store in localStorage? You can store things like:

JWT tokens

User preferences (theme, language)

Form inputs

Temporary app state

How to use localStorage (Examples)

// Save a value
localStorage.setItem('token', 'abc123');

// Get a value
const token = localStorage.getItem('token');

// Remove a value
localStorage.removeItem('token');

// Clear all local storage
localStorage.clear();

All values are stored as strings, so if you're saving objects, you must use JSON.stringify() and JSON.parse():

const user = { id: 1, name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));

Is localStorage safe for JWT? No, not really. Here's why:

Risk	Description
XSS Attack	If your site is vulnerable to XSS, a hacker can steal tokens from localStorage
Not Secure	Tokens are not encrypted and visible in dev tools

So, while localStorage is convenient, it's not recommended for sensitive data like access tokens or JWTs unless you are 100% sure your site is protected from XSS.

When to Use Local Storage?

To store non-sensitive data like UI settings, dark mode, language preference.
In development or demo apps.
When you control the frontend and backend and are careful with security.

DOM - Document Object Model

It’s how your browser sees and works with a web page.

When you open an HTML file in your browser, it turns the HTML into a tree-like structure made up of objects. This structure is called the DOM.

Think of the DOM as a live map of your webpage that JavaScript can read and change.

Example: Here’s some simple HTML:

<html>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The DOM version of this would look like a tree:

Document
└── html
    └── body
        ├── h1
        │   └── "Hello, world!"
        └── p
            └── "This is a paragraph."

Each part of the HTML (like h1 or p) becomes a node (or object) in the DOM tree.

JavaScript uses the DOM to:

Read content from the page
Change text, style, or structure
Add or remove elements
Handle user actions (clicks, typing, etc.)

Common DOM operations with JavaScript

const title = document.querySelector('h1');

title.textContent = 'Welcome!';
title.style.color = 'blue';

const newParagraph = document.createElement('p');
newParagraph.textContent = 'New paragraph!';
document.body.appendChild(newParagraph);

AJAX - Asyncrhonous Javascript And XML

Using fetch() (modern and easy):

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Do something with the data
  });

Sending data (POST request):

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'thilan', password: '12345' })
})
  .then(res => res.json())
  .then(data => {
    console.log(data); // Show login result
  });

What makes AJAX special?

Feature	Description
Asynchronous	Doesn’t block or freeze the page
Fast	Only updates parts of the page
Dynamic	Enables live content and interactions
Smooth UX	User experience is better and modern