ensure external links opened in separate window when document rendered in iframe (#2274)

* hook to inject code into iframe hosted quarto preview output

* open links in new window by default

* use devhost api for opening external windows (vscode and rstudio)

* tidy up iframe devserver script

* tweak check for viewer iframe request

* compute and cache origin / search / isFrame

Co-authored-by: JJ Allaire <[email protected]>

Author: kevinushey

src/command/preview/preview.ts

@@ -611,11 +611,11 @@ function htmlFileRequestHandlerOptions(
           file = format.formatPreviewFile(file, format);
         }
         const fileContents = await Deno.readFile(file);
-        return reloader.injectClient(fileContents, inputFile);
+        return reloader.injectClient(req, fileContents, inputFile);
       } else if (isTextContent(file)) {
         const html = await textPreviewHtml(file, req);
         const fileContents = new TextEncoder().encode(html);
-        return reloader.injectClient(fileContents, inputFile);
+        return reloader.injectClient(req, fileContents, inputFile);
       }
     },
   };

src/core/http-devserver.ts

@@ -21,6 +21,7 @@ export interface HttpDevServer {
   handle: (req: Request) => boolean;
   connect: (req: Request) => Promise<Response | undefined>;
   injectClient: (
+    req: Request,
     file: Uint8Array,
     inputFile?: string,
   ) => FileResponse;
@@ -75,6 +76,11 @@ export function httpDevServer(
     }
   });
 
+  let injectClientInitialized = false;
+  let isFrame: boolean;
+  let origin: string;
+  let search: string;
+
   return {
     handle: (req: Request) => {
       return req.headers.get("upgrade") === "websocket";
@@ -93,10 +99,29 @@ export function httpDevServer(
         return Promise.resolve(undefined);
       }
     },
-    injectClient: (file: Uint8Array, inputFile?: string): FileResponse => {
-      const scriptContents = new TextEncoder().encode(
-        "\n" + devServerClientScript(port, inputFile, isPresentation),
+    injectClient: (
+      req: Request,
+      file: Uint8Array,
+      inputFile?: string,
+    ): FileResponse => {
+      if (!injectClientInitialized) {
+        const url = new URL(req.url);
+        isFrame = isViewerIFrameRequest(req);
+        origin = url.origin;
+        search = url.search;
+        injectClientInitialized = true;
+      }
+
+      const script = devServerClientScript(
+        origin,
+        search,
+        port,
+        inputFile,
+        isPresentation,
+        isFrame,
       );
+
+      const scriptContents = new TextEncoder().encode("\n" + script);
       const fileWithScript = new Uint8Array(
         file.length + scriptContents.length,
       );
@@ -134,29 +159,61 @@ export function httpDevServer(
 }
 
 function devServerClientScript(
+  origin: string,
+  search: string,
   port: number,
   inputFile?: string,
   isPresentation?: boolean,
+  isFrame?: boolean,
 ): string {
   // core devserver
   const devserver = [
-    renderEjs(resourcePath("editor/devserver/devserver-core.html"), {
+    renderEjs(devserverHtmlResourcePath("core"), {
       localhost: kLocalhost,
       port,
     }),
   ];
   if (isPresentation) {
     devserver.push(
-      renderEjs(resourcePath("editor/devserver/devserver-revealjs.html"), {}),
+      renderEjs(devserverHtmlResourcePath("revealjs"), {}),
     );
   } else {
     // viewer devserver
     devserver.push(
-      renderEjs(resourcePath("editor/devserver/devserver-viewer.html"), {
+      renderEjs(devserverHtmlResourcePath("viewer"), {
         inputFile: inputFile || "",
       }),
     );
   }
 
+  if (isFrame) {
+    devserver.push(
+      renderEjs(devserverHtmlResourcePath("iframe"), {
+        origin: origin,
+        search: search,
+      }),
+    );
+  }
+
   return devserver.join("\n");
 }
+
+function devserverHtmlResourcePath(resource: string) {
+  return resourcePath(`editor/devserver/devserver-${resource}.html`);
+}
+
+export function isViewerIFrameRequest(req: Request) {
+  for (const url of [req.url, req.referrer]) {
+    const isViewer = url && (
+      url.includes("capabilities=") || // rstudio viewer
+      url.includes("vscodeBrowserReqId=") || // vscode simple browser
+      url.includes("quartoPreviewReqId=") // generic embedded browser
+    );
+
+    if (isViewer) {
+      return true;
+    }
+  }
+
+  return false;
+}

src/core/pdfjs.ts

@@ -7,6 +7,7 @@
 
 import { basename, join } from "path/mod.ts";
 import { md5Hash } from "./hash.ts";
+import { isViewerIFrameRequest } from "./http-devserver.ts";
 import { FileResponse } from "./http.ts";
 import { contentType } from "./mime.ts";
 import { pathWithForwardSlashes } from "./path.ts";
@@ -63,12 +64,8 @@ export function pdfJsFileHandler(
           basename(pdfFile()),
         );
       // always hide the sidebar in the viewer pane
-      const referrer = req.headers.get("Referer");
-      const isViewer = referrer && (
-        referrer.includes("capabilities=") || // rstudio viewer
-        referrer.includes("vscodeBrowserReqId=") || // vscode simple browser
-        referrer.includes("quartoPreviewReqId=") // generic embedded browser
-      );
+      const isViewer = isViewerIFrameRequest(req);
+
       if (isViewer) {
         viewerJs = viewerJs.replace(
           "sidebarView: sidebarView",

src/project/serve/serve.ts

@@ -350,7 +350,7 @@ export async function serveProject(
     },
 
     // handle html file requests w/ re-renders
-    onFile: async (file: string) => {
+    onFile: async (file: string, req: Request) => {
       // if this is an html file or a pdf then re-render (using the freezer)
       if (isHtmlContent(file) || isPdfContent(file)) {
         // find the input file associated with this output and render it
@@ -442,6 +442,7 @@ export async function serveProject(
             relative(watcher.project().dir, inputFile),
           );
           return watcher.injectClient(
+            req,
             fileContents,
             projInputFile,
           );
@@ -483,7 +484,7 @@ export async function serveProject(
       }
       return {
         print,
-        response: watcher.injectClient(body),
+        response: watcher.injectClient(req, body),
       };
     },
   };
@@ -538,11 +539,11 @@ export async function serveProject(
     // install custom handler for pdfjs
     handlerOptions.onFile = pdfJsFileHandler(
       pdfOutputFile!,
-      async (file: string) => {
+      async (file: string, req: Request) => {
         // inject watcher client for html
         if (isHtmlContent(file)) {
           const fileContents = await Deno.readFile(file);
-          return watcher.injectClient(fileContents);
+          return watcher.injectClient(req, fileContents);
         } else {
           return undefined;
         }

src/project/serve/types.ts

@@ -12,6 +12,7 @@ export interface ProjectWatcher {
   handle: (req: Request) => boolean;
   connect: (req: Request) => Promise<Response | undefined>;
   injectClient: (
+    req: Request,
     file: Uint8Array,
     inputFile?: string,
   ) => FileResponse;

src/project/serve/watch.ts

@@ -346,8 +346,8 @@ export function watchProject(
       return devServer.handle(req);
     },
     connect: devServer.connect,
-    injectClient: (file: Uint8Array, inputFile?: string) => {
-      return devServer.injectClient(file, inputFile);
+    injectClient: (req: Request, file: Uint8Array, inputFile?: string) => {
+      return devServer.injectClient(req, file, inputFile);
     },
     hasClients: () => devServer.hasClients(),
     reloadClients: async (output: boolean, reloadTarget?: string) => {

src/resources/editor/devserver/devserver-iframe.html

@@ -0,0 +1,49 @@
+
+<script type="text/javascript">
+(function() {
+
+  var origin = "<%- origin %>";
+  var search = "<%- search %>";
+
+  function isLocalHref(href) {
+    return href.startsWith(origin);
+  }
+
+  function ensureLinkOpensInNewWindow(linkEl) {
+
+    var useOpenExternalMessage =
+      search.includes("quartoPreviewReqId=") &&
+      window.parent.postMessage;
+
+    if (useOpenExternalMessage) {
+      linkEl.addEventListener("click", function(event) {
+        window.parent.postMessage({
+          type: "openExternal",
+          url: linkEl.href,
+        }, "*");
+        event.preventDefault();
+        return false;
+      });
+    }
+
+    var isRStudio = search.includes("capabilities=");
+    if (isRStudio) {
+      linkEl.target = "_blank";
+    }
+
+  }
+
+  function initialize() {
+    var linkEls = document.getElementsByTagName("a");
+    for (var linkEl of linkEls) {
+      if (!isLocalHref(linkEl.href)) {
+        ensureLinkOpensInNewWindow(linkEl);
+      }
+    }
+  }
+
+  initialize();
+
+})();
+
+</script>