# Security Testing

> **When to use**: Validating your application's defenses against common web vulnerabilities — XSS, CSRF, insecure cookies, missing headers, authentication bypass, and sensitive data exposure. Playwright is not a replacement for dedicated security scanners, but it catches the most common issues as part of your E2E suite.
> **Prerequisites**: [core/assertions-and-waiting.md](assertions-and-waiting.md), [core/authentication.md](authentication.md)

## Quick Reference

```typescript
// Check security headers on every navigation
const response = await page.goto("/dashboard")
expect(response.headers()["content-security-policy"]).toBeDefined()
expect(response.headers()["x-frame-options"]).toBe("DENY")

// Verify cookie security flags
const cookies = await context.cookies()
const sessionCookie = cookies.find((c) => c.name === "session")
expect(sessionCookie.httpOnly).toBe(true)
expect(sessionCookie.secure).toBe(true)
expect(sessionCookie.sameSite).toBe("Strict")
```

## Patterns

### XSS Injection Testing

**Use when**: Verifying that user inputs are properly sanitized and rendered as text, not HTML.
**Avoid when**: You need comprehensive XSS scanning — use a dedicated tool like OWASP ZAP alongside Playwright.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

const XSS_PAYLOADS = [
  '<script>alert("xss")</script>',
  '<img src=x onerror=alert("xss")>',
  '"><script>alert("xss")</script>',
  "javascript:alert('xss')",
  '<svg onload=alert("xss")>',
  '{{constructor.constructor("alert(1)")()}}', // Template injection
]

test.describe("XSS protection", () => {
  for (const payload of XSS_PAYLOADS) {
    test(`input sanitizes: ${payload.slice(0, 40)}...`, async ({ page }) => {
      await page.goto("/profile/edit")

      // Inject the payload into a text field
      await page.getByLabel("Display name").fill(payload)
      await page.getByRole("button", { name: "Save" }).click()

      // Verify the payload is rendered as text, not executed
      await page.goto("/profile")
      const displayName = page.getByTestId("display-name")
      await expect(displayName).toBeVisible()

      // The payload text should appear literally, not as HTML
      const innerHTML = await displayName.innerHTML()
      expect(innerHTML).not.toContain("<script")
      expect(innerHTML).not.toContain("onerror")
      expect(innerHTML).not.toContain("onload")

      // No dialog should have appeared (script execution)
      // If a dialog fires, the test will fail because it's unhandled
    })
  }
})

test("XSS via URL parameters is prevented", async ({ page }) => {
  const xssUrl = '/search?q=<script>alert("xss")</script>'
  await page.goto(xssUrl)

  // The search term should be displayed as text
  const searchInput = page.getByRole("textbox", { name: "Search" })
  const value = await searchInput.inputValue()
  expect(value).not.toContain("<script")

  // Page should not have injected script tags
  const scriptCount = await page.locator("script:not([src])").count()
  const pageContent = await page.content()
  expect(pageContent).not.toContain('alert("xss")')
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

const XSS_PAYLOADS = [
  '<script>alert("xss")</script>',
  '<img src=x onerror=alert("xss")>',
  '"><script>alert("xss")</script>',
  '<svg onload=alert("xss")>',
]

test.describe("XSS protection", () => {
  for (const payload of XSS_PAYLOADS) {
    test(`input sanitizes: ${payload.slice(0, 40)}...`, async ({ page }) => {
      await page.goto("/profile/edit")
      await page.getByLabel("Display name").fill(payload)
      await page.getByRole("button", { name: "Save" }).click()

      await page.goto("/profile")
      const innerHTML = await page.getByTestId("display-name").innerHTML()
      expect(innerHTML).not.toContain("<script")
      expect(innerHTML).not.toContain("onerror")
    })
  }
})
```

### CSRF Token Verification

**Use when**: Ensuring state-changing requests include valid CSRF tokens and the server rejects requests without them.
**Avoid when**: Your API uses token-based auth (JWT) with no cookie-based sessions — CSRF is not applicable.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("form submissions include CSRF token", async ({ page }) => {
  await page.goto("/settings")

  // Verify the CSRF token is present in the form
  const csrfInput = page.locator('input[name="_csrf"], input[name="csrf_token"]')
  await expect(csrfInput).toBeAttached()
  const tokenValue = await csrfInput.inputValue()
  expect(tokenValue).toBeTruthy()
  expect(tokenValue.length).toBeGreaterThan(16)
})

test("server rejects requests without CSRF token", async ({ page, request }) => {
  // First, get a valid session by logging in through the UI
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // Attempt a state-changing request without the CSRF token
  const cookies = await page.context().cookies()
  const response = await request.post("/api/settings", {
    headers: {
      Cookie: cookies.map((c) => `${c.name}=${c.value}`).join("; "),
    },
    data: { theme: "dark" }, // No CSRF token
  })

  // Server should reject it
  expect(response.status()).toBe(403)
})

test("CSRF token rotates per session", async ({ browser }) => {
  const context1 = await browser.newContext()
  const context2 = await browser.newContext()

  const page1 = await context1.newPage()
  const page2 = await context2.newPage()

  await page1.goto("/login")
  await page2.goto("/login")

  const token1 = await page1.locator('input[name="_csrf"]').inputValue()
  const token2 = await page2.locator('input[name="_csrf"]').inputValue()

  // Tokens should differ between sessions
  expect(token1).not.toBe(token2)

  await context1.close()
  await context2.close()
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("form submissions include CSRF token", async ({ page }) => {
  await page.goto("/settings")

  const csrfInput = page.locator('input[name="_csrf"], input[name="csrf_token"]')
  await expect(csrfInput).toBeAttached()
  const tokenValue = await csrfInput.inputValue()
  expect(tokenValue).toBeTruthy()
  expect(tokenValue.length).toBeGreaterThan(16)
})

test("server rejects requests without CSRF token", async ({ page, request }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const cookies = await page.context().cookies()
  const response = await request.post("/api/settings", {
    headers: {
      Cookie: cookies.map((c) => `${c.name}=${c.value}`).join("; "),
    },
    data: { theme: "dark" },
  })

  expect(response.status()).toBe(403)
})
```

### CSP Header Validation

**Use when**: Verifying Content Security Policy headers are present and correctly configured.
**Avoid when**: CSP is managed by infrastructure (CDN/WAF) tested separately.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("CSP headers are properly configured", async ({ page }) => {
  const response = await page.goto("/")
  const csp = response!.headers()["content-security-policy"]

  expect(csp).toBeDefined()
  expect(csp).toContain("default-src 'self'")
  expect(csp).not.toContain("'unsafe-inline'") // Disallow inline scripts
  expect(csp).not.toContain("'unsafe-eval'") // Disallow eval()
  expect(csp).toContain("script-src")
})

test("security headers are present on all pages", async ({ page }) => {
  const pagesToCheck = ["/", "/login", "/dashboard", "/api/health"]

  for (const url of pagesToCheck) {
    const response = await page.goto(url)
    const headers = response!.headers()

    expect(headers["x-content-type-options"]).toBe("nosniff")
    expect(headers["x-frame-options"]).toMatch(/DENY|SAMEORIGIN/)
    expect(headers["strict-transport-security"]).toBeDefined()
    expect(headers["referrer-policy"]).toBeDefined()
    expect(headers["x-xss-protection"]).toBeUndefined() // Deprecated, should not be set
  }
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("CSP headers are properly configured", async ({ page }) => {
  const response = await page.goto("/")
  const csp = response.headers()["content-security-policy"]

  expect(csp).toBeDefined()
  expect(csp).toContain("default-src 'self'")
  expect(csp).not.toContain("'unsafe-inline'")
  expect(csp).not.toContain("'unsafe-eval'")
})

test("security headers are present on all pages", async ({ page }) => {
  const pagesToCheck = ["/", "/login", "/dashboard"]

  for (const url of pagesToCheck) {
    const response = await page.goto(url)
    const headers = response.headers()

    expect(headers["x-content-type-options"]).toBe("nosniff")
    expect(headers["x-frame-options"]).toMatch(/DENY|SAMEORIGIN/)
    expect(headers["strict-transport-security"]).toBeDefined()
  }
})
```

### Cookie Security Flags

**Use when**: Verifying session cookies and auth cookies have proper security attributes.
**Avoid when**: Your app is fully stateless with no cookies.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("session cookie has correct security flags", async ({ page, context }) => {
  // Log in to create a session cookie
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const cookies = await context.cookies()

  // Check session cookie
  const session = cookies.find((c) => c.name === "session" || c.name === "sid")
  expect(session).toBeDefined()
  expect(session!.httpOnly).toBe(true) // Not accessible via JavaScript
  expect(session!.secure).toBe(true) // Only sent over HTTPS
  expect(session!.sameSite).toBe("Strict") // Or 'Lax' at minimum

  // Session cookie should not have an excessive expiry
  if (session!.expires !== -1) {
    const maxAge = session!.expires - Date.now() / 1000
    expect(maxAge).toBeLessThan(86400 * 30) // No more than 30 days
  }
})

test("sensitive cookies are not exposed to JavaScript", async ({ page }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // document.cookie should NOT contain HttpOnly cookies
  const jsCookies = await page.evaluate(() => document.cookie)
  expect(jsCookies).not.toContain("session")
  expect(jsCookies).not.toContain("sid")
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("session cookie has correct security flags", async ({ page, context }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const cookies = await context.cookies()
  const session = cookies.find((c) => c.name === "session" || c.name === "sid")

  expect(session).toBeDefined()
  expect(session.httpOnly).toBe(true)
  expect(session.secure).toBe(true)
  expect(session.sameSite).toBe("Strict")
})
```

### Authentication Bypass Testing

**Use when**: Ensuring protected routes redirect unauthenticated users and that session invalidation works.
**Avoid when**: Auth is tested through dedicated API tests that cover these cases already.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("unauthenticated user cannot access protected routes", async ({ page }) => {
  const protectedRoutes = ["/dashboard", "/settings", "/admin", "/api/users"]

  for (const route of protectedRoutes) {
    const response = await page.goto(route)

    // Should redirect to login or return 401/403
    const isRedirected = page.url().includes("/login")
    const isBlocked = response!.status() === 401 || response!.status() === 403
    expect(isRedirected || isBlocked).toBe(true)
  }
})

test("session is invalidated after logout", async ({ page, context }) => {
  // Log in
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // Capture session cookie
  const cookiesBefore = await context.cookies()
  const sessionBefore = cookiesBefore.find((c) => c.name === "session")

  // Log out
  await page.getByRole("button", { name: "Log out" }).click()
  await page.waitForURL("/login")

  // Verify session cookie is cleared
  const cookiesAfter = await context.cookies()
  const sessionAfter = cookiesAfter.find((c) => c.name === "session")
  expect(sessionAfter).toBeUndefined()

  // Attempting to access protected route should fail
  await page.goto("/dashboard")
  expect(page.url()).toContain("/login")
})

test("expired session redirects to login", async ({ page, context }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // Manually expire the session cookie
  await context.clearCookies()

  // Next navigation should redirect to login
  await page.goto("/dashboard")
  expect(page.url()).toContain("/login")
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("unauthenticated user cannot access protected routes", async ({ page }) => {
  const protectedRoutes = ["/dashboard", "/settings", "/admin"]

  for (const route of protectedRoutes) {
    await page.goto(route)
    expect(page.url()).toContain("/login")
  }
})

test("session is invalidated after logout", async ({ page, context }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  await page.getByRole("button", { name: "Log out" }).click()
  await page.waitForURL("/login")

  const cookies = await context.cookies()
  const session = cookies.find((c) => c.name === "session")
  expect(session).toBeUndefined()
})
```

### HTTPS Redirect and Sensitive Data Exposure

**Use when**: Verifying that HTTP requests are redirected to HTTPS and that sensitive data is not leaked in URLs, headers, or client-side storage.
**Avoid when**: Running against `localhost` where HTTPS is not configured.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("HTTP redirects to HTTPS", async ({ request }) => {
  // Use the API request context to follow redirects
  const response = await request.get("http://your-app.com/", {
    maxRedirects: 0, // Don't follow — inspect the redirect
  })
  expect(response.status()).toBe(301)
  expect(response.headers()["location"]).toMatch(/^https:\/\//)
})

test("HSTS header is set", async ({ page }) => {
  const response = await page.goto("/")
  const hsts = response!.headers()["strict-transport-security"]
  expect(hsts).toBeDefined()
  expect(hsts).toContain("max-age=")

  // Extract max-age value and verify it's at least 1 year
  const maxAge = parseInt(hsts!.match(/max-age=(\d+)/)?.[1] || "0")
  expect(maxAge).toBeGreaterThanOrEqual(31536000)
})

test("sensitive data is not in URL parameters", async ({ page }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // Password should never appear in URL
  expect(page.url()).not.toContain("password")
  expect(page.url()).not.toContain("token")
  expect(page.url()).not.toContain("secret")
})

test("sensitive data is not in localStorage", async ({ page }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const storageData = await page.evaluate(() => {
    const data: Record<string, string> = {}
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i)!
      data[key] = localStorage.getItem(key)!
    }
    return JSON.stringify(data)
  })

  expect(storageData).not.toContain("password")
  expect(storageData.toLowerCase()).not.toContain("secret")
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("sensitive data is not in localStorage", async ({ page }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const storageData = await page.evaluate(() => {
    const data = {}
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i)
      data[key] = localStorage.getItem(key)
    }
    return JSON.stringify(data)
  })

  expect(storageData).not.toContain("password")
  expect(storageData.toLowerCase()).not.toContain("secret")
})
```

### Session Fixation Prevention

**Use when**: Ensuring the session ID changes after authentication to prevent session fixation attacks.
**Avoid when**: Using stateless token auth (JWT) with no server-side sessions.

**TypeScript**

```typescript
import { test, expect } from "@playwright/test"

test("session ID changes after login", async ({ page, context }) => {
  await page.goto("/login")

  // Capture pre-login session identifier
  const cookiesBefore = await context.cookies()
  const preLoginSession = cookiesBefore.find((c) => c.name === "session")
  const preLoginValue = preLoginSession?.value

  // Log in
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  // Session ID must change after authentication
  const cookiesAfter = await context.cookies()
  const postLoginSession = cookiesAfter.find((c) => c.name === "session")
  expect(postLoginSession).toBeDefined()

  if (preLoginValue) {
    expect(postLoginSession!.value).not.toBe(preLoginValue)
  }
})
```

**JavaScript**

```javascript
const { test, expect } = require("@playwright/test")

test("session ID changes after login", async ({ page, context }) => {
  await page.goto("/login")

  const cookiesBefore = await context.cookies()
  const preLoginSession = cookiesBefore.find((c) => c.name === "session")
  const preLoginValue = preLoginSession?.value

  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill("password123")
  await page.getByRole("button", { name: "Sign in" }).click()
  await page.waitForURL("/dashboard")

  const cookiesAfter = await context.cookies()
  const postLoginSession = cookiesAfter.find((c) => c.name === "session")
  expect(postLoginSession).toBeDefined()

  if (preLoginValue) {
    expect(postLoginSession.value).not.toBe(preLoginValue)
  }
})
```

## Decision Guide

| Vulnerability            | Playwright Test Approach                                             | Confidence Level                              |
| ------------------------ | -------------------------------------------------------------------- | --------------------------------------------- |
| Reflected XSS            | Inject payloads in inputs and URL params, assert no script execution | Medium -- covers common cases, not exhaustive |
| Stored XSS               | Inject payload, reload page, assert sanitized output                 | Medium -- catches rendering-level issues      |
| CSRF                     | Verify token presence, test rejection without token                  | High -- directly tests the mechanism          |
| Insecure cookies         | Assert `httpOnly`, `secure`, `sameSite` flags                        | High -- deterministic check                   |
| Missing security headers | Assert header presence and values                                    | High -- deterministic check                   |
| Auth bypass              | Navigate to protected routes without auth                            | High -- tests the redirect/block mechanism    |
| Session fixation         | Compare session IDs before and after login                           | High -- directly verifiable                   |
| Sensitive data exposure  | Check URLs, localStorage, response bodies for secrets                | Medium -- catches obvious leaks               |
| HTTPS enforcement        | Verify redirect and HSTS header                                      | High -- deterministic check                   |

## Anti-Patterns

| Don't Do This                                   | Problem                                    | Do This Instead                                                                                  |
| ----------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| Only testing the "happy path" login             | Misses bypass vectors                      | Test unauthenticated access, expired sessions, tampered tokens                                   |
| Checking `SameSite` only on one cookie          | Other cookies may leak session info        | Check all cookies that contain session data                                                      |
| Ignoring CSP on API endpoints                   | APIs can serve HTML on error pages         | Check headers on API routes too                                                                  |
| Testing security only in development            | Dev servers often have relaxed security    | Run security tests against staging with production-like config                                   |
| Using `page.waitForTimeout` after login         | Hides timing-based auth issues             | Use `page.waitForURL` or assertion-based waiting                                                 |
| Hardcoding test credentials in test files       | Credentials leak into version control      | Use environment variables or a secrets manager                                                   |
| Skipping HTTPS tests because "it works locally" | HTTP-only local dev hides HTTPS issues     | Test HTTPS redirect against staging or use `--ignore-https-errors` carefully                     |
| Treating Playwright as a full security scanner  | Playwright tests are not penetration tests | Use Playwright for regression checks; pair with OWASP ZAP, Burp Suite, or Snyk for deep scanning |

## Troubleshooting

| Symptom                                              | Likely Cause                                 | Fix                                                                                         |
| ---------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------- |
| CSP header missing in test but present in production | Dev server does not set CSP                  | Run security tests against staging with production config                                   |
| Cookie `secure` flag is `false`                      | Testing over HTTP (localhost)                | Test against HTTPS staging, or verify the flag is set conditionally for production          |
| CSRF test passes without token                       | CSRF protection disabled in test environment | Enable CSRF in test environment or run against staging                                      |
| XSS payload does not execute but test passes         | Framework auto-escapes by default            | Still test -- the test confirms the protection works; add edge cases for raw HTML rendering |
| `context.cookies()` returns empty                    | Cookies set on a different domain or path    | Pass the specific URL to `context.cookies('https://your-app.com')`                          |
| HSTS header check fails on localhost                 | HSTS requires HTTPS with valid certs         | Skip HSTS tests for localhost, run against staging                                          |
| Session cookie not found by name                     | Cookie name differs across environments      | Search by pattern: `cookies.find(c => c.name.includes('sess'))`                             |

## Related

- [core/authentication.md](authentication.md) -- login flows and auth state management
- [core/network-mocking.md](network-mocking.md) -- intercepting requests for security testing
- [core/configuration.md](configuration.md) -- `ignoreHTTPSErrors` and base URL configuration
- [core/third-party-integrations.md](third-party-integrations.md) -- testing OAuth and third-party auth providers
- [ci/ci-github-actions.md](../ci/ci-github-actions.md) -- running security tests in CI pipelines