Warn users before front components navigate to an external site (#23270)

https://github.com/user-attachments/assets/af3fb042-d066-4e0c-9348-f86ea92a6fcd



Front component anchors render a real host `<a>`, so clicking a link to
another domain performed an uncontrolled full-page navigation. This adds
a phishing-resistant "you're leaving Twenty" confirmation modal before
navigating to an external origin (Fixes
[#23260](https://github.com/twentyhq/twenty/issues/23260)).

The renderer intercepts external anchor clicks in
`createHtmlHostWrapper` and hands the destination to a host callback via
context; twenty-front owns the modal (reuses `ConfirmationModal`) and a
per-application list of trusted origins persisted in localStorage. A
"Don't ask again for this site" checkbox (checked by default) skips the
modal next time for that app.

Scope is external cross-origin http(s) links only; same-origin links
keep native behavior. External links always open in a new tab, so a
component can never navigate the Twenty tab away, even once its origin
is trusted. The modal is rendered by the trusted host, so components
cannot style or suppress it.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23270?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front-component-renderer/src/host/utils/createAnchorNavigationClickHandler.ts

@@ -0,0 +1,52 @@
+import { isFunction, isNonEmptyString } from '@sniptt/guards';
+import { type MouseEvent } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+import { type RemoteEventHandler } from '@/host/types/RemoteEventHandler';
+import { type RequestExternalNavigation } from '@/host/types/RequestExternalNavigation';
+import { isExternalNavigationUrl } from '@/host/utils/isExternalNavigationUrl';
+
+const PRIMARY_MOUSE_BUTTON = 0;
+const MIDDLE_MOUSE_BUTTON = 1;
+
+type CreateAnchorNavigationClickHandlerParams = {
+  href: unknown;
+  remoteOnClick: unknown;
+  requestExternalNavigation: RequestExternalNavigation | null;
+};
+
+export const createAnchorNavigationClickHandler =
+  ({
+    href,
+    remoteOnClick,
+    requestExternalNavigation,
+  }: CreateAnchorNavigationClickHandlerParams) =>
+  (event: MouseEvent<HTMLAnchorElement>) => {
+    // Bound to both onClick and onAuxClick: a middle click opens a new tab
+    // through auxclick, never click. auxclick also fires on right click, which
+    // must stay untouched so the native context menu keeps working.
+    const clickCanOpenNavigation =
+      event.button === PRIMARY_MOUSE_BUTTON ||
+      event.button === MIDDLE_MOUSE_BUTTON;
+
+    if (
+      isDefined(requestExternalNavigation) &&
+      clickCanOpenNavigation &&
+      isNonEmptyString(href) &&
+      isExternalNavigationUrl(href)
+    ) {
+      event.preventDefault();
+
+      requestExternalNavigation({
+        url: new URL(href, window.location.href).href,
+      });
+
+      return;
+    }
+
+    const clickIsPrimaryActivation = event.button === PRIMARY_MOUSE_BUTTON;
+
+    if (clickIsPrimaryActivation && isFunction(remoteOnClick)) {
+      (remoteOnClick as RemoteEventHandler)(event);
+    }
+  };