sanitize console urls (#1459)

Author: jsladerman

www/src/components/create-cluster/steps/AuthenticationStep.tsx

@@ -10,6 +10,7 @@ import {
 import styled, { CSSProp, useTheme } from 'styled-components'
 
 import { useCreateClusterContext } from '../CreateClusterWizard'
+import { sanitizeConsoleUrl } from 'components/overview/clusters/all/AllClustersTableCols'
 
 export function AuthenticationStep() {
   const theme = useTheme()
@@ -54,7 +55,7 @@ export function AuthenticationStep() {
             </span>
             <Button
               as="a"
-              href={`https://${consoleUrl}`}
+              href={sanitizeConsoleUrl(consoleUrl)}
               target="_blank"
               margin={`${theme.spacing.medium}px 0`}
               endIcon={<ArrowTopRightIcon />}

www/src/components/overview/clusters/SelfHostedTableCols.tsx

@@ -11,11 +11,12 @@ import { A, Div } from 'honorable'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
-import { ClusterFragment, Source } from '../../../generated/graphql'
+import { Source } from '../../../generated/graphql'
 import { ProviderIcon } from '../../utils/ProviderIcon'
 
 import ClusterHealth from './ClusterHealth'
 import ClusterOwner from './ClusterOwner'
+import { sanitizeConsoleUrl } from './all/AllClustersTableCols'
 import { ClusterListElement } from './clusterListUtils'
 
 const clusterExists = (row: ClusterListElement): boolean =>
@@ -143,9 +144,10 @@ export const ColActions = columnHelper.accessor((row) => row.consoleUrl, {
             secondary
             startIcon={<ConsoleIcon color={theme.colors['icon-default']} />}
             as="a"
-            href={`${row.consoleUrl}`}
+            href={sanitizeConsoleUrl(row.consoleUrl)}
             target="_blank"
             rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
           >
             Go to Console
           </Button>

www/src/components/overview/clusters/all/AllClustersTableCols.tsx

@@ -121,9 +121,10 @@ const ColActions = columnHelper.accessor((instance) => instance, {
           small
           startIcon={<ConsoleIcon color={theme.colors['icon-default']} />}
           as={Link}
-          to={`https://${instance.consoleUrl}`}
+          to={sanitizeConsoleUrl(instance.consoleUrl)}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={(e) => e.stopPropagation()}
         >
           Go to Console
         </Button>
@@ -144,3 +145,6 @@ export const allClustersCols = [
   ColOwner,
   ColActions,
 ]
+
+export const sanitizeConsoleUrl = (url: Nullable<string>) =>
+  url ? `https://${url.replace(/^https?:\/\//, '')}` : ''

www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx

@@ -22,6 +22,7 @@ import { useTheme } from 'styled-components'
 
 import { CellCaption, CellWrap } from '../SelfHostedTableCols'
 import { Link } from 'react-router-dom'
+import { sanitizeConsoleUrl } from '../all/AllClustersTableCols'
 
 const columnHelper = createColumnHelper<ConsoleInstanceFragment>()
 
@@ -172,9 +173,10 @@ const ColActions = columnHelper.accessor((instance) => instance, {
           small
           startIcon={<ConsoleIcon color={theme.colors['icon-default']} />}
           as={Link}
-          to={`https://${instance.url}`}
+          to={sanitizeConsoleUrl(instance.url)}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={(e) => e.stopPropagation()}
         >
           Go to Console
         </Button>