unify subdomain validation schema to handle edge cases

This commit is contained in:
Pallavi
2025-08-30 01:14:03 +05:30
parent e8a6efd079
commit 54764dfacd
4 changed files with 174 additions and 148 deletions

View File

@@ -1,24 +1,19 @@
import { z } from "zod"; import { z } from "zod";
export const subdomainSchema = z export const subdomainSchema = z
.string() .string()
.regex( .regex(
/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/, /^(?!:\/\/)([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)*[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/,
"Invalid subdomain format" "Invalid subdomain format"
) )
.min(1, "Subdomain must be at least 1 character long") .min(1, "Subdomain must be at least 1 character long")
.max(63, "Subdomain must not exceed 63 characters")
.transform((val) => val.toLowerCase()); .transform((val) => val.toLowerCase());
export const tlsNameSchema = z export const tlsNameSchema = z
.string() .string()
.regex( .regex(
/^([a-z0-9](?:[a-z0-9-]*[a-z0-9])?)(\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)*$/, /^(?!:\/\/)([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)*[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$|^$/,
"Invalid subdomain format" "Invalid subdomain format"
).max(253, "Domain must not exceed 253 characters") )
.refine((val) => { .transform((val) => val.toLowerCase());
const labels = val.split('.');
return labels.every((label) => label.length <= 63);
}, "Each part of the domain must not exceed 63 characters")
.transform((val) => val.toLowerCase());

View File

@@ -53,6 +53,7 @@ import {
import DomainPicker from "@app/components/DomainPicker"; import DomainPicker from "@app/components/DomainPicker";
import { Globe } from "lucide-react"; import { Globe } from "lucide-react";
import { build } from "@server/build"; import { build } from "@server/build";
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
export default function GeneralForm() { export default function GeneralForm() {
const [formKey, setFormKey] = useState(0); const [formKey, setFormKey] = useState(0);
@@ -454,18 +455,27 @@ export default function GeneralForm() {
<Button <Button
onClick={() => { onClick={() => {
if (selectedDomain) { if (selectedDomain) {
setResourceFullDomain( const sanitizedSubdomain = selectedDomain.subdomain
selectedDomain.fullDomain ? finalizeSubdomainSanitize(selectedDomain.subdomain)
); : "";
form.setValue(
"domainId", const sanitizedFullDomain = sanitizedSubdomain
selectedDomain.domainId ? `${sanitizedSubdomain}.${selectedDomain.fullDomain
); .split(".")
form.setValue( .slice(-2)
"subdomain", .join(".")}`
selectedDomain.subdomain : selectedDomain.fullDomain;
);
setResourceFullDomain(sanitizedFullDomain);
form.setValue("domainId", selectedDomain.domainId);
form.setValue("subdomain", sanitizedSubdomain);
setEditDomainOpen(false); setEditDomainOpen(false);
toast({
title: "Domain sanitized",
description: `Final domain: ${sanitizedFullDomain}`,
});
} }
}} }}
> >

View File

@@ -37,6 +37,12 @@ import { cn } from "@/lib/cn";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { build } from "@server/build"; import { build } from "@server/build";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
sanitizeInputRaw,
finalizeSubdomainSanitize,
validateByDomainType,
isValidSubdomainStructure
} from "@/lib/subdomain-utils";
type OrganizationDomain = { type OrganizationDomain = {
domainId: string; domainId: string;
@@ -255,127 +261,56 @@ export default function DomainPicker2({
const dropdownOptions = generateDropdownOptions(); const dropdownOptions = generateDropdownOptions();
const validateSubdomain = ( const finalizeSubdomain = (sub: string, base: DomainOption): string => {
subdomain: string, const sanitized = finalizeSubdomainSanitize(sub);
baseDomain: DomainOption
): boolean => {
if (!baseDomain) return false;
if (baseDomain.type === "provided-search") { if (!sanitized) {
return subdomain === "" || (
/^[a-zA-Z0-9-]+$/.test(subdomain) &&
isValidSubdomainStructure(subdomain)
);
}
if (baseDomain.type === "organization") {
if (baseDomain.domainType === "cname") {
return subdomain === "";
} else if (baseDomain.domainType === "ns" || baseDomain.domainType === "wildcard") {
// NS and wildcard domains support multi-level subdomains with dots and hyphens
return subdomain === "" || (
/^[a-zA-Z0-9-]+$/.test(subdomain) &&
isValidSubdomainStructure(subdomain)
);
}
}
return false;
};
const sanitizeSubdomain = (input: string): string => {
if (!input) return "";
return input
.toLowerCase()
.replace(/[^a-z0-9-]/g, "");
};
const isValidSubdomainStructure = (subdomain: string): boolean => {
if (!subdomain) return true;
// Check for consecutive hyphens
if (/--/.test(subdomain)) return false;
// Check if starts or ends with hyphen
if (/^-|-$/.test(subdomain)) return false;
return true;
};
// Handle base domain selection
const handleBaseDomainSelect = (option: DomainOption) => {
let sub = subdomainInput;
if (sub) {
const sanitized = sanitizeSubdomain(sub);
if (sub !== sanitized) {
toast({
title: "Invalid subdomain",
description: `"${sub}" was corrected to "${sanitized}"`,
});
sub = sanitized;
setSubdomainInput(sanitized);
}
if (sanitized && !validateSubdomain(sanitized, option)) {
toast({
variant: "destructive",
title: "Invalid subdomain",
description: `"${sanitized}" is not valid for ${option.domain}. Subdomain labels cannot start or end with hyphens.`,
});
sub = "";
setSubdomainInput("");
}
}
setSelectedBaseDomain(option);
setOpen(false);
if (option.domainType === "cname") {
sub = "";
setSubdomainInput("");
}
if (option.type === "provided-search") {
setUserInput("");
setAvailableOptions([]);
setSelectedProvidedDomain(null);
}
const fullDomain = sub ? `${sub}.${option.domain}` : option.domain;
onDomainChange?.({
domainId: option.domainId || "",
type: option.type === "provided-search" ? "provided" : "organization",
subdomain: sub || undefined,
fullDomain,
baseDomain: option.domain
});
};
const handleSubdomainChange = (value: string) => {
const sanitized = sanitizeSubdomain(value);
setSubdomainInput(sanitized);
// Only show toast for truly invalid characters, not structure issues
if (value !== sanitized) {
toast({ toast({
title: "Invalid characters removed", variant: "destructive",
description: `Only letters, numbers, and hyphens are allowed`, title: "Invalid subdomain",
description: `The input "${sub}" was removed because it's not valid.`,
});
return "";
}
const ok = validateByDomainType(sanitized, {
type: base.type === "provided-search" ? "provided-search" : "organization",
domainType: base.domainType
});
if (!ok) {
toast({
variant: "destructive",
title: "Invalid subdomain",
description: `"${sub}" could not be made valid for ${base.domain}.`,
});
return "";
}
if (sub !== sanitized) {
toast({
title: "Subdomain sanitized",
description: `"${sub}" was corrected to "${sanitized}"`,
}); });
} }
return sanitized;
};
const handleSubdomainChange = (value: string) => {
const raw = sanitizeInputRaw(value);
setSubdomainInput(raw);
setSelectedProvidedDomain(null);
if (selectedBaseDomain?.type === "organization") { if (selectedBaseDomain?.type === "organization") {
// Always update the domain, validation will show visual feedback const fullDomain = raw
const fullDomain = sanitized ? `${raw}.${selectedBaseDomain.domain}`
? `${sanitized}.${selectedBaseDomain.domain}`
: selectedBaseDomain.domain; : selectedBaseDomain.domain;
onDomainChange?.({ onDomainChange?.({
domainId: selectedBaseDomain.domainId!, domainId: selectedBaseDomain.domainId!,
type: "organization", type: "organization",
subdomain: sanitized || undefined, subdomain: raw || undefined,
fullDomain, fullDomain,
baseDomain: selectedBaseDomain.domain baseDomain: selectedBaseDomain.domain
}); });
@@ -383,17 +318,7 @@ export default function DomainPicker2({
}; };
const handleProvidedDomainInputChange = (value: string) => { const handleProvidedDomainInputChange = (value: string) => {
const sanitized = sanitizeSubdomain(value); setUserInput(value);
setUserInput(sanitized);
if (value !== sanitized) {
toast({
title: "Invalid characters removed",
description: `Only letters, numbers, hyphens, and dots are allowed`,
});
}
// Clear selected domain when user types
if (selectedProvidedDomain) { if (selectedProvidedDomain) {
setSelectedProvidedDomain(null); setSelectedProvidedDomain(null);
onDomainChange?.({ onDomainChange?.({
@@ -406,6 +331,38 @@ export default function DomainPicker2({
} }
}; };
const handleBaseDomainSelect = (option: DomainOption) => {
let sub = subdomainInput;
sub = finalizeSubdomain(sub, option);
setSubdomainInput(sub);
if (option.type === "provided-search") {
setUserInput("");
setAvailableOptions([]);
setSelectedProvidedDomain(null);
}
setSelectedBaseDomain(option);
setOpen(false);
if (option.domainType === "cname") {
sub = "";
setSubdomainInput("");
}
const fullDomain = sub ? `${sub}.${option.domain}` : option.domain;
onDomainChange?.({
domainId: option.domainId || "",
domainNamespaceId: option.domainNamespaceId,
type: option.type === "provided-search" ? "provided" : "organization",
subdomain: sub || undefined,
fullDomain,
baseDomain: option.domain
});
};
const handleProvidedDomainSelect = (option: AvailableOption) => { const handleProvidedDomainSelect = (option: AvailableOption) => {
setSelectedProvidedDomain(option); setSelectedProvidedDomain(option);
@@ -417,15 +374,19 @@ export default function DomainPicker2({
domainId: option.domainId, domainId: option.domainId,
domainNamespaceId: option.domainNamespaceId, domainNamespaceId: option.domainNamespaceId,
type: "provided", type: "provided",
subdomain: subdomain, subdomain,
fullDomain: option.fullDomain, fullDomain: option.fullDomain,
baseDomain: baseDomain baseDomain
}); });
}; };
const isSubdomainValid = selectedBaseDomain && subdomainInput const isSubdomainValid = selectedBaseDomain && subdomainInput
? validateSubdomain(subdomainInput, selectedBaseDomain) ? validateByDomainType(subdomainInput, {
type: selectedBaseDomain.type === "provided-search" ? "provided-search" : "organization",
domainType: selectedBaseDomain.domainType
})
: true; : true;
const showSubdomainInput = const showSubdomainInput =
selectedBaseDomain && selectedBaseDomain &&
selectedBaseDomain.type === "organization" && selectedBaseDomain.type === "organization" &&
@@ -433,7 +394,7 @@ export default function DomainPicker2({
const showProvidedDomainSearch = const showProvidedDomainSearch =
selectedBaseDomain?.type === "provided-search"; selectedBaseDomain?.type === "provided-search";
const sortedAvailableOptions = availableOptions.sort((a, b) => { const sortedAvailableOptions = [...availableOptions].sort((a, b) => {
const comparison = a.fullDomain.localeCompare(b.fullDomain); const comparison = a.fullDomain.localeCompare(b.fullDomain);
return sortOrder === "asc" ? comparison : -comparison; return sortOrder === "asc" ? comparison : -comparison;
}); });
@@ -482,11 +443,12 @@ export default function DomainPicker2({
} }
}} }}
/> />
{showSubdomainInput && subdomainInput && !isSubdomainValid && ( {showSubdomainInput && subdomainInput && !isValidSubdomainStructure(subdomainInput) && (
<p className="text-sm text-red-500"> <p className="text-sm text-red-500">
Invalid format. Subdomain cannot start/end with hyphens or dots, and cannot have consecutive dots or hyphens. This subdomain contains invalid characters or structure. It will be sanitized automatically when you save.
</p> </p>
)} )}
{showSubdomainInput && !subdomainInput && ( {showSubdomainInput && !subdomainInput && (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("domainPickerEnterSubdomainOrLeaveBlank")} {t("domainPickerEnterSubdomainOrLeaveBlank")}

View File

@@ -0,0 +1,59 @@
export type DomainType = "organization" | "provided" | "provided-search";
export const SINGLE_LABEL_RE = /^[a-z0-9-]+$/i; // provided-search (no dots)
export const MULTI_LABEL_RE = /^[a-z0-9-]+(\.[a-z0-9-]+)*$/i; // ns/wildcard
export const SINGLE_LABEL_STRICT_RE = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i; // start/end alnum
export function sanitizeInputRaw(input: string): string {
if (!input) return "";
return input.toLowerCase().replace(/[^a-z0-9.-]/g, "");
}
export function finalizeSubdomainSanitize(input: string): string {
if (!input) return "";
return input
.toLowerCase()
.replace(/[^a-z0-9.-]/g, "") // allow only valid chars
.replace(/\.{2,}/g, ".") // collapse multiple dots
.replace(/^-+|-+$/g, "") // strip leading/trailing hyphens
.replace(/^\.+|\.+$/g, ""); // strip leading/trailing dots
}
export function validateByDomainType(subdomain: string, domainType: { type: "provided-search" | "organization"; domainType?: "ns" | "cname" | "wildcard" } ): boolean {
if (!domainType) return false;
if (domainType.type === "provided-search") {
return SINGLE_LABEL_RE.test(subdomain);
}
if (domainType.type === "organization") {
if (domainType.domainType === "cname") {
return subdomain === "";
} else if (domainType.domainType === "ns" || domainType.domainType === "wildcard") {
if (subdomain === "") return true;
if (!MULTI_LABEL_RE.test(subdomain)) return false;
const labels = subdomain.split(".");
return labels.every(l => l.length >= 1 && l.length <= 63 && SINGLE_LABEL_RE.test(l));
}
}
return false;
}
export const isValidSubdomainStructure = (input: string): boolean => {
const regex = /^(?!-)([a-zA-Z0-9-]{1,63})(?<!-)$/;
if (!input) return false;
if (input.includes("..")) return false;
return input.split(".").every(label => regex.test(label));
};