Tighten URL slug validation (#6442)

* Tighten URL slug validation

* slug sanitization in frontend

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -89,6 +89,8 @@ import {
 } from '@modrinth/ui'
 import { ref } from 'vue'
 
+import { generateUrlSlug } from '~/utils/slugs'
+
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const router = useNativeRouter()
@@ -148,7 +150,7 @@ async function createOrganization(): Promise<void> {
 		const value = {
 			name: name.value.trim(),
 			description: description.value.trim(),
-			slug: slug.value.trim().replace(/ +/g, ''),
+			slug: slug.value.trim(),
 		}
 
 		const result: any = await useBaseFetch('organization', {
@@ -183,12 +185,7 @@ function hide(): void {
 
 function updateSlug(): void {
 	if (!manualSlug.value) {
-		slug.value = name.value
-			.trim()
-			.toLowerCase()
-			.replaceAll(' ', '-')
-			.replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, '')
-			.replaceAll(/--+/gm, '-')
+		slug.value = generateUrlSlug(name.value)
 	}
 }
 

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -145,6 +145,8 @@ import {
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'
 
+import { generateUrlSlug } from '~/utils/slugs'
+
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
 type ProjectTypes = 'server' | 'project'
@@ -461,12 +463,7 @@ async function show(event?: MouseEvent, options?: ShowOptions) {
 
 function updatedName() {
 	if (!manualSlug.value) {
-		slug.value = name.value
-			.trim()
-			.toLowerCase()
-			.replaceAll(' ', '-')
-			.replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, '')
-			.replaceAll(/--+/gm, '-')
+		slug.value = generateUrlSlug(name.value)
 	}
 }
 </script>

apps/frontend/src/utils/slugs.ts

@@ -0,0 +1,10 @@
+const PROJECT_SLUG_UNSAFE_CHARS = /[^a-zA-Z0-9._-]/g
+
+export function generateUrlSlug(value: string) {
+	return value
+		.trim()
+		.toLowerCase()
+		.replaceAll(' ', '-')
+		.replaceAll(PROJECT_SLUG_UNSAFE_CHARS, '')
+		.replaceAll(/--+/gm, '-')
+}