fix: [M3-8289] - Properly encode URL and filenames of files (#12077)

* fix: [M3-8289] - Properly encode URL and filenames of files

* No need for e2e since we're encoding at the request

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

Author: jaalah-akamai

packages/manager/src/components/Link.tsx

@@ -8,19 +8,24 @@ import {
 import * as React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Link as RouterLink } from 'react-router-dom';
+import type { LinkProps as _LinkProps } from 'react-router-dom';
 
 import ExternalLinkIcon from 'src/assets/icons/external-link.svg';
 import { useStyles } from 'src/components/Link.styles';
 
 import type { LinkProps as TanStackLinkProps } from '@tanstack/react-router';
-import type { LinkProps as _LinkProps } from 'react-router-dom';
 
 export interface LinkProps extends Omit<_LinkProps, 'to'> {
   /**
    * This property can override the value of the copy passed by default to the aria label from the children.
    * This is useful when the text of the link is unavailable, not descriptive enough, or a single icon is used as the child.
    */
   accessibleAriaLabel?: string;
+  /**
+   * Optional prop to bypass URL sanitization. Use with caution.
+   * @default false
+   */
+  bypassSanitization?: boolean;
   /**
    * Optional prop to render the link as an external link, which features an external link icon, opens in a new tab<br />
    * and provides by default "noopener noreferrer" attributes to prevent security vulnerabilities.
@@ -47,7 +52,7 @@ export interface LinkProps extends Omit<_LinkProps, 'to'> {
    * @example "/profile/display"
    * @example "https://linode.com"
    */
-  to: Exclude<TanStackLinkProps['to'] | (string & {}), null | undefined>;
+  to: Exclude<(string & {}) | TanStackLinkProps['to'], null | undefined>;
 }
 
 /**
@@ -78,14 +83,15 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       children,
       className,
       external,
+      bypassSanitization,
       forceCopyColor,
       hideIcon,
       onClick,
       to,
     } = props;
     const { classes, cx } = useStyles();
-    const sanitizedUrl = () => sanitizeUrl(to);
-    const shouldOpenInNewTab = opensInNewTab(sanitizedUrl());
+    const processedUrl = () => (bypassSanitization ? to : sanitizeUrl(to));
+    const shouldOpenInNewTab = opensInNewTab(processedUrl());
     const childrenAsAriaLabel = flattenChildrenIntoAriaLabel(children);
     const externalNotice = '- link opens in a new tab';
     const ariaLabel = accessibleAriaLabel
@@ -108,16 +114,16 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
 
     return shouldOpenInNewTab ? (
       <a
+        aria-label={ariaLabel}
         className={cx(
           classes.root,
           {
             [classes.forceCopyColor]: forceCopyColor,
           },
           className
         )}
-        aria-label={ariaLabel}
         data-testid={external ? 'external-site-link' : 'external-link'}
-        href={sanitizedUrl()}
+        href={processedUrl()}
         onClick={onClick}
         ref={ref}
         rel="noopener noreferrer"

packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx

@@ -300,16 +300,15 @@ export const ObjectUploader = React.memo((props: Props) => {
   );
 });
 
-export const onUploadProgressFactory = (
-  dispatch: (value: ObjectUploaderAction) => void,
-  fileName: string
-) => (progressEvent: AxiosProgressEvent) => {
-  dispatch({
-    data: {
-      percentComplete:
-        (progressEvent.loaded / (progressEvent.total ?? 1)) * 100,
-    },
-    filesToUpdate: [fileName],
-    type: 'UPDATE_FILES',
-  });
-};
+export const onUploadProgressFactory =
+  (dispatch: (value: ObjectUploaderAction) => void, fileName: string) =>
+  (progressEvent: AxiosProgressEvent) => {
+    dispatch({
+      data: {
+        percentComplete:
+          (progressEvent.loaded / (progressEvent.total ?? 1)) * 100,
+      },
+      filesToUpdate: [fileName],
+      type: 'UPDATE_FILES',
+    });
+  };

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx

@@ -85,7 +85,7 @@ export const ObjectDetailsDrawer = React.memo(
 
         {url ? (
           <StyledLinkContainer>
-            <Link external to={url}>
+            <Link bypassSanitization external to={url}>
               {truncateMiddle(url, 50)}
             </Link>
             <StyledCopyTooltip sx={{ marginLeft: 4 }} text={url} />

packages/manager/src/features/ObjectStorage/utilities.test.ts

@@ -1,17 +1,18 @@
-import { ObjectStorageObject } from '@linode/api-v4/lib/object-storage';
-
 import {
   basename,
   confirmObjectStorage,
   displayName,
   extendObject,
   firstSubfolder,
+  generateObjectUrl,
   isFile,
   isFolder,
   prefixArrayToString,
   tableUpdateAction,
 } from './utilities';
 
+import type { ObjectStorageObject } from '@linode/api-v4/lib/object-storage';
+
 const folder: ObjectStorageObject = {
   etag: null,
   last_modified: null,
@@ -41,7 +42,22 @@ const object3: ObjectStorageObject = {
   size: 0,
 };
 
+const mockHostname = 'my-bucket.linodeobjects.com';
+
 describe('Object Storage utilities', () => {
+  describe('generateObjectUrl', () => {
+    it('returns the correct URL', () => {
+      expect(generateObjectUrl(mockHostname, 'my-object')).toBe(
+        'https://my-bucket.linodeobjects.com/my-object'
+      );
+    });
+    it('encodes the URL for special characters', () => {
+      expect(generateObjectUrl(mockHostname, 'my-object?')).toBe(
+        'https://my-bucket.linodeobjects.com/my-object%3F'
+      );
+    });
+  });
+
   describe('isFolder', () => {
     it('returns `true` if the object has null for fields except `name`', () => {
       expect(isFolder(folder)).toBe(true);

packages/manager/src/features/ObjectStorage/utilities.ts

@@ -6,7 +6,7 @@ import type { ObjectStorageEndpoint } from '@linode/api-v4/lib/object-storage';
 import type { FormikProps } from 'formik';
 
 export const generateObjectUrl = (hostname: string, objectName: string) => {
-  return `https://${hostname}/${objectName}`;
+  return `https://${hostname}/${encodeURIComponent(objectName)}`;
 };
 
 // Objects ending with a / and having a size of 0 are often used to represent