open iframe links in new window

src/components/sync/SyncDiff.tsx

@@ -172,7 +172,7 @@ export const SyncDiff: React.FC = () => {
         id="diffFrame"
         srcDoc={diffResult}
         title="Diff Result"
-        sandbox="allow-scripts"
+        sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
         ref={iframeRef}
       />
     </div>

src/components/sync/SyncEntities.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { DiffResponse, injectResizeScript, removeElementFromHtml } from "../../utils/sync";
+import { DiffResponse, injectScripts, removeElementFromHtml } from "../../utils/sync";
 import { SyncEntityName, WizardContext } from "../../WizardContext";
 import { Loader } from "../Loader";
 import { StepNavigation } from "../menu/StepNavigation";
@@ -72,7 +72,7 @@ export const SyncEntities: React.FC = () => {
       }
 
       const data: DiffResponse = await response.json();
-      const modifiedDiffHtml = injectResizeScript(
+      const modifiedDiffHtml = injectScripts(
         removeElementFromHtml(data.html, ".title"),
       );
 

src/utils/sync.ts

@@ -13,12 +13,16 @@ export const removeElementFromHtml = (
 };
 
 /**
- * appends a script to an HTML, sending height information to parent window via message layer for dynamic resizing
+ * Adds <base> element to open iframe links in new window by default.
+ * Appends <script>, sending height information to parent window via message layer for dynamic resizing.
  */
-export const injectResizeScript = (htmlString: string): string => {
+export const injectScripts = (htmlString: string): string => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlString, "text/html");
 
+  const base = doc.createElement("base");
+  base.target = "_blank";
+
   const script = doc.createElement("script");
   script.type = "text/javascript";
   // adding 5 to the final height fixed an issue wherein scrollbars sometimes appeared following recalculation
@@ -46,5 +50,6 @@ export const injectResizeScript = (htmlString: string): string => {
       })();
     `;
   doc.body.appendChild(script);
+  doc.head.appendChild(base);
   return doc.documentElement.outerHTML;
 };