feat(security): enforce input length limits in contact form

- Added `EMAIL_MAX_LENGTH` constant (254).
- Added `maxLength` attributes to Name, Email, Subject, and Message inputs.
- Updated `validateForm` to check email length.
- Mitigates client-side DoS and improves UX.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot]
2026-01-29 02:00:58 +00:00
parent 6b8f54072e
commit e84a3313c7

View File

@@ -9,6 +9,7 @@ import { sanitizeInput, isValidEmail } from "../utils/security";
import styles from "./Contact.module.css"; import styles from "./Contact.module.css";
const NAME_MAX_LENGTH = 100; const NAME_MAX_LENGTH = 100;
const EMAIL_MAX_LENGTH = 254;
const SUBJECT_MAX_LENGTH = 200; const SUBJECT_MAX_LENGTH = 200;
const MESSAGE_MAX_LENGTH = 5000; const MESSAGE_MAX_LENGTH = 5000;
@@ -53,6 +54,8 @@ export function Contact() {
if (!formData.email.trim()) { if (!formData.email.trim()) {
newErrors.email = "Required"; newErrors.email = "Required";
} else if (formData.email.length > EMAIL_MAX_LENGTH) {
newErrors.email = `Max ${EMAIL_MAX_LENGTH} characters`;
} else if (!isValidEmail(formData.email)) { } else if (!isValidEmail(formData.email)) {
newErrors.email = "Invalid email"; newErrors.email = "Invalid email";
} }
@@ -165,6 +168,7 @@ export function Contact() {
value={formData.name} value={formData.name}
onChange={(e) => handleChange("name", e.target.value)} onChange={(e) => handleChange("name", e.target.value)}
error={errors.name} error={errors.name}
maxLength={NAME_MAX_LENGTH}
/> />
<Input <Input
@@ -174,6 +178,7 @@ export function Contact() {
value={formData.email} value={formData.email}
onChange={(e) => handleChange("email", e.target.value)} onChange={(e) => handleChange("email", e.target.value)}
error={errors.email} error={errors.email}
maxLength={EMAIL_MAX_LENGTH}
/> />
<Input <Input
@@ -182,6 +187,7 @@ export function Contact() {
value={formData.subject} value={formData.subject}
onChange={(e) => handleChange("subject", e.target.value)} onChange={(e) => handleChange("subject", e.target.value)}
error={errors.subject} error={errors.subject}
maxLength={SUBJECT_MAX_LENGTH}
/> />
<Textarea <Textarea
@@ -191,6 +197,7 @@ export function Contact() {
onChange={(e) => handleChange("message", e.target.value)} onChange={(e) => handleChange("message", e.target.value)}
error={errors.message} error={errors.message}
rows={6} rows={6}
maxLength={MESSAGE_MAX_LENGTH}
/> />
<Button <Button