tests: add XSS security smoke tests

Add E2E security tests that inject malicious payloads directly via API
(bypassing UI sanitization) to verify frontend XSS protection.

Test coverage:
- Image URL injection (onerror, onload, javascript:, data:)
- Article description in feed
- Article body markdown (script, img, svg, iframe, anchor, div events)

Tests run separately from main E2E suite via
and are scheduled weekly in CI.

Ref: realworld-apps/realworld#525

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: c4ffein

.github/workflows/security-tests.yml

@@ -0,0 +1,45 @@
+name: Security Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  security-tests:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v2
+
+    - name: Install dependencies
+      run: bun install
+
+    - name: Install Playwright Browsers
+      run: bunx playwright install --with-deps chromium
+
+    - name: Run Security Tests
+      run: bun run test:e2e:security
+      env:
+        CI: true
+
+    - name: Upload Playwright Report
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: security-test-report
+        path: playwright-report/
+        retention-days: 30
+
+    - name: Upload Test Results
+      uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: security-test-results
+        path: test-results/
+        retention-days: 30

e2e/helpers/api.ts

@@ -18,11 +18,9 @@ export async function registerUserViaAPI(request: APIRequestContext, user: UserC
       },
     },
   });
-
   if (!response.ok()) {
     throw new Error(`Failed to register user: ${response.status()}`);
   }
-
   const data = await response.json();
   return data.user.token;
 }
@@ -36,11 +34,9 @@ export async function loginUserViaAPI(request: APIRequestContext, email: string,
       },
     },
   });
-
   if (!response.ok()) {
     throw new Error(`Failed to login: ${response.status()}`);
   }
-
   const data = await response.json();
   return data.user.token;
 }
@@ -63,15 +59,31 @@ export async function createArticleViaAPI(
       },
     },
   });
-
   if (!response.ok()) {
     throw new Error(`Failed to create article: ${response.status()}`);
   }
-
   const data = await response.json();
   return data.article.slug;
 }
 
+export async function updateUserViaAPI(
+  request: APIRequestContext,
+  token: string,
+  updates: { image?: string; bio?: string; username?: string; email?: string },
+): Promise<void> {
+  const response = await request.put(`${API_BASE}/user`, {
+    headers: {
+      Authorization: `Token ${token}`,
+    },
+    data: {
+      user: updates,
+    },
+  });
+  if (!response.ok()) {
+    throw new Error(`Failed to update user: ${response.status()}`);
+  }
+}
+
 export async function createManyArticles(
   request: APIRequestContext,
   token: string,
@@ -80,7 +92,6 @@ export async function createManyArticles(
 ): Promise<string[]> {
   const slugs: string[] = [];
   const uniqueId = `${Date.now()}${Math.random().toString(36).substring(2, 8)}`;
-
   for (let i = 0; i < count; i++) {
     const slug = await createArticleViaAPI(request, token, {
       title: `Test Article ${uniqueId} Number ${i}`,
@@ -89,10 +100,8 @@ export async function createManyArticles(
       tagList: [tag],
     });
     slugs.push(slug);
-
     // Small pause between articles to avoid rate limits
     await new Promise(resolve => setTimeout(resolve, 100));
   }
-
   return slugs;
 }

e2e/xss-security.spec.ts

@@ -0,0 +1,271 @@
+import { test, expect, Page } from '@playwright/test';
+import { generateUniqueUser } from './helpers/auth';
+import { registerUserViaAPI, updateUserViaAPI, createArticleViaAPI } from './helpers/api';
+
+/**
+ * XSS Security Tests - BASIC SMOKE TESTS ONLY
+ *
+ * ⚠️  IMPORTANT DISCLAIMER ⚠️
+ *
+ * These tests are NOT a comprehensive security audit. They only check for a few
+ * common, naive XSS attack patterns and should NOT give you a false sense of security.
+ *
+ * What these tests DO:
+ * - Verify basic protection against common XSS payloads in image URLs
+ * - Check that basic sanitization is present and working for markdown / urls
+ * - Catch obvious security regressions
+ *
+ * What these tests DO NOT:
+ * - Cover all possible XSS vectors (this a whole different scope) and bypass techniques
+ * - Replace a proper security audit / penetration testing
+ * - Actually guarantee the application is secure against XSS
+ *
+ * For production applications, you should:
+ * - Conduct regular security audits by professionals
+ * - Use automated security scanning tools (OWASP ZAP, Burp Suite, etc.)
+ * - Implement Content Security Policy (CSP) headers
+ * - Keep dependencies updated (especially sanitization libraries)
+ * - Follow OWASP guidelines: https://owasp.org/www-community/xss-filter-evasion-cheatsheet
+ *
+ * IMPORTANT: These tests inject malicious payloads directly via API (POST/PUT),
+ * bypassing any UI-level sanitization. This simulates a real attack where an
+ * attacker uses curl/Postman to inject malicious data directly into the backend.
+ *
+ * Reference: https://github.com/realworld-apps/realworld/issues/525
+ */
+
+// Common XSS payloads targeting image src attribute
+const XSS_IMAGE_PAYLOADS = [
+  {
+    name: 'onerror attribute injection',
+    payload: 'https://example.com/img.jpg"onerror="alert(1)',
+  },
+  {
+    name: 'onerror with javascript protocol',
+    payload: 'https://example.com/img.jpg"onerror="javascript:alert(document.cookie)',
+  },
+  {
+    name: 'onload attribute injection',
+    payload: 'https://example.com/img.jpg"onload="alert(1)',
+  },
+  {
+    name: 'javascript protocol in src',
+    payload: 'javascript:alert(1)',
+  },
+  {
+    name: 'data URI with script',
+    payload: 'data:text/html,<script>alert(1)</script>',
+  },
+];
+
+// XSS payloads targeting markdown/HTML content (article body)
+const XSS_MARKDOWN_PAYLOADS = [
+  {
+    name: 'script tag',
+    payload: '<script>alert(1)</script>',
+  },
+  {
+    name: 'img onerror',
+    payload: '<img src=x onerror="alert(1)">',
+  },
+  {
+    name: 'svg onload',
+    payload: '<svg onload="alert(1)">',
+  },
+  {
+    name: 'iframe srcdoc',
+    payload: '<iframe srcdoc="<script>alert(1)</script>">',
+  },
+  {
+    name: 'anchor javascript href',
+    payload: '<a href="javascript:alert(1)">click me</a>',
+  },
+  {
+    name: 'event handler in div',
+    payload: '<div onmouseover="alert(1)">hover me</div>',
+  },
+];
+
+/**
+ * Sets up a listener for any dialog (alert, confirm, prompt) on the page.
+ * Returns a function that checks if any dialog was triggered.
+ */
+function setupXssDetector(page: Page): () => boolean {
+  let xssTriggered = false;
+  page.on('dialog', async dialog => {
+    xssTriggered = true;
+    await dialog.dismiss();
+  });
+  return () => xssTriggered;
+}
+
+/**
+ * Injects the JWT token into the browser's localStorage to authenticate the session.
+ */
+async function injectToken(page: Page, token: string): Promise<void> {
+  await page.goto('/');
+  await page.evaluate(t => {
+    localStorage.setItem('jwtToken', t);
+  }, token);
+}
+
+test.describe('@security XSS Security - Image URL Injection (Direct API)', () => {
+  for (const { name, payload } of XSS_IMAGE_PAYLOADS) {
+    test(`should prevent XSS via ${name}`, async ({ page, request }) => {
+      const wasXssTriggered = setupXssDetector(page);
+      // Register user via API
+      const user = generateUniqueUser();
+      const token = await registerUserViaAPI(request, user);
+      // Inject malicious image URL directly via API (bypassing UI)
+      await updateUserViaAPI(request, token, { image: payload });
+      // Now visit the profile page as a "victim" viewing this profile
+      await injectToken(page, token);
+      await page.goto(`/profile/${user.username}`);
+      await expect(page).toHaveURL(new RegExp(`/profile/${user.username}`));
+      // Wait for profile to load (user-info section contains the image)
+      await page.waitForSelector('.user-info', { timeout: 10000 });
+      // Wait for any deferred/async XSS payloads to execute
+      await page.waitForTimeout(1500);
+      // Verify no XSS was triggered
+      expect(wasXssTriggered()).toBe(false);
+      // Verify the malicious payload is NOT in an executable context
+      const imgElement = page.locator('.user-img');
+      await expect(imgElement).toBeVisible();
+      // Check that onerror/onload are not attributes on the img element
+      const hasOnerror = await imgElement.evaluate(el => el.hasAttribute('onerror'));
+      expect(hasOnerror).toBe(false);
+      const hasOnload = await imgElement.evaluate(el => el.hasAttribute('onload'));
+      expect(hasOnload).toBe(false);
+    });
+  }
+
+  test('should safely render malicious payload in navbar image', async ({ page, request }) => {
+    const wasXssTriggered = setupXssDetector(page);
+    // Register and inject malicious image via API
+    const user = generateUniqueUser();
+    const token = await registerUserViaAPI(request, user);
+    const maliciousImage = 'https://x.com/img.jpg"onerror="alert(document.cookie)';
+    await updateUserViaAPI(request, token, { image: maliciousImage });
+    // Inject token and navigate around to trigger navbar re-renders
+    await injectToken(page, token);
+    await page.goto('/');
+    await page.waitForTimeout(1000);
+    await page.goto('/settings');
+    await page.waitForTimeout(1000);
+    // Check navbar image doesn't have event handlers
+    const navbarImg = page.locator('nav .user-pic');
+    if (await navbarImg.isVisible()) {
+      const hasOnerror = await navbarImg.evaluate(el => el.hasAttribute('onerror'));
+      expect(hasOnerror).toBe(false);
+    }
+    expect(wasXssTriggered()).toBe(false);
+  });
+
+  test('should safely render malicious payload in article comments', async ({ page, request }) => {
+    const wasXssTriggered = setupXssDetector(page);
+    // Register and inject malicious image via API
+    const user = generateUniqueUser();
+    const token = await registerUserViaAPI(request, user);
+    const maliciousImage = 'https://x.com/img.jpg"onerror="alert(1)';
+    await updateUserViaAPI(request, token, { image: maliciousImage });
+    // Inject token and go to an article
+    await injectToken(page, token);
+    await page.goto('/');
+    await page.waitForSelector('.article-preview a.preview-link, .article-preview');
+    // Click on the first article
+    const articleLink = page.locator('.article-preview a.preview-link').first();
+    if (await articleLink.isVisible()) {
+      await articleLink.click();
+      await page.waitForURL(/\/article\//);
+      // Wait for comment section to load and any XSS to trigger
+      await page.waitForTimeout(1500);
+      // The user's image appears in the comment form
+      const commentAuthorImg = page.locator('.comment-author-img').first();
+      if (await commentAuthorImg.isVisible()) {
+        const hasOnerror = await commentAuthorImg.evaluate(el => el.hasAttribute('onerror'));
+        expect(hasOnerror).toBe(false);
+      }
+    }
+    expect(wasXssTriggered()).toBe(false);
+  });
+});
+
+test.describe('@security XSS Security - Article Description in Feed (Direct API)', () => {
+  const XSS_DESCRIPTION_PAYLOADS = [
+    { name: 'script tag', payload: '<script>alert(1)</script>' },
+    { name: 'img onerror', payload: '<img src=x onerror="alert(1)">' },
+    { name: 'svg onload', payload: '<svg onload="alert(1)">' },
+  ];
+  for (const { name, payload } of XSS_DESCRIPTION_PAYLOADS) {
+    test(`should sanitize ${name} in article description`, async ({ page, request }) => {
+      const wasXssTriggered = setupXssDetector(page);
+      // Register user and create article with malicious description via API
+      const user = generateUniqueUser();
+      const token = await registerUserViaAPI(request, user);
+      const timestamp = Date.now();
+      await createArticleViaAPI(request, token, {
+        title: `XSS Desc Test ${timestamp}`,
+        description: `Before: ${payload} After`,
+        body: 'Normal body content',
+      });
+      // Inject token and visit user's profile to see their articles
+      await injectToken(page, token);
+      await page.goto(`/profile/${user.username}`);
+      // Wait for article preview to render
+      await page.waitForSelector('.article-preview', { timeout: 10000 });
+      // Wait for any XSS to trigger
+      await page.waitForTimeout(1500);
+      // Verify no XSS was triggered
+      expect(wasXssTriggered()).toBe(false);
+      // Check the description doesn't contain executable elements
+      const description = page.locator('.article-preview p').first();
+      if (await description.isVisible()) {
+        // The payload should be visible as escaped text, not executed
+        const text = await description.textContent();
+        expect(text).toContain('Before:');
+        // Verify no script tags were injected into the DOM
+        const scriptCount = await page.locator('.article-preview script').count();
+        expect(scriptCount).toBe(0);
+      }
+    });
+  }
+});
+
+test.describe('@security XSS Security - Article Body Markdown (Direct API)', () => {
+  for (const { name, payload } of XSS_MARKDOWN_PAYLOADS) {
+    test(`should sanitize ${name} in article body`, async ({ page, request }) => {
+      const wasXssTriggered = setupXssDetector(page);
+      // Register user and create article with malicious body via API
+      const user = generateUniqueUser();
+      const token = await registerUserViaAPI(request, user);
+      const timestamp = Date.now();
+      const slug = await createArticleViaAPI(request, token, {
+        title: `XSS Test ${timestamp}`,
+        description: 'Testing XSS protection',
+        body: `Before payload: ${payload} After payload`,
+      });
+      // Inject token FIRST (session isolation - must be same user to view article)
+      await injectToken(page, token);
+      // Now visit the article page as the authenticated user
+      await page.goto(`/article/${slug}`);
+      // Wait for content to render
+      await page.waitForSelector('.article-content', { timeout: 10000 });
+      // Wait for any XSS to trigger
+      await page.waitForTimeout(1500);
+      // Verify no XSS was triggered
+      expect(wasXssTriggered()).toBe(false);
+      // Check the article body container for dangerous elements/attributes
+      const articleBody = page.locator('.article-content');
+      await expect(articleBody).toBeVisible();
+      // Verify no script tags exist
+      const scriptCount = await articleBody.locator('script').count();
+      expect(scriptCount).toBe(0);
+      // Verify no elements with dangerous event handlers
+      const dangerousHandlers = ['onerror', 'onload', 'onmouseover', 'onclick', 'onfocus'];
+      for (const handler of dangerousHandlers) {
+        const elementsWithHandler = await articleBody.locator(`[${handler}]`).count();
+        expect(elementsWithHandler).toBe(0);
+      }
+    });
+  }
+});