fix: on loading a magic resume link and reading sessionId remove it f…

…rom the url

- Exposing the sessionId has security implications
- The sessionId and the user email are required to successfully resume their session
- Read the sessionId but then immediately remove it from the url.
- This means it's barely visible and not dispalyed for the rest of the session

editor.planx.uk/src/pages/Preview/ResumePage.tsx

@@ -16,6 +16,7 @@ import { ApplicationPath, SendEmailPayload } from "types";
 import Input from "ui/Input";
 import InputLabel from "ui/InputLabel";
 import InputRow from "ui/InputRow";
+import { removeSessionIdSearchParamWithoutReloading } from "utils";
 import { object, string } from "yup";
 
 import ReconciliationPage from "./ReconciliationPage";
@@ -215,7 +216,14 @@ const ResumePage: React.FC = () => {
     getInitialEmailValue(route.url.query.email),
   );
   const [paymentRequest, setPaymentRequest] = useState<MinPaymentRequest>();
-  const sessionId = useCurrentRoute().url.query.sessionId;
+
+  // Read the sessionId from the url to validate against
+  const sessionId = route.url.query.sessionId;
+
+  // As the sessionId has been extracted it can now be removed to avoid
+  // unnecessarily exposing it
+  removeSessionIdSearchParamWithoutReloading();
+
   const [reconciliationResponse, setReconciliationResponse] =
     useState<ReconciliationResponse>();
 

editor.planx.uk/src/utils.ts

@@ -62,3 +62,9 @@ export const removeSessionIdSearchParam = () => {
   window.history.pushState({}, document.title, currentURL);
   window.location.reload();
 };
+
+export const removeSessionIdSearchParamWithoutReloading = () => {
+  const currentURL = new URL(window.location.href);
+  currentURL.searchParams.delete("sessionId");
+  window.history.replaceState({}, document.title, currentURL);
+};