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

Usages

  • Live search
  • chat
  • auto-save
  • dashboards, etc
ALSO READ
Reverse TCP shell with Metasploit
Mar 23 Penetration Testing

Metasploit is a powerful penetration testing framework that automates exploit development, generates shellcode, and acts as a listener for incoming connections. This tutorial introduces how to create....

XSS - The Ultimate guide for Cross Site Scripting
May 27 Application Security

Cross-Site Scripting (XSS) is one of the most prevalent and dangerous web application security vulnerabilities. According to OWASP, XSS consistently ranks among the top 10 web application security....

Error based SQL Injection
Apr 26 Application Security

In the previous example, we saw how a classic [SQL Injection Login Bypass](https://hacksland.net/sql-injection-login-bypass) works. SQL Injection is not all about that. The real fun is we can extract....

Observer Pattern explained simply
Apr 26 Software Architecture

When one object needs to notify many other objects about changes in its state **automatically**, the **Observer Pattern** steps in. ## What is the Observer Pattern? - Defines a....

Exploiting a Stack Buffer Overflow on Windows
May 17 Exploit development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut....

AWS - Interview preparation guide
May 08 Interview Guides

## What is Amazon EC2 and what are its features? Amazon EC2 (Elastic Compute Cloud) is a web service that provides resizable compute capacity in the cloud. It allows you to launch and manage....