Merge pull request #20384 from mozilla/investigate-react-v2

fix(fxa-settings): Preserve URL hash in query-fix.js for mobile webviews

Author: vbudhram

packages/fxa-settings/public/query-fix.js

@@ -18,6 +18,14 @@
  * application logic (e.g., routing, query parameter parsing) sees the updated URL. */
 
 (function encodeUrlQuery() {
+  // Snapshot the hash now. On mobile WebViews (iOS/Android), later reads of
+  // window.location.hash can return '' even though the hash was present at load.
+  const originalHref = window.location.href;
+  const hashIndex = originalHref.indexOf('#');
+  const hash =
+    window.location.hash ||
+    (hashIndex === -1 ? '' : originalHref.substring(hashIndex));
+
   const { search } = window.location;
   if (!search) return;
   const newSearch =
@@ -31,15 +39,6 @@
       })
       .join('&');
   if (newSearch !== search) {
-    // IMPORTANT: preserve the URL hash fragment. The pairing supplicant
-    // flow encodes channel_id and channel_key in the fragment. On iOS
-    // WKWebView, window.location.hash may be empty when inline scripts
-    // run early, so fall back to parsing the hash from the full href.
-    const hash =
-      window.location.hash ||
-      (window.location.href.includes('#')
-        ? window.location.href.substring(window.location.href.indexOf('#'))
-        : '');
     window.history.replaceState({}, '', newSearch + hash);
   }
 })();

packages/fxa-settings/src/lib/query-fix.test.ts

@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// query-fix.js is a plain JS script with no exports, so we test it by reading
+// the file from disk and executing it with vm.runInNewContext inside a sandbox
+// that provides fake window.location and a jest.fn() for history.replaceState.
+// Each test builds a FakeLocation matching a specific URL scenario and asserts
+// on what replaceState was (or wasn't) called with.
+
+import { readFileSync } from 'fs';
+import path from 'path';
+import { runInNewContext } from 'vm';
+
+type FakeLocation = {
+  readonly href: string;
+  readonly hash: string;
+  readonly search: string;
+};
+
+function runQueryFix(location: FakeLocation) {
+  const replaceState = jest.fn();
+  const script = readFileSync(
+    path.join(__dirname, '../../public/query-fix.js'),
+    'utf8'
+  );
+
+  runInNewContext(script, {
+    location,
+    window: {
+      location,
+      history: {
+        replaceState,
+      },
+    },
+  });
+
+  return replaceState;
+}
+
+describe('query-fix.js', () => {
+  it('re-encodes query parameters without changing URLs that have no hash', () => {
+    const replaceState = runQueryFix({
+      href: 'https://accounts.example.com/pair/supp?scope=profile+sync',
+      hash: '',
+      search: '?scope=profile+sync',
+    });
+
+    expect(replaceState).toHaveBeenCalledWith({}, '', '?scope=profile%2Bsync');
+  });
+
+  it('preserves the pairing hash when query parameters are re-encoded', () => {
+    const hash = '#channel_id=abc&channel_key=def';
+    const replaceState = runQueryFix({
+      href: `https://accounts.example.com/pair/supp?scope=profile+sync${hash}`,
+      hash,
+      search: '?scope=profile+sync',
+    });
+
+    expect(replaceState).toHaveBeenCalledWith(
+      {},
+      '',
+      '?scope=profile%2Bsync#channel_id=abc&channel_key=def'
+    );
+  });
+
+  it('preserves the original pairing hash if later location reads lose it', () => {
+    const hash = '#channel_id=abc&channel_key=def';
+    const hrefWithHash = `https://accounts.example.com/pair/supp?scope=profile+sync${hash}`;
+    const hrefWithoutHash =
+      'https://accounts.example.com/pair/supp?scope=profile+sync';
+    let queryWasRead = false;
+
+    const location = {
+      get href() {
+        return queryWasRead ? hrefWithoutHash : hrefWithHash;
+      },
+      get hash() {
+        return queryWasRead ? '' : hash;
+      },
+      get search() {
+        queryWasRead = true;
+        return '?scope=profile+sync';
+      },
+    };
+
+    const replaceState = runQueryFix(location);
+
+    expect(replaceState).toHaveBeenCalledWith(
+      {},
+      '',
+      '?scope=profile%2Bsync#channel_id=abc&channel_key=def'
+    );
+  });
+
+  it('does not rewrite the URL when the query does not need re-encoding', () => {
+    const hash = '#channel_id=abc&channel_key=def';
+    const replaceState = runQueryFix({
+      href: `https://accounts.example.com/pair/supp?scope=profile%2Bsync${hash}`,
+      hash,
+      search: '?scope=profile%2Bsync',
+    });
+
+    expect(replaceState).not.toHaveBeenCalled();
+  });
+});