From acc145006cd5c1979641ea1c1f331ea4bdf0a067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Varela?= <joselcvarela@gmail.com>
Date: Mon, 19 Apr 2021 16:35:01 +0100
Subject: [PATCH] App: encode primary key (#5143)

* app: encode primary key
Since primary keys could be manually entered strings,
we should encode those in order to prevent accessing
inexistent routes.
E.g.
Document with primary key: 'clients/John Doe'

* fixup! app: encode primary key Since primary keys could be manually entered strings, we should encode those in order to prevent accessing inexistent routes. E.g. Document with primary key: 'clients/John Doe'

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 app/src/composables/use-item/use-item.ts                     | 2 +-
 app/src/composables/use-template-data.ts                     | 2 +-
 app/src/displays/related-values/related-values.vue           | 2 +-
 app/src/interfaces/many-to-one/many-to-one.vue               | 2 +-
 app/src/interfaces/tree-view/tree-view.vue                   | 2 +-
 app/src/layouts/cards/cards.vue                              | 2 +-
 app/src/layouts/tabular/tabular.vue                          | 2 +-
 app/src/modules/activity/routes/item.vue                     | 2 +-
 app/src/modules/collections/routes/item.vue                  | 4 ++--
 app/src/views/private/components/drawer-item/drawer-item.vue | 4 ++--
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/composables/use-item/use-item.ts b/app/src/composables/use-item/use-item.ts
index 1e0efb67a5..0e64f57589 100644
--- a/app/src/composables/use-item/use-item.ts
+++ b/app/src/composables/use-item/use-item.ts
@@ -43,7 +43,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 			return endpoint.value;
 		}
 
-		return `${endpoint.value}/${primaryKey.value}`;
+		return `${endpoint.value}/${encodeURIComponent(primaryKey.value as string)}`;
 	});
 
 	watch([collection, primaryKey], refresh, { immediate: true });
diff --git a/app/src/composables/use-template-data.ts b/app/src/composables/use-template-data.ts
index a7e1a4cdaa..f699831677 100644
--- a/app/src/composables/use-template-data.ts
+++ b/app/src/composables/use-template-data.ts
@@ -25,7 +25,7 @@ export default function useTemplateData(collection: ComputedRef<Collection | und
 
 		const endpoint = collection.value.collection.startsWith('directus_')
 			? `/${collection.value.collection.substring(9)}/${primaryKey.value}`
-			: `/items/${collection.value.collection}/${primaryKey.value}`;
+			: `/items/${collection.value.collection}/${encodeURIComponent(primaryKey.value)}`;
 
 		try {
 			const result = await api.get(endpoint, {
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 2ba61acfe6..af309f57b8 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -76,7 +76,7 @@ export default defineComponent({
 			if (!relatedCollection.value || !primaryKeyField.value) return null;
 			const primaryKey = item[primaryKeyField.value.field];
 
-			return `/collections/${relatedCollection.value}/${primaryKey}`;
+			return `/collections/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
 		}
 	},
 });
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 843ea5caa0..f3baaca720 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -234,7 +234,7 @@ export default defineComponent({
 				try {
 					const endpoint = relatedCollection.value.collection.startsWith('directus_')
 						? `/${relatedCollection.value.collection.substring(9)}/${props.value}`
-						: `/items/${relatedCollection.value.collection}/${props.value}`;
+						: `/items/${relatedCollection.value.collection}/${encodeURIComponent(props.value)}`;
 
 					const response = await api.get(endpoint, {
 						params: {
diff --git a/app/src/interfaces/tree-view/tree-view.vue b/app/src/interfaces/tree-view/tree-view.vue
index 0cee3d4b43..c5210d9193 100644
--- a/app/src/interfaces/tree-view/tree-view.vue
+++ b/app/src/interfaces/tree-view/tree-view.vue
@@ -149,7 +149,7 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(`/items/${props.collection}/${props.primaryKey}`, {
+					const response = await api.get(`/items/${props.collection}/${encodeURIComponent(props.primaryKey)}`, {
 						params: {
 							fields: getFieldsToFetch(),
 						},
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index a7798b52c5..4e3b8413aa 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -450,7 +450,7 @@ export default defineComponent({
 
 		function getLinkForItem(item: Record<string, any>) {
 			if (!primaryKeyField.value) return;
-			return `/collections/${props.collection}/${item[primaryKeyField.value!.field]}`;
+			return `/collections/${props.collection}/${encodeURIComponent(item[primaryKeyField.value!.field])}`;
 		}
 
 		function selectAll() {
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 5f1a13d5f8..314d870ce0 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -537,7 +537,7 @@ export default defineComponent({
 					const primaryKey = item[primaryKeyField.value!.field];
 
 					// eslint-disable-next-line @typescript-eslint/no-empty-function
-					router.push(`/collections/${collection.value}/${primaryKey}`, () => {});
+					router.push(`/collections/${collection.value}/${encodeURIComponent(primaryKey)}`, () => {});
 				}
 			}
 
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index 1b4cefe635..4b609a5746 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -87,7 +87,7 @@ export default defineComponent({
 		const openItemLink = computed(() => {
 			if (!item || !item.value) return;
 
-			return `/collections/${item.value.collection}/${item.value.item}`;
+			return `/collections/${item.value.collection}/${encodeURIComponent(item.value.item)}`;
 		});
 
 		watch(() => props.primaryKey, loadActivity, { immediate: true });
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index b398c3ad69..af4283a65a 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -435,7 +435,7 @@ export default defineComponent({
 				if (props.primaryKey === '+') {
 					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 					const newPrimaryKey = savedItem[primaryKeyField.value!.field];
-					router.replace(`/collections/${props.collection}/${newPrimaryKey}`);
+					router.replace(`/collections/${props.collection}/${encodeURIComponent(newPrimaryKey)}`);
 				}
 			} catch {
 				// Save shows unexpected error dialog
@@ -461,7 +461,7 @@ export default defineComponent({
 		async function saveAsCopyAndNavigate() {
 			try {
 				const newPrimaryKey = await saveAsCopy();
-				if (newPrimaryKey) router.push(`/collections/${props.collection}/${newPrimaryKey}`);
+				if (newPrimaryKey) router.push(`/collections/${props.collection}/${encodeURIComponent(newPrimaryKey)}`);
 			} catch {
 				// Save shows unexpected error dialog
 			}
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 1b5955d413..781201955f 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -238,7 +238,7 @@ export default defineComponent({
 
 				const endpoint = props.collection.startsWith('directus_')
 					? `/${props.collection.substring(9)}/${props.primaryKey}`
-					: `/items/${props.collection}/${props.primaryKey}`;
+					: `/items/${props.collection}/${encodeURIComponent(props.primaryKey)}`;
 
 				let fields = '*';
 
@@ -264,7 +264,7 @@ export default defineComponent({
 
 				const endpoint = collection.startsWith('directus_')
 					? `/${collection.substring(9)}/${props.relatedPrimaryKey}`
-					: `/items/${collection}/${props.relatedPrimaryKey}`;
+					: `/items/${collection}/${encodeURIComponent(props.relatedPrimaryKey)}`;
 
 				try {
 					const response = await api.get(endpoint);