[v11.2.x] Alerting: Add useReturnTo hook to safely handle returnTo parameter (#96480)

Add useReturnTo hook to safely handle returnTo parameter

Co-authored-by: Konrad Lalik <konrad.lalik@grafana.com>

public/app/features/alerting/unified/Analytics.ts

@@ -29,9 +29,11 @@ export const LogMessages = {
   loadedCentralAlertStateHistory: 'loaded central alert state history',
 };
 
-const { logInfo, logError, logMeasurement } = createMonitoringLogger('features.alerting', { module: 'Alerting' });
+const { logInfo, logError, logMeasurement, logWarning } = createMonitoringLogger('features.alerting', {
+  module: 'Alerting',
+});
 
-export { logError, logInfo, logMeasurement };
+export { logError, logInfo, logMeasurement, logWarning };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function withPerformanceLogging<TFunc extends (...args: any[]) => Promise<any>>(

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx

@@ -30,6 +30,7 @@ import {
   trackAlertRuleFormSaved,
 } from '../../../Analytics';
 import { useDeleteRuleFromGroup } from '../../../hooks/ruleGroup/useDeleteRuleFromGroup';
+import { useReturnTo } from '../../../hooks/useReturnTo';
 import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
 import { saveRuleFormAction } from '../../../state/actions';
 import { RuleFormType, RuleFormValues } from '../../../types/rule-form';
@@ -72,7 +73,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
   const ruleType = translateRouteParamToRuleType(routeParams.type);
   const uidFromParams = routeParams.id;
 
-  const returnTo = !queryParams.returnTo ? '/alerting/list' : String(queryParams.returnTo);
+  const { returnTo } = useReturnTo('/alerting/list');
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
 
   const defaultValues: RuleFormValues = useMemo(() => {
@@ -163,7 +164,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
       const ruleGroupIdentifier = getRuleGroupLocationFromRuleWithLocation(existing);
 
       await deleteRuleFromGroup.execute(ruleGroupIdentifier, existing.rule);
-      locationService.replace(returnTo);
+      locationService.replace(returnTo ?? '/alerting/list');
     }
   };
 
@@ -210,7 +211,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
         {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
         Save rule and exit
       </Button>
-      <Link to={returnTo}>
+      <Link to={returnTo ?? '/alerting/list'}>
         <Button variant="secondary" disabled={submitState.loading} type="button" onClick={cancelRuleCreation} size="sm">
           Cancel
         </Button>

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx

@@ -4,7 +4,6 @@ import { useAsync } from 'react-use';
 
 import { Button, CustomScrollbar, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui';
 import { useAppNotification } from 'app/core/copy/appNotification';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
 import { AppChromeUpdate } from '../../../../../../core/components/AppChrome/AppChromeUpdate';
 import {
@@ -15,6 +14,7 @@ import {
 import { alertRuleApi } from '../../../api/alertRuleApi';
 import { fetchRulerRulesGroup } from '../../../api/ruler';
 import { useDataSourceFeatures } from '../../../hooks/useCombinedRule';
+import { useReturnTo } from '../../../hooks/useReturnTo';
 import { RuleFormValues } from '../../../types/rule-form';
 import { GRAFANA_RULES_SOURCE_NAME } from '../../../utils/datasource';
 import { DEFAULT_GROUP_EVALUATION_INTERVAL, formValuesToRulerGrafanaRuleDTO } from '../../../utils/rule-form';
@@ -39,11 +39,10 @@ export function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFor
     defaultValues: ruleForm,
     shouldFocusError: true,
   });
-  const [queryParams] = useQueryParams();
 
   const existing = Boolean(ruleForm); // always should be true
   const notifyApp = useAppNotification();
-  const returnTo = !queryParams.returnTo ? '/alerting/list' : String(queryParams.returnTo);
+  const { returnTo } = useReturnTo('/alerting/list');
 
   const [exportData, setExportData] = useState<RuleFormValues | undefined>(undefined);
 

public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx

@@ -12,6 +12,7 @@ import { AlertInstanceTotalState, CombinedRule, RuleHealth, RuleIdentifier } fro
 import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
 
 import { defaultPageNav } from '../../RuleViewer';
+import { useReturnTo } from '../../hooks/useReturnTo';
 import { PluginOriginBadge } from '../../plugins/PluginOriginBadge';
 import { Annotation } from '../../utils/constants';
 import { makeDashboardLink, makePanelLink } from '../../utils/misc';
@@ -237,9 +238,9 @@ interface TitleProps {
 
 export const Title = ({ name, paused = false, state, health, ruleType, ruleOrigin }: TitleProps) => {
   const styles = useStyles2(getStyles);
-  const [queryParams] = useQueryParams();
   const isRecordingRule = ruleType === PromRuleType.Recording;
-  const returnTo = queryParams.returnTo ? String(queryParams.returnTo) : '/alerting/list';
+
+  const { returnTo } = useReturnTo('/alerting/list');
 
   return (
     <div className={styles.title}>

public/app/features/alerting/unified/hooks/useReturnTo.test.tsx

@@ -0,0 +1,48 @@
+import { MemoryRouter } from 'react-router-dom';
+import { renderHook } from 'test/test-utils';
+
+import { useReturnTo } from './useReturnTo';
+
+describe('useReturnTo', () => {
+  beforeAll(() => {
+    // @ts-expect-error
+    delete window.location;
+    window.location = { origin: 'https://play.grafana.net' } as Location;
+  });
+
+  it('should return the fallback value when `returnTo` is not present in the query string', () => {
+    const { result } = renderHook(() => useReturnTo('/fallback'), { wrapper: MemoryRouter });
+
+    expect(result.current.returnTo).toBe('/fallback');
+  });
+
+  it('should return the sanitized `returnTo` value when it is present in the query string and is a valid URL within the Grafana app', () => {
+    const { result } = renderHook(() => useReturnTo('/fallback'), {
+      wrapper: ({ children }) => (
+        <MemoryRouter initialEntries={[{ search: '?returnTo=/dashboard/db/my-dashboard' }]}>{children}</MemoryRouter>
+      ),
+    });
+
+    expect(result.current.returnTo).toBe('/dashboard/db/my-dashboard');
+  });
+
+  it('should return the fallback value when `returnTo` is present in the query string but is not a valid URL within the Grafana app', () => {
+    const { result } = renderHook(() => useReturnTo('/fallback'), {
+      wrapper: ({ children }) => (
+        <MemoryRouter initialEntries={[{ search: '?returnTo=https://example.com' }]}>{children}</MemoryRouter>
+      ),
+    });
+
+    expect(result.current.returnTo).toBe('/fallback');
+  });
+
+  it('should return the fallback value when `returnTo` is present in the query string but is a malicious JavaScript URL', () => {
+    const { result } = renderHook(() => useReturnTo('/fallback'), {
+      wrapper: ({ children }) => (
+        <MemoryRouter initialEntries={[{ search: '?returnTo=javascript:alert(1)' }]}>{children}</MemoryRouter>
+      ),
+    });
+
+    expect(result.current.returnTo).toBe('/fallback');
+  });
+});

public/app/features/alerting/unified/hooks/useReturnTo.ts

@@ -0,0 +1,49 @@
+import { textUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
+
+import { logWarning } from '../Analytics';
+
+import { useURLSearchParams } from './useURLSearchParams';
+
+/**
+ * This hook provides a safe way to obtain the `returnTo` URL from the query string parameter
+ * It validates the origin and protocol to ensure the URL is withing the Grafana app
+ */
+export function useReturnTo(fallback?: string): { returnTo: string | undefined } {
+  const emptyResult = { returnTo: fallback };
+
+  const [searchParams] = useURLSearchParams();
+  const returnTo = searchParams.get('returnTo');
+
+  if (!returnTo) {
+    return emptyResult;
+  }
+
+  const sanitizedReturnTo = textUtil.sanitizeUrl(returnTo);
+  const baseUrl = `${window.location.origin}/${config.appSubUrl}`;
+
+  const sanitizedUrl = tryParseURL(sanitizedReturnTo, baseUrl);
+
+  if (!sanitizedUrl) {
+    logWarning('Malformed returnTo parameter', { returnTo });
+    return emptyResult;
+  }
+
+  const { protocol, origin, pathname, search } = sanitizedUrl;
+  if (['http:', 'https:'].includes(protocol) === false || origin !== window.location.origin) {
+    logWarning('Malformed returnTo parameter', { returnTo });
+    return emptyResult;
+  }
+
+  return { returnTo: `${pathname}${search}` };
+}
+
+// Tries to mimic URL.parse method https://developer.mozilla.org/en-US/docs/Web/API/URL/parse_static
+function tryParseURL(sanitizedReturnTo: string, baseUrl: string) {
+  try {
+    const url = new URL(sanitizedReturnTo, baseUrl);
+    return url;
+  } catch (error) {
+    return null;
+  }
+}