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
