---
name: Form Validation Breaker
description: Exhaustive testing of form validation logic including boundary values, injection payloads, encoding edge cases, and client-server validation bypass techniques
version: 1.0.0
author: Pramod
license: MIT
tags: [form-validation, input-testing, boundary-testing, injection-testing, xss-prevention, validation-bypass, fuzzing]
testingTypes: [security, e2e]
frameworks: [playwright]
languages: [typescript, javascript]
domains: [web]
agents: [claude-code, cursor, github-copilot, windsurf, codex, aider, continue, cline, zed, bolt, gemini-cli, amp]
---
# Form Validation Breaker Skill
You are an expert QA security engineer specializing in form validation testing. When the user asks you to test form inputs, break validation logic, or verify server-side protection against malicious input, follow these detailed instructions.
## Core Principles
1. **Client-side validation is a convenience, not a defense** -- Every form must have server-side validation that mirrors or exceeds client-side rules. Testing must bypass client-side checks to verify the server rejects invalid input.
2. **Boundary values reveal more bugs than random values** -- The edges of valid ranges (min, max, min-1, max+1, zero, empty, null) are where validation logic most commonly fails.
3. **Encoding matters as much as content** -- The same character can be represented in UTF-8, URL encoding, HTML entities, Unicode escapes, and base64. Validation that blocks `', category: 'xss', expectedResult: 'reject', description: 'Basic script injection' },
{ name: `${fieldName}_xss_img`, value: '', category: 'xss', expectedResult: 'reject', description: 'SVG onload handler' },
{ name: `${fieldName}_xss_event`, value: '" onfocus="alert(1)" autofocus="', category: 'xss', expectedResult: 'reject', description: 'Attribute injection with event handler' },
{ name: `${fieldName}_xss_href`, value: 'javascript:alert(1)', category: 'xss', expectedResult: 'reject', description: 'JavaScript protocol in URL context' },
{ name: `${fieldName}_xss_encoded`, value: '<script>alert(1)</script>', category: 'xss', expectedResult: 'reject', description: 'HTML entity encoded script tag' },
{ name: `${fieldName}_xss_unicode`, value: '\u003cscript\u003ealert(1)\u003c/script\u003e', category: 'xss', expectedResult: 'reject', description: 'Unicode escaped script tag' },
{ name: `${fieldName}_xss_mixed_case`, value: '', category: 'xss', expectedResult: 'reject', description: 'Mixed case script tag' },
{ name: `${fieldName}_xss_null_byte`, value: 'alert(1)', category: 'xss', expectedResult: 'reject', description: 'Null byte in script tag' },
// SQL injection vectors
{ name: `${fieldName}_sqli_basic`, value: "' OR '1'='1", category: 'sqli', expectedResult: 'reject', description: 'Basic SQL injection' },
{ name: `${fieldName}_sqli_union`, value: "' UNION SELECT * FROM users--", category: 'sqli', expectedResult: 'reject', description: 'UNION-based SQL injection' },
{ name: `${fieldName}_sqli_drop`, value: "'; DROP TABLE users;--", category: 'sqli', expectedResult: 'reject', description: 'DROP TABLE injection' },
{ name: `${fieldName}_sqli_comment`, value: "admin'--", category: 'sqli', expectedResult: 'reject', description: 'Comment-based authentication bypass' },
{ name: `${fieldName}_sqli_blind`, value: "' AND 1=1--", category: 'sqli', expectedResult: 'reject', description: 'Blind SQL injection probe' },
{ name: `${fieldName}_sqli_time`, value: "' OR SLEEP(5)--", category: 'sqli', expectedResult: 'reject', description: 'Time-based blind SQL injection' },
// Command injection
{ name: `${fieldName}_cmd_pipe`, value: '| ls -la', category: 'command', expectedResult: 'reject', description: 'Pipe command injection' },
{ name: `${fieldName}_cmd_semicolon`, value: '; cat /etc/passwd', category: 'command', expectedResult: 'reject', description: 'Semicolon command injection' },
{ name: `${fieldName}_cmd_backtick`, value: '`whoami`', category: 'command', expectedResult: 'reject', description: 'Backtick command injection' },
{ name: `${fieldName}_cmd_subshell`, value: '$(cat /etc/passwd)', category: 'command', expectedResult: 'reject', description: 'Subshell command injection' },
// Path traversal
{ name: `${fieldName}_path_traversal`, value: '../../../etc/passwd', category: 'path', expectedResult: 'reject', description: 'Directory traversal' },
{ name: `${fieldName}_path_null_byte`, value: '../../etc/passwd%00.jpg', category: 'path', expectedResult: 'reject', description: 'Null byte path traversal' },
// LDAP injection
{ name: `${fieldName}_ldap`, value: '*)(uid=*))(|(uid=*', category: 'ldap', expectedResult: 'reject', description: 'LDAP injection' },
// Template injection
{ name: `${fieldName}_ssti`, value: '{{7*7}}', category: 'template', expectedResult: 'reject', description: 'Server-side template injection' },
{ name: `${fieldName}_ssti_jinja`, value: '{{ config.items() }}', category: 'template', expectedResult: 'reject', description: 'Jinja2 template injection' },
];
}
export function generateEncodingPayloads(fieldName: string): TestPayload[] {
return [
// Unicode edge cases
{ name: `${fieldName}_zero_width_space`, value: 'test\u200Bvalue', category: 'encoding', expectedResult: 'reject', description: 'Zero-width space character' },
{ name: `${fieldName}_zero_width_joiner`, value: 'test\u200Dvalue', category: 'encoding', expectedResult: 'reject', description: 'Zero-width joiner character' },
{ name: `${fieldName}_bidi_override`, value: '\u202Emalicious\u202C', category: 'encoding', expectedResult: 'reject', description: 'Right-to-left override character' },
{ name: `${fieldName}_homoglyph`, value: '\u0430dmin', category: 'encoding', expectedResult: 'reject', description: 'Cyrillic "a" homoglyph for "admin"' },
{ name: `${fieldName}_emoji`, value: 'test value 🎉🚀💯', category: 'encoding', expectedResult: 'accept', description: 'Emoji characters (should be accepted if field allows unicode)' },
{ name: `${fieldName}_combining_chars`, value: 'te\u0301st', category: 'encoding', expectedResult: 'accept', description: 'Combining diacritical marks' },
{ name: `${fieldName}_surrogate_pair`, value: 'test \uD83D\uDE00 value', category: 'encoding', expectedResult: 'accept', description: 'Surrogate pair emoji' },
{ name: `${fieldName}_null_char`, value: 'test\x00value', category: 'encoding', expectedResult: 'reject', description: 'Null character in string' },
{ name: `${fieldName}_backspace`, value: 'test\x08value', category: 'encoding', expectedResult: 'reject', description: 'Backspace control character' },
{ name: `${fieldName}_bell`, value: 'test\x07value', category: 'encoding', expectedResult: 'reject', description: 'Bell control character' },
// URL encoding
{ name: `${fieldName}_double_url_encode`, value: '%253Cscript%253E', category: 'encoding', expectedResult: 'reject', description: 'Double URL-encoded script tag' },
{ name: `${fieldName}_overlong_utf8`, value: '%C0%BCscript%C0%BE', category: 'encoding', expectedResult: 'reject', description: 'Overlong UTF-8 encoding' },
];
}
```
## The Form Breaker Fixture
The fixture provides utilities for filling forms, bypassing client-side validation, and capturing validation responses.
```typescript
// tests/fixtures/form-breaker.fixture.ts
import { test as base, Page, expect } from '@playwright/test';
export interface ValidationResult {
fieldName: string;
payload: string;
payloadCategory: string;
clientSideBlocked: boolean;
serverSideBlocked: boolean;
errorMessage: string;
httpStatus?: number;
responseBody?: string;
}
export class FormBreaker {
constructor(private page: Page) {}
/**
* Fill a form field, bypassing any client-side maxlength or pattern restrictions
*/
async fillFieldBypassingValidation(
selector: string,
value: string
): Promise {
await this.page.evaluate(
({ sel, val }) => {
const element = document.querySelector(sel) as HTMLInputElement;
if (!element) throw new Error(`Element not found: ${sel}`);
// Remove client-side constraints
element.removeAttribute('maxlength');
element.removeAttribute('minlength');
element.removeAttribute('pattern');
element.removeAttribute('required');
element.removeAttribute('min');
element.removeAttribute('max');
element.removeAttribute('step');
element.type = 'text'; // Override type constraints
// Set value directly, bypassing React/Vue controlled component logic
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
'value'
)!.set!;
nativeInputValueSetter.call(element, val);
// Dispatch events to trigger framework change handlers
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
},
{ sel: selector, val: value }
);
}
/**
* Submit a form by intercepting the submit event and sending raw data
*/
async submitFormWithRawData(
formSelector: string,
data: Record
): Promise<{ status: number; body: string }> {
// Intercept form submission to capture the response
const [response] = await Promise.all([
this.page.waitForResponse(
(resp) => resp.request().method() === 'POST',
{ timeout: 10000 }
).catch(() => null),
this.page.evaluate(
({ sel, formData }) => {
const form = document.querySelector(sel) as HTMLFormElement;
if (!form) throw new Error(`Form not found: ${sel}`);
// Remove form validation
form.setAttribute('novalidate', 'true');
// Fill fields
for (const [name, value] of Object.entries(formData)) {
const field = form.querySelector(`[name="${name}"]`) as HTMLInputElement;
if (field) {
field.removeAttribute('required');
field.removeAttribute('pattern');
field.removeAttribute('maxlength');
const setter = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
'value'
)!.set!;
setter.call(field, value);
field.dispatchEvent(new Event('input', { bubbles: true }));
field.dispatchEvent(new Event('change', { bubbles: true }));
}
}
// Submit the form
form.submit();
},
{ sel: formSelector, formData: data }
),
]);
if (response) {
return {
status: response.status(),
body: await response.text().catch(() => ''),
};
}
return { status: 0, body: '' };
}
/**
* Send form data directly via API, completely bypassing the browser form
*/
async submitViaApi(
url: string,
data: Record,
method: 'POST' | 'PUT' | 'PATCH' = 'POST'
): Promise<{ status: number; body: string }> {
const response = await this.page.request.fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(data),
});
return {
status: response.status(),
body: await response.text(),
};
}
/**
* Check if a validation error message is displayed on the page
*/
async getValidationErrors(): Promise {
return await this.page.evaluate(() => {
const errors: string[] = [];
// HTML5 validation messages
document.querySelectorAll(':invalid').forEach((el) => {
const input = el as HTMLInputElement;
if (input.validationMessage) {
errors.push(`[${input.name || input.id}]: ${input.validationMessage}`);
}
});
// Common error display patterns
const errorSelectors = [
'[class*="error"]',
'[class*="invalid"]',
'[role="alert"]',
'.field-error',
'.form-error',
'.validation-error',
'[data-testid*="error"]',
'[aria-invalid="true"]',
];
for (const selector of errorSelectors) {
document.querySelectorAll(selector).forEach((el) => {
const text = (el as HTMLElement).textContent?.trim();
if (text && text.length > 0 && text.length < 500) {
errors.push(text);
}
});
}
return [...new Set(errors)];
});
}
}
export const test = base.extend<{ formBreaker: FormBreaker }>({
formBreaker: async ({ page }, use) => {
const breaker = new FormBreaker(page);
await use(breaker);
},
});
export { expect } from '@playwright/test';
```
## Writing the Tests
### Boundary Value Testing
```typescript
// tests/form-validation/boundary-values.spec.ts
import { test, expect } from '../fixtures/form-breaker.fixture';
import { generateBoundaryPayloads } from '../helpers/payload-generator';
test.describe('Form Boundary Value Testing', () => {
test.beforeEach(async ({ page }) => {
const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(`${baseUrl}/signup`, { waitUntil: 'networkidle' });
});
test('email field should enforce valid email format', async ({ page, formBreaker }) => {
const invalidEmails = [
'plainaddress',
'@missing-local.com',
'missing-at-sign.com',
'missing-domain@.com',
'missing-tld@domain.',
'spaces in@email.com',
'double@@email.com',
'.leading-dot@email.com',
'trailing-dot.@email.com',
'multiple...dots@email.com',
'email@-leading-hyphen.com',
'email@domain..double-dot.com',
'@test.com', password: 'ValidPass123!' },
{ email: 'test@example.com', password: "' OR '1'='1" },
];
for (const data of invalidSubmissions) {
const result = await formBreaker.submitViaApi(
`${baseUrl}/api/auth/register`,
data as Record
);
expect(
result.status,
`API should reject invalid data: ${JSON.stringify(data)}`
).toBeGreaterThanOrEqual(400);
// Verify no SQL or internal errors are exposed
expect(result.body).not.toMatch(/sql|syntax|stack|trace|internal server/i);
}
});
test('hidden fields should not be blindly trusted', async ({ page, formBreaker }) => {
const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(`${baseUrl}/checkout`, { waitUntil: 'networkidle' });
// Manipulate hidden fields (like price, role, or discount codes)
await page.evaluate(() => {
const hiddenFields = document.querySelectorAll('input[type="hidden"]');
hiddenFields.forEach((field) => {
const input = field as HTMLInputElement;
if (input.name.includes('price') || input.name.includes('amount')) {
input.value = '0.01';
}
if (input.name.includes('role') || input.name.includes('admin')) {
input.value = 'admin';
}
if (input.name.includes('discount')) {
input.value = '99.99';
}
});
});
const submitButton = page.getByRole('button', { name: /submit|purchase|pay/i });
if (await submitButton.isVisible()) {
await submitButton.click();
await page.waitForTimeout(3000);
}
// Verify the server did not accept the manipulated values
// This assertion depends on your application's behavior
const pageText = await page.textContent('body');
expect(pageText).not.toMatch(/order confirmed.*\$0\.01/i);
});
});
```
### File Upload Validation
```typescript
// tests/form-validation/file-upload-validation.spec.ts
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
import * as os from 'os';
test.describe('File Upload Validation', () => {
let tempDir: string;
test.beforeAll(() => {
tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'upload-test-'));
});
test.afterAll(() => {
fs.rmSync(tempDir, { recursive: true, force: true });
});
function createTempFile(name: string, content: string | Buffer): string {
const filePath = path.join(tempDir, name);
fs.writeFileSync(filePath, content);
return filePath;
}
test('should reject files with dangerous extensions', async ({ page }) => {
const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });
const dangerousFiles = [
createTempFile('malicious.exe', 'MZ fake exe content'),
createTempFile('script.php', ''),
createTempFile('shell.jsp', '<% Runtime.getRuntime().exec("ls"); %>'),
createTempFile('backdoor.asp', '<% Response.Write("pwned") %>'),
createTempFile('exploit.svg', ''),
createTempFile('payload.html', ''),
];
for (const filePath of dangerousFiles) {
const fileInput = page.locator('input[type="file"]');
if (await fileInput.isVisible()) {
await fileInput.setInputFiles(filePath);
await page.waitForTimeout(1000);
const submitButton = page.getByRole('button', { name: /upload|submit/i });
if (await submitButton.isVisible()) {
await submitButton.click();
await page.waitForTimeout(2000);
}
// Verify the file was rejected
const pageText = await page.textContent('body');
const fileName = path.basename(filePath);
expect(
/error|rejected|not allowed|invalid/i.test(pageText || '') || page.url().includes('upload'),
`Dangerous file "${fileName}" should have been rejected`
).toBe(true);
await page.reload();
}
}
});
test('should reject files that exceed size limits', async ({ page }) => {
const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });
// Create a 50MB file (likely exceeds most upload limits)
const largeFile = createTempFile('large-file.jpg', Buffer.alloc(50 * 1024 * 1024, 0xff));
const fileInput = page.locator('input[type="file"]');
if (await fileInput.isVisible()) {
await fileInput.setInputFiles(largeFile);
const submitButton = page.getByRole('button', { name: /upload|submit/i });
if (await submitButton.isVisible()) {
await submitButton.click();
await page.waitForTimeout(5000);
}
const pageText = await page.textContent('body');
expect(
/too large|size limit|exceeds|maximum/i.test(pageText || ''),
'Large file should trigger size limit error'
).toBe(true);
}
});
test('should verify file content matches extension', async ({ page }) => {
const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(`${baseUrl}/upload`, { waitUntil: 'networkidle' });
// Create a PHP file disguised as a JPEG
const disguisedFile = createTempFile(
'innocent.jpg',
''
);
const fileInput = page.locator('input[type="file"]');
if (await fileInput.isVisible()) {
await fileInput.setInputFiles(disguisedFile);
const submitButton = page.getByRole('button', { name: /upload|submit/i });
if (await submitButton.isVisible()) {
await submitButton.click();
await page.waitForTimeout(2000);
}
// A robust server should reject files where the content type does not match the extension
const pageText = await page.textContent('body');
expect(
/error|invalid|rejected|not.*valid/i.test(pageText || '') || page.url().includes('upload'),
'Disguised file should be rejected by content-type validation'
).toBe(true);
}
});
});
```
## Configuration
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests/form-validation',
timeout: 60_000,
retries: 0, // Validation tests should be deterministic
workers: 1, // Sequential to avoid form state conflicts
reporter: [
['html', { outputFolder: 'reports/html' }],
['json', { outputFile: 'reports/results.json' }],
['list'],
],
use: {
baseURL: process.env.BASE_URL || 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{
name: 'chromium',
use: { browserName: 'chromium' },
},
],
});
```
## Best Practices
1. **Always test server-side validation independently from client-side** -- Use direct API calls (fetch/axios) to submit data that bypasses the browser entirely. If the server accepts it, the validation is incomplete.
2. **Test with the actual character encoding your database uses** -- MySQL in `utf8` mode (not `utf8mb4`) truncates 4-byte Unicode characters silently. Test with emoji and supplementary plane characters to verify full Unicode support.
3. **Verify error messages do not reveal internal details** -- Stack traces, database column names, file paths, and framework version numbers in error messages are information disclosure vulnerabilities.
4. **Test all input fields, not just the obvious ones** -- Hidden fields, dropdown values, radio button values, and URL parameters can all be manipulated by an attacker. Every server-side value that came from the client must be validated.
5. **Include timing-based tests** -- A login form that responds in 100ms for invalid usernames but 500ms for valid ones leaks user enumeration information. Measure response times for different payloads.
6. **Test with and without JavaScript enabled** -- Disable JavaScript in the browser context and verify that the form still works and still validates. HTML5 validation attributes provide a baseline.
7. **Validate CSRF token handling** -- Submit forms without the CSRF token, with an expired token, and with a token from a different session. All should be rejected.
8. **Test rate limiting on form submissions** -- Submit the same form 100 times rapidly. The server should throttle or block excessive submissions to prevent brute force attacks.
9. **Check for mass assignment vulnerabilities** -- Add extra fields to the form submission (like `role=admin` or `isVerified=true`) that are not in the original form. The server must whitelist allowed fields.
10. **Verify consistent validation between create and update operations** -- The same validation rules that apply when creating a record must also apply when updating it. Test both paths.
11. **Test multi-value fields and arrays** -- Fields like `tags[]` or `categories[]` can be manipulated to send unexpected data types. Send a string where an array is expected and vice versa.
12. **Automate regression testing for every fixed vulnerability** -- When a validation bug is found and fixed, add a specific test for that exact payload to prevent regression.
## Anti-Patterns to Avoid
1. **Relying solely on client-side validation** -- HTML5 attributes (`required`, `pattern`, `maxlength`) and JavaScript validation can be removed by any user with browser developer tools. They are a UX convenience, not a security control.
2. **Using blocklist-based input filtering** -- Trying to block known-bad inputs (like `