Validate url parameters

Author: GusevPM

components/modules/proposal/VotesTable.vue

@@ -3,7 +3,7 @@
 import { DateTime } from "luxon"
 
 /** Services */
-import { comma, space, validateCelestiaAddress } from "@/services/utils"
+import { comma, space, validateCelestiaAddress, validateCelestiaValidatorAddress } from "@/services/utils"
 import { getVoteIcon, getVoteIconColor } from "@/services/utils/states"
 
 /** UI */
@@ -124,7 +124,7 @@ watch(
 	() => {
 		if (!searchTerm.value) {
 			emit("onFiltersReset", "address", true)
-		} else if (!validateCelestiaAddress(searchTerm.value)) {
+		} else if (!validateCelestiaAddress(searchTerm.value) && !validateCelestiaValidatorAddress(searchTerm.value)) {
 			emit("updateFilters", "address", "", false)
 		} else {
 			emit("updateFilters", "address", searchTerm.value, true)

components/modules/validator/ValidatorOverview.vue

@@ -431,7 +431,7 @@ const handleDelegate = () => {
 						</Flex>
 
 						<Flex :class="$style.uptime_wrapper">
-							<Tooltip v-for="t in uptime">
+							<Tooltip v-for="t in uptime" @click="navigateTo(`/block/${t.height}`)">
 								<Flex
 									:class="$style.uptime"
 									:style="{

pages/address/[hash].vue

@@ -4,25 +4,32 @@ import AddressOverview from "@/components/modules/address/AddressOverview.vue"
 import VotesTable from "@/components/modules/address/VotesTable.vue"
 import AddressCharts from "@/components/modules/address/AddressCharts.vue"
 
+/** Services */
+import { isValidId } from "@/services/utils"
+
 /** API */
 import { fetchAddressByHash } from "@/services/api/address"
 
 /** Store */
 import { useCacheStore } from "@/store/cache.store"
-
 const cacheStore = useCacheStore()
 
 const route = useRoute()
 const router = useRouter()
 
 const address = ref()
-const { data: rawAddress } = await fetchAddressByHash(route.params.hash)
+const hash = route.params.hash.startsWith("0x") ? route.params.hash.slice(2) : route.params.hash
+if (isValidId(hash, "address")) {
+	const { data: rawAddress } = await fetchAddressByHash(hash)
 
-if (!rawAddress.value) {
-	router.push("/")
+	if (!rawAddress.value) {
+		router.push("/")
+	} else {
+		address.value = rawAddress.value
+		cacheStore.current.address = address.value
+	}
 } else {
-	address.value = rawAddress.value
-	cacheStore.current.address = address.value
+	router.push("/")
 }
 
 defineOgImageComponent("AddressImage", {

pages/block/[height].vue

@@ -4,7 +4,7 @@ import BlockOverview from "@/components/modules/block/BlockOverview.vue"
 import BlobsTable from "@/components/modules/block/BlobsTable.vue"
 
 /** Services */
-import { comma } from "@/services/utils"
+import { comma, isValidId } from "@/services/utils"
 
 /** API */
 import { fetchBlockByHeight } from "@/services/api/block"
@@ -18,6 +18,11 @@ const cacheStore = useCacheStore()
 const route = useRoute()
 
 const block = ref()
+
+if (!isValidId(route.params.height, "block")) {
+	navigateTo("/")
+}
+
 const { data: rawBlock } = await fetchBlockByHeight(route.params.height)
 
 const height = rawBlock.value ? rawBlock.value.height : Number(route.params.height)
@@ -28,7 +33,7 @@ const isUpcomingBlock = ref(!rawBlock.value)
 const isWaited = ref(isUpcomingBlock.value)
 
 if (isUpcomingBlock.value && height > 1_000_000_000_000) {
-	navigateTo(`/blocks`)
+	navigateTo("/")
 }
 
 watch(

pages/namespace/[id].vue

@@ -4,7 +4,7 @@ import NamespaceOverview from "@/components/modules/namespace/NamespaceOverview.
 import NamespaceCharts from "@/components/modules/namespace/NamespaceCharts.vue"
 
 /** Services */
-import { getNamespaceID } from "@/services/utils"
+import { getNamespaceID, isValidId } from "@/services/utils"
 
 /** API */
 import { fetchNamespaceByID } from "@/services/api/namespace"
@@ -17,13 +17,18 @@ const route = useRoute()
 const router = useRouter()
 
 const namespace = ref()
-const { data: rawNamespace } = await fetchNamespaceByID(route.params.id)
 
-if (!rawNamespace.value) {
-	router.push("/")
+if (isValidId(route.params.id, "namespace")) {
+	const { data: rawNamespace } = await fetchNamespaceByID(route.params.id)
+
+	if (!rawNamespace.value) {
+		router.push("/")
+	} else {
+		namespace.value = rawNamespace.value[0]
+		cacheStore.current.namespace = namespace.value
+	}
 } else {
-	namespace.value = rawNamespace.value[0]
-	cacheStore.current.namespace = namespace.value
+	router.push("/")
 }
 
 defineOgImageComponent("NamespaceImage", {

pages/proposal/[id].vue

@@ -4,6 +4,9 @@ import ProposalOverview from "@/components/modules/proposal/ProposalOverview.vue
 import ProposalChanges from "@/components/modules/proposal/ProposalChanges.vue"
 import ProposalDescription from "@/components/modules/proposal/ProposalDescription.vue"
 
+/** Services */
+import { isValidId } from "@/services/utils"
+
 /** API */
 import { fetchProposalById } from "@/services/api/proposal"
 
@@ -14,20 +17,32 @@ const cacheStore = useCacheStore()
 const route = useRoute()
 
 const proposal = ref()
-const { data: rawProposal } = await fetchProposalById({ id: route.params.id })
 
-if (!rawProposal.value) {
-	navigateTo({
+if (isValidId(route.params.id, "proposal")) {
+	const { data: rawProposal } = await fetchProposalById({ id: route.params.id })
+
+	if (!rawProposal.value) {
+		navigateTo({
+			path: "/",
+			query: {
+				error: "not_found",
+				target: "proposal",
+				id: route.params.id,
+			},
+		})
+	} else {
+		proposal.value = rawProposal.value
+		cacheStore.current.proposal = proposal.value
+	}
+} else {
+		navigateTo({
 		path: "/",
 		query: {
 			error: "not_found",
 			target: "proposal",
 			id: route.params.id,
 		},
 	})
-} else {
-	proposal.value = rawProposal.value
-	cacheStore.current.proposal = proposal.value
 }
 
 defineOgImageComponent("ProposalImage", {

pages/tx/[hash].vue

@@ -3,6 +3,9 @@
 import TxOverview from "@/components/modules/tx/TxOverview.vue"
 import BlobsTable from "@/components/modules/block/BlobsTable.vue"
 
+/** Services */
+import { isValidId } from "@/services/utils"
+
 /** API */
 import { fetchTxByHash } from "@/services/api/tx"
 
@@ -14,12 +17,17 @@ const route = useRoute()
 const router = useRouter()
 
 const tx = ref()
-const { data: rawTx } = await fetchTxByHash(route.params.hash)
-if (!rawTx.value) {
-	router.push("/")
+const hash = route.params.hash.startsWith("0x") ? route.params.hash.slice(2) : route.params.hash
+if (isValidId(hash, "tx")) {
+	const { data: rawTx } = await fetchTxByHash(hash)
+	if (!rawTx.value) {
+		router.push("/")
+	} else {
+		tx.value = rawTx.value
+		cacheStore.current.transaction = tx.value
+	}
 } else {
-	tx.value = rawTx.value
-	cacheStore.current.transaction = tx.value
+	router.push("/")
 }
 
 defineOgImageComponent("TxImage", {

pages/validator/[id].vue

@@ -2,6 +2,9 @@
 /** Components: Modules */
 import ValidatorOverview from "@/components/modules/validator/ValidatorOverview.vue"
 
+/** Services */
+import { isValidId } from "@/services/utils"
+
 /** API */
 import { fetchValidatorByID } from "@/services/api/validator"
 
@@ -13,19 +16,23 @@ const route = useRoute()
 const router = useRouter()
 
 const validator = ref()
-const { data: rawValidator } = await fetchValidatorByID(route.params.id)
+if (isValidId(route.params.id, "validator")) {
+	const { data: rawValidator } = await fetchValidatorByID(route.params.id)
 
-if (!rawValidator.value) {
-	router.push("/")
+	if (!rawValidator.value) {
+		router.push("/")
+	} else {
+		validator.value = rawValidator.value
+		cacheStore.current.validator = validator.value
+	}
 } else {
-	validator.value = rawValidator.value
-	cacheStore.current.validator = validator.value
+	router.push("/")
 }
 
 defineOgImageComponent("ValidatorImage", {
 	title: "Validator",
 	validator: validator.value,
-	cacheKey: `${validator.value?.moniker || validator.value.address.hash}`,
+	cacheKey: `${validator.value?.moniker || validator.value?.address?.hash}`,
 })
 
 useHead({

services/utils/general.js

@@ -93,7 +93,23 @@ export const splitAddress = (address, format = "string") => {
 export function validateCelestiaAddress(address) {
 	if (!address) return false
 
-	const prefixes = ["celestiavaloper", "celestiavalcons", "celestia"] // order is important
+	const prefix = "celestia1"
+
+	if (!address.startsWith(prefix)) return false
+
+	const hashPart = address.slice(prefix.length)
+	if (hashPart.length !== 38) return false
+
+	const validChars = /^[qpzry9x8gf2tvdw0s3jn54khce6mua7l]+$/
+	if (!validChars.test(hashPart)) return false
+
+	return true
+}
+
+export function validateCelestiaValidatorAddress(address) {
+	if (!address) return false
+
+	const prefixes = ["celestiavaloper", "celestiavalcons"]
 	const prefix = prefixes.find(p => address.startsWith(p))
 	if (!prefix) return false
 
@@ -103,6 +119,7 @@ export function validateCelestiaAddress(address) {
 	if (hashPart.length !== 38) return false
 
 	const validChars = /^[qpzry9x8gf2tvdw0s3jn54khce6mua7l]+$/
+
 	if (!validChars.test(hashPart)) return false
 
 	return true
@@ -257,3 +274,24 @@ export function hexToRgba(hex, alpha = 255) {
 
 	return `rgba(${r}, ${g}, ${b}, ${a})`
 }
+
+export function isValidId(id, type) {
+	switch (type) {
+		case "block":
+		case "proposal":
+		case "validator":
+			return /^[0-9]+$/.test(id);
+
+		case "tx":
+			return /^[A-Fa-f0-9]{64}$/.test(id);
+
+		case "namespace":
+			return /^[0-9a-f]{56}$/.test(id);
+
+		case "address":
+			return validateCelestiaAddress(id);
+	
+		default:
+			return false;
+	}
+}