fix(settings): regex sanitization, handle form submission on enter

Author: kahboom

src/modules/components/Settings.tsx

@@ -54,6 +54,11 @@ export function Settings({
 		onClose();
 	}, [localBaseUrl, onClose, setBaseUrl]);
 
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		onSave();
+	};
+
 	return (
 		<Modal
 			variant={ModalVariant.small}
@@ -80,7 +85,10 @@ export function Settings({
 				</Button>,
 			]}
 		>
-			<Form id="settings-form">
+			<Form
+				id="settings-form"
+				onSubmit={handleSubmit}
+			>
 				<FormGroup
 					label="Override Rekor Endpoint"
 					labelIcon={
@@ -130,6 +138,10 @@ export function Settings({
 						</FormHelperText>
 					)}
 				</FormGroup>
+				<button
+					type="submit"
+					style={{ display: "none" }}
+				></button>
 			</Form>
 		</Modal>
 	);

src/modules/utils/utils.test.ts

@@ -2,20 +2,25 @@ import { isAcceptedProtocol, isValidUrl, validateUrl } from "./validateUrl";
 
 describe("URL Validation Tests", () => {
 	describe("Individual Function Tests", () => {
-		it("isValidUrl: should validate URL structure", () => {
-			expect(isValidUrl("http://validsite.com")).toBe(true);
-			expect(isValidUrl("justastring")).toBe(false);
-			expect(isValidUrl("")).toBe(false);
-			expect(isValidUrl("http://invalidhostname")).toBe(false);
-		});
-
 		it("isAcceptedProtocol: should check for https protocols", () => {
 			expect(isAcceptedProtocol("http://example.com")).toBe(false);
 			expect(isAcceptedProtocol("example.com")).toBe(false);
 			expect(isAcceptedProtocol("www.example.com")).toBe(false);
 			expect(isAcceptedProtocol("ftp://example.com")).toBe(false);
+			expect(isAcceptedProtocol("http://rekor")).toBe(false);
 			expect(isAcceptedProtocol("https://example.com")).toBe(true);
 		});
+
+		it("isValidUrl: http(s) protocol, valid characters, and tld", () => {
+			expect(isValidUrl("http://rekor")).toBe(true);
+			expect(isValidUrl("https://rekor")).toBe(true);
+			expect(isValidUrl("https://rekor🦩")).toBe(false);
+			expect(isValidUrl("https://rekor-example")).toBe(true);
+			expect(isValidUrl("https://rekor-example.com")).toBe(true);
+			expect(isValidUrl("https://")).toBe(false);
+			expect(isValidUrl("https://₮∌⎛")).toBe(false);
+			expect(isValidUrl("https://😝")).toBe(false);
+		});
 	});
 
 	describe("validateUrl: Composite Function Tests", () => {

src/modules/utils/validateUrl.ts

@@ -18,15 +18,19 @@ export function isAcceptedProtocol(url: string): boolean {
 }
 
 /**
- * Checks if the given string is a valid URL.
+ * Checks if the given string is a valid URL, based on:
+ * 1) http(s) protocol; 2) valid alphanumeric & special chars;
+ * 3) combined length of subdomain & domain must be between 2 and 256
+ * https://regex101.com/r/ecDRn6/1
  * @param url The URL to validate.
  * @returns True if the URL is valid, false otherwise.
  */
 export const isValidUrl = (url: string): boolean => {
+	const regexVal =
+		/^(http(s)?:\/\/.)[-a-zA-Z0-9@:%._\+~#=]{2,256}[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*)$/gm;
+
 	try {
-		const parsedUrl = new URL(url);
-		// check for presence of a dot
-		return parsedUrl.hostname.includes(".");
+		return regexVal.test(url);
 	} catch (error) {
 		return false;
 	}

tsconfig.json

@@ -26,5 +26,5 @@
 		".next/types/**/*.ts",
 		"jest.setup.js"
 	],
-	"exclude": ["coverage", "cypress", "node_modules"]
+	"exclude": ["coverage", "cypress", "cypress.config.ts", "node_modules"]
 }