Input Fields Without Validation Attributes
ID |
html.input_fields_without_validation_attributes |
Severity |
info |
Resource |
Injection |
Language |
Html |
Tags |
CWE:20, NIST.SP.800-53, OWASP:2021:A4, PCI-DSS:6.5.4, PCI-DSS:6.5.6 |
Description
This rule identifies HTML input elements that lack client-side validation attributes. These attributes provide immediate user feedback and establish a first line of defense against malformed or malicious input before data reaches the server.
Rationale
While client-side validation should never be the sole security control, missing validation attributes weakens defense-in-depth and degrades user experience:
Defense-in-Depth: Client-side validation reduces basic attack surface by filtering obviously malformed input before transmission, though it must always be paired with server-side validation.
User Experience: Immediate feedback prevents users from submitting invalid data, reducing server round-trips and frustration.
Attack Deterrence: While bypassable, validation attributes discourage opportunistic attackers and automated scanners probing for low-hanging vulnerabilities.
Compliance Requirements: Standards like PCI-DSS 6.5.4 and OWASP guidelines expect layered input validation as part of secure development practices.
Consider the following code:
<input type="text" name="username" />
<input type="number" name="quantity" />
<input type="email" name="contact" />These fields accept any input without constraint, offering no client-side guidance or validation.
Remediation
Add appropriate validation attributes based on the expected input format and constraints. Always implement corresponding server-side validation as the authoritative security control.
Corrected Example:
<input type="text"
name="username"
maxlength="30"
pattern="[A-Za-z0-9_-]+"
required />
<input type="number"
name="quantity"
min="1"
max="999"
required />
<input type="email"
name="contact"
maxlength="254"
required />JavaScript validation (supplementary):
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('user-form');
if (form) {
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
// Display custom validation messages
}
});
}
});Critical Reminder: Client-side validation is easily bypassed. Always validate and sanitize all inputs on the server side using an allowlist approach.