The XSS protection mechanisms of front-end frameworks (React/Vue/Angular)

Basic Principles of XSS Attacks

The core of XSS (Cross-Site Scripting) attacks lies in attackers injecting malicious scripts into web pages, which are then executed when other users visit the page. While front-end frameworks provide protective mechanisms, developers still need to understand the underlying principles to use them correctly.

Typical XSS attacks are divided into three types:

1. Stored XSS: Malicious scripts are permanently stored on the target server.
2. Reflected XSS: Malicious scripts are reflected back to the page as part of a request.
3. DOM-based XSS: XSS attacks that occur entirely on the client side.

// A simple XSS example
const userInput = '<script>alert("XSS")</script>';
document.getElementById('output').innerHTML = userInput;

React's XSS Protection Mechanisms

React escapes all rendered content by default, achieved through the automatic escaping feature of JSX. When variables are inserted using curly braces {}, React automatically converts the content to a string.

function SafeComponent() {
  const userInput = '<script>alert("XSS")</script>';
  return <div>{userInput}</div>; // Safe, will be escaped
}

Risks of dangerouslySetInnerHTML

React provides dangerouslySetInnerHTML as an escape hatch for directly inserting HTML, but it must be used with caution:

function DangerousComponent() {
  const html = '<b>This is safe HTML</b>';
  return <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }} />;
}

Context-Specific Considerations

Even in React, certain scenarios require special attention:

• The javascript: protocol in href attributes.
• Dynamically generated iframe srcdoc attributes.
• The hydration process during server-side rendering.

// Unsafe use of href
function UnsafeLink() {
  const userUrl = 'javascript:alert("XSS")';
  return <a href={userUrl}>Click me</a>; // Dangerous!
}

Vue's XSS Protection Mechanisms

Vue uses HTML-based template syntax and also escapes interpolated content by default. Double curly braces {{ }} and the v-text directive automatically escape content.

<template>
  <div>{{ userInput }}</div> <!-- Safe -->
  <div v-text="userInput"></div> <!-- Safe -->
</template>

<script>
export default {
  data() {
    return {
      userInput: '<script>alert("XSS")</script>'
    }
  }
}
</script>

Risks of the v-html Directive

Similar to React's dangerouslySetInnerHTML, Vue provides the v-html directive:

<template>
  <div v-html="sanitizedHtml"></div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      rawHtml: '<b>Bold text</b><script>Malicious code</script>'
    }
  },
  computed: {
    sanitizedHtml() {
      return DOMPurify.sanitize(this.rawHtml);
    }
  }
}
</script>

Security Issues with Attribute Binding

Dynamic attribute binding in Vue can also be an entry point for XSS:

<template>
  <!-- Dangerous example -->
  <a :href="userProvidedUrl">Link</a>
  
  <!-- Safe handling -->
  <a :href="sanitizeUrl(userProvidedUrl)">Safe link</a>
</template>

Angular's XSS Protection Mechanisms

Angular's template engine escapes all interpolated expressions by default. Using double curly braces {{ }} automatically performs HTML escaping.

@Component({
  template: `
    <div>{{ userInput }}</div> <!-- Safe -->
  `
})
export class SafeComponent {
  userInput = '<script>alert("XSS")</script>';
}

bypassSecurityTrust API

Angular provides explicit security context APIs to handle trusted content:

import { DomSanitizer } from '@angular/platform-browser';

@Component({
  template: `
    <div [innerHTML]="safeHtml"></div>
  `
})
export class UnsafeComponent {
  constructor(private sanitizer: DomSanitizer) {}
  
  rawHtml = '<b>Bold text</b><script>Malicious code</script>';
  safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawHtml); // Still dangerous!
}

Types of Security Contexts

Angular distinguishes five security contexts:

1. HTML
2. Style
3. URL
4. Resource URL
5. Script

// Correct usage
const safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(userUrl);
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl);

XSS Protection Strategies Outside Frameworks

CSP Content Security Policy

Regardless of the framework used, CSP should be configured as an additional layer of protection:

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;

Input Validation and Output Encoding

Always follow these principles:

1. Validate all user input.
2. Apply appropriate encoding based on the output context.
3. Use specialized libraries like DOMPurify for HTML sanitization.

// Example using DOMPurify
import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href', 'title']
});

Modern Browser Security Features

Leverage built-in security features of modern browsers:

• HttpOnly and Secure cookie flags.
• SameSite cookie attribute.
• Trusted Types API (Chrome).

// Trusted Types example
if (window.trustedTypes && window.trustedTypes.createPolicy) {
  const escapePolicy = trustedTypes.createPolicy('escapePolicy', {
    createHTML: (input) => input.replace(/</g, '&lt;')
  });
}

Common Vulnerability Scenarios and Fixes

JSON Injection Risks

Even with modern frameworks, incorrect JSON handling can lead to XSS:

// Unsafe JSON handling
const userData = JSON.parse('{"name":"</script><script>alert(1)</script>"}');
document.write('<script>var user = ' + JSON.stringify(userData) + '</script>');

// Safe approach: Use textContent instead of innerHTML
const script = document.createElement('script');
script.textContent = JSON.stringify(userData);
document.body.appendChild(script);

Dynamic Template Generation

Avoid using eval or new Function to process user-provided templates:

// Dangerous example
function compileTemplate(template, data) {
  return new Function('data', `return \`${template}\``)(data);
}

// Safer alternative
function safeCompile(template, data) {
  return template.replace(/\${(.*?)}/g, (_, key) => escapeHtml(data[key]));
}

URL Handling Pitfalls

Handle URLs correctly to prevent JavaScript injection:

// Unsafe URL handling
const searchParams = new URLSearchParams(window.location.search);
const redirectUrl = searchParams.get('redirect');
window.location.href = redirectUrl; // Dangerous!

// Safe approach: Validate URLs
function validateUrl(url) {
  try {
    const parsed = new URL(url, window.location.origin);
    if (parsed.origin !== window.location.origin) {
      return '/default';
    }
    return parsed.toString();
  } catch {
    return '/default';
  }
}

Framework-Specific Best Practices

React Security Practices

1. Never concatenate HTML strings directly.
2. Use rel="noopener noreferrer" for external links.
3. Consider using @jsxRuntime automatic to reduce XSS surface.

// Safe external link handling
function ExternalLink({ href, children }) {
  return (
    <a 
      href={href} 
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

Vue Security Practices

1. Avoid using eval or Function constructors in templates.
2. Use the is attribute for dynamic components instead of string concatenation.
3. Be cautious when using render functions to manipulate VNodes directly.

<script>
// Unsafe dynamic component
export default {
  computed: {
    unsafeComponent() {
      return this.userInput; // May contain malicious component names
    }
  }
}
</script>

Angular Security Practices

1. Avoid using JIT compiler in production.
2. Wrap platform browser API calls.
3. Use AOT compilation and strict template type checking.

// Safe content projection
@Component({
  template: `
    <div [innerHTML]="userContent | safeHtml"></div>
  `
})
export class SafeComponent {
  @Input() userContent: string;
}

Tool and Library Selection

HTML Sanitization Library Comparison

1. DOMPurify: Lightweight, supports Node and browsers.
2. sanitize-html: Flexible configuration, suitable for server-side.
3. js-xss: Well-documented in Chinese, suitable for domestic projects.

// DOMPurify advanced configuration
const clean = DOMPurify.sanitize(dirty, {
  FORBID_TAGS: ['style'],
  FORBID_ATTR: ['onerror', 'onload'],
  WHOLE_DOCUMENT: true
});

Static Analysis Tools

1. ESLint plugins: eslint-plugin-security.
2. SonarQube front-end rules.
3. Snyk Code static analysis.

// .eslintrc.json security configuration
{
  "plugins": ["security"],
  "rules": {
    "security/detect-object-injection": "error",
    "security/detect-possible-timing-attacks": "error"
  }
}

Automated Testing

1. Use Jest for XSS testing.
2. OWASP ZAP automated scanning.
3. Custom Puppeteer detection scripts.

// Puppeteer detection example
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
  
  const alerts = [];
  page.on('dialog', async dialog => {
    alerts.push(dialog.message());
    await dialog.dismiss();
  });
  
  // Execute tests...
})();

Balancing Performance and Security

Sanitization Performance Optimization

1. Cache sanitization results.
2. Use Web Workers for large-scale sanitization.
3. Selective sanitization strategies.

// Sanitization cache example
const sanitizeCache = new Map();

function cachedSanitize(html) {
  if (sanitizeCache.has(html)) {
    return sanitizeCache.get(html);
  }
  const clean = DOMPurify.sanitize(html);
  sanitizeCache.set(html, clean);
  return clean;
}

Server-Side Collaboration

1. Dual sanitization strategies.
2. Special handling for isomorphic applications.
3. Correct configuration of security headers.

// Express security headers middleware
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"]
  }
}));

Progressive Enhancement Strategy

1. Core functionality without JS support.
2. On-demand loading of third-party scripts.
3. Secondary verification for critical operations.

// On-demand loading example
function loadAnalytics() {
  if (userConsented) {
    import('./analytics.js').then(module => {
      module.init();
    });
  }
}