[release-coo-1.5-ocp-4.19] NO-JIRA: Sanitize alert runbook URLs

web/src/components/console/utils/link.spec.tsx

@@ -0,0 +1,45 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+
+jest.mock('@patternfly/react-core', () => ({
+  Button: ({ children, href, rel, target }) => (
+    <a href={href} rel={rel} target={target}>
+      {children}
+    </a>
+  ),
+  Icon: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('@patternfly/react-icons', () => ({
+  ExternalLinkAltIcon: () => null,
+}));
+
+jest.mock('react-linkify', () => ({ children }) => <>{children}</>);
+
+import { ExternalLink } from './link';
+
+describe('ExternalLink', () => {
+  it.each([
+    'https://runbooks.example.com/alert',
+    'http://runbooks.example.com/alert?severity=high',
+  ])('renders an absolute HTTP(S) URL as a link: %s', (href) => {
+    const html = renderToStaticMarkup(<ExternalLink href={href} text={href} />);
+
+    expect(html).toContain(`href="${href}"`);
+  });
+
+  it.each([
+    'javascript:alert(1)',
+    'JaVaScRiPt:alert(1)',
+    'data:text/html,<script>alert(1)</script>',
+    'vbscript:msgbox(1)',
+    'mailto:security@example.com',
+    '/runbooks/alert',
+    '//runbooks.example.com/alert',
+    '\tjavascript:alert(1)',
+    'not a URL',
+  ])('renders an unsafe or invalid URL as text: %s', (href) => {
+    const html = renderToStaticMarkup(<ExternalLink href={href} text={href} />);
+
+    expect(html).not.toMatch(/<a[ >]/);
+  });
+});

web/src/components/console/utils/link.tsx

@@ -1,36 +1,42 @@
-import type { FC, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 import Linkify from 'react-linkify';
 import { Button, Icon } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
-export const ExternalLink: FC<ExternalLinkProps> = ({
+export const ExternalLink: FC<PropsWithChildren<ExternalLinkProps>> = ({
   children,
   href,
   text,
   additionalClassName = '',
   dataTestID,
   stopPropagation,
-}) => (
-  <Button
-    variant="link"
-    component="a"
-    icon={
-      <Icon size="sm">
-        <ExternalLinkAltIcon />
-      </Icon>
-    }
-    className={additionalClassName}
-    href={href}
-    target="_blank"
-    iconPosition="end"
-    rel="noopener noreferrer"
-    data-test-id={dataTestID}
-    {...(stopPropagation ? { onClick: (e) => e.stopPropagation() } : {})}
-    isInline
-  >
-    {children || text}
-  </Button>
-);
+}) => {
+  if (!isSafeExternalURL(href)) {
+    return <>{children || text}</>;
+  }
+
+  return (
+    <Button
+      variant="link"
+      component="a"
+      icon={
+        <Icon size="sm">
+          <ExternalLinkAltIcon />
+        </Icon>
+      }
+      className={additionalClassName}
+      href={href}
+      target="_blank"
+      iconPosition="end"
+      rel="noopener noreferrer"
+      data-test-id={dataTestID}
+      {...(stopPropagation ? { onClick: (e) => e.stopPropagation() } : {})}
+      isInline
+    >
+      {children || text}
+    </Button>
+  );
+};
 
 // Open links in a new window and set noopener/noreferrer.
 export const LinkifyExternal: FC<{ children: ReactNode }> = ({ children }) => (
@@ -45,3 +51,12 @@ type ExternalLinkProps = {
   dataTestID?: string;
   stopPropagation?: boolean;
 };
+
+const isSafeExternalURL = (value: string): value is string => {
+  if (!URL.canParse(value)) {
+    return false;
+  }
+
+  const { protocol } = new URL(value);
+  return protocol === 'http:' || protocol === 'https:';
+};