fix(store): Sanitize username and Agent Name in URLs (#9096)

[fix(store): Sanitize username and Agent Name in
URLs](28b86d4a1f)

---------

Co-authored-by: abhi1992002 <abhimanyu1992002@gmail.com>

autogpt_platform/backend/backend/server/v2/store/routes.py

@@ -1,5 +1,6 @@
 import logging
 import typing
+import urllib.parse
 
 import autogpt_libs.auth.depends
 import autogpt_libs.auth.middleware
@@ -150,6 +151,9 @@ async def get_agent(
     It returns the store listing agents details.
     """
     try:
+        username = urllib.parse.unquote(username).lower()
+        # URL decode the agent name since it comes from the URL path
+        agent_name = urllib.parse.unquote(agent_name)
         agent = await backend.server.v2.store.db.get_store_agent_details(
             username=username, agent_name=agent_name
         )
@@ -185,6 +189,8 @@ async def create_review(
         The created review
     """
     try:
+        username = urllib.parse.unquote(username).lower()
+        agent_name = urllib.parse.unquote(agent_name)
         # Create the review
         created_review = await backend.server.v2.store.db.create_store_review(
             user_id=user_id,
@@ -255,6 +261,7 @@ async def get_creator(username: str) -> backend.server.v2.store.model.CreatorDet
     - Creator Details Page
     """
     try:
+        username = urllib.parse.unquote(username).lower()
         creator = await backend.server.v2.store.db.get_store_creator_details(
             username=username.lower()
         )

autogpt_platform/frontend/src/app/store/agent/[creator]/[slug]/page.tsx

@@ -45,7 +45,10 @@ export default async function Page({
 
   const breadcrumbs = [
     { name: "Store", link: "/store" },
-    { name: agent.creator, link: `/store/creator/${agent.creator}` },
+    {
+      name: agent.creator,
+      link: `/store/creator/${encodeURIComponent(agent.creator)}`,
+    },
     { name: agent.agent_name, link: "#" },
   ];
 

autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx

@@ -58,7 +58,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
           by
         </div>
         <Link
-          href={`/store/creator/${creator}`}
+          href={`/store/creator/${encodeURIComponent(creator)}`}
           className="font-geist text-base font-medium text-neutral-800 hover:underline dark:text-neutral-200 sm:text-lg lg:text-xl"
         >
           {creator}

autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx

@@ -31,7 +31,7 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
       </h2>
 
       {/* Content Container */}
-      <div className="absolute left-1/2 top-1/2 mt-[60px] w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center sm:mt-0 md:px-6 lg:px-0">
+      <div className="absolute left-1/2 top-1/2 w-full max-w-[900px] -translate-x-1/2 -translate-y-1/2 px-4 pt-16 text-center md:px-6 lg:px-0">
         <h2 className="font-poppins underline-from-font decoration-skip-ink-none mb-6 text-center text-[48px] font-semibold leading-[54px] tracking-[-0.012em] text-neutral-950 dark:text-neutral-50 md:mb-8 lg:mb-12">
           Build AI agents and share
           <br />

autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx

@@ -38,7 +38,9 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
   const displayedAgents = allAgents.slice(0, 9);
 
   const handleCardClick = (creator: string, slug: string) => {
-    router.push(`/store/agent/${creator}/${slug}`);
+    router.push(
+      `/store/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
+    );
   };
 
   return (

autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx

@@ -24,7 +24,7 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
   const router = useRouter();
 
   const handleCardClick = (creator: string) => {
-    router.push(`/store/creator/${creator}`);
+    router.push(`/store/creator/${encodeURIComponent(creator)}`);
   };
 
   // Only show first 4 creators

autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx

@@ -40,7 +40,9 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   const router = useRouter();
 
   const handleCardClick = (creator: string, slug: string) => {
-    router.push(`/store/agent/${creator}/${slug}`);
+    router.push(
+      `/store/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
+    );
   };
 
   const handlePrevSlide = useCallback(() => {

autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts

@@ -269,7 +269,11 @@ export default class BackendAPI {
     username: string,
     agentName: string,
   ): Promise<StoreAgentDetails> {
-    return this._get(`/store/agents/${username}/${agentName}`);
+    return this._get(
+      `/store/agents/${encodeURIComponent(username)}/${encodeURIComponent(
+        agentName,
+      )}`,
+    );
   }
 
   getStoreCreators(params?: {
@@ -283,7 +287,7 @@ export default class BackendAPI {
   }
 
   getStoreCreator(username: string): Promise<CreatorDetails> {
-    return this._get(`/store/creator/${username}`);
+    return this._get(`/store/creator/${encodeURIComponent(username)}`);
   }
 
   getStoreSubmissions(params?: {
@@ -330,7 +334,9 @@ export default class BackendAPI {
     console.log("Reviewing agent: ", username, agentName, review);
     return this._request(
       "POST",
-      `/store/agents/${username}/${agentName}/review`,
+      `/store/agents/${encodeURIComponent(username)}/${encodeURIComponent(
+        agentName,
+      )}/review`,
       review,
     );
   }