Using HTTP security headers with AngularJS apps

HTTP security headers help protect AngularJS applications from common web vulnerabilities like Cross-Site Scripting (XSS), Clickjacking, Man-in-the-Middle (MITM) attacks, and data sniffing. Implementing these headers correctly can harden your AngularJS app against security threats.

This guide covers:

1. What are HTTP Security Headers?
2. Types of Security Headers & Their Implementation
   • Content Security Policy (CSP)
   • X-Frame-Options
   • X-XSS-Protection
   • X-Content-Type-Options
   • Strict-Transport-Security (HSTS)
   • Referrer-Policy
   • Permissions-Policy
3. Configuring Security Headers in an AngularJS App
4. Testing HTTP Security Headers
5. Best Practices for Secure AngularJS Apps

---

1. What Are HTTP Security Headers?

HTTP security headers instruct the browser on how to handle security-related aspects of a webpage. These headers are set by the server and help prevent security threats like:

• Code Injection Attacks (XSS, SQL Injection)
• Clickjacking Attacks
• MIME Type Sniffing Attacks
• Man-in-the-Middle (MITM) Attacks

---

2. Types of Security Headers & Their Implementation

1️⃣ Content Security Policy (CSP) – Prevent XSS Attacks

CSP restricts the sources from which scripts, images, styles, and other resources can be loaded.

✅ Example Server Configuration (Apache/Nginx/Node.js Express):

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

AngularJS Configuration:
Modify the meta tag in your HTML file:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">

🔹 Prevents: Injection of malicious scripts (XSS attacks).
🔹 Allows: Only trusted sources for JavaScript execution.

---

2️⃣ X-Frame-Options – Prevent Clickjacking

X-Frame-Options prevents your app from being embedded inside an iframe to avoid clickjacking attacks.

Example Server Configuration:

X-Frame-Options: DENY

AngularJS Implementation:
To disable iframe embedding:

<meta http-equiv="X-Frame-Options" content="DENY">

🔹 Prevents: Clickjacking attacks.
🔹 Options:

• DENY → Blocks all iframes.
• SAMEORIGIN → Allows only iframes from the same origin.
• ALLOW-FROM https://example.com → Allows specific sites.

---

3️⃣ X-XSS-Protection – Block XSS Attacks in Older Browsers

Modern browsers already have built-in XSS protection, but this header enforces it.

Example Server Configuration:

X-XSS-Protection: 1; mode=block

🔹 Prevents: Execution of malicious scripts in outdated browsers.
🔹 Recommended Value: 1; mode=block

---

4️⃣ X-Content-Type-Options – Prevent MIME Sniffing

This header stops browsers from guessing file types, reducing the risk of MIME-based attacks.

Example Server Configuration:

X-Content-Type-Options: nosniff

🔹 Prevents: Browsers from executing non-JavaScript files as JavaScript.
🔹 Always use nosniff to block MIME sniffing.

---

5️⃣ Strict-Transport-Security (HSTS) – Force HTTPS

HSTS enforces HTTPS by blocking HTTP requests and preventing MITM attacks.

Example Server Configuration:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

🔹 Prevents: Man-in-the-Middle (MITM) attacks.
🔹 max-age=31536000 → Enforces HTTPS for 1 year.
🔹 includeSubDomains → Enforces HTTPS for subdomains.
🔹 preload → Adds the domain to the HSTS preload list.

---

6️⃣ Referrer-Policy – Hide Sensitive Referrer Information

Controls how much information is sent in the Referer header when navigating.

Example Server Configuration:

Referrer-Policy: no-referrer

🔹 Prevents: Leakage of sensitive URL data.
🔹 Recommended Value: strict-origin-when-cross-origin (Only send referrer for same-origin requests).

---

7️⃣ Permissions-Policy – Restrict Browser Features

Controls access to browser features like camera, microphone, location, geolocation, etc.

Example Server Configuration:

Permissions-Policy: geolocation=(), microphone=()

Prevents: Unauthorized access to user’s hardware capabilities.

---

3. Configuring Security Headers in an AngularJS App

1. Using Node.js Express to Set Headers

If your AngularJS app is running on an Express backend, use helmet.js to set security headers.

const helmet = require('helmet');
app.use(helmet());

This automatically sets X-Frame-Options, CSP, HSTS, X-XSS-Protection, etc.

---

2. Using Apache/Nginx for Security Headers

Modify Apache’s .htaccess or Nginx configuration:

Header set X-Frame-Options "DENY"
Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header set Referrer-Policy "no-referrer"
Header set Permissions-Policy "geolocation=(), microphone=()"

Ensures security headers are enforced at the server level.

---

4. Testing HTTP Security Headers

After configuring security headers, test your AngularJS app using:

1. Security Headers Check Online

Use https://securityheaders.com/ to scan your website.

2. Checking in Chrome DevTools

1. Open Chrome DevTools (F12).
2. Go to Network → Click on the request.
3. Check Response Headers for security headers.

3. Using curl Command

Run this command to check headers:

curl -I https://yourwebsite.com