Add support for configuring a custom iframe URL (#1200)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

README.md

@@ -179,6 +179,10 @@ The following environment variables configure Livebook:
   * LIVEBOOK_IFRAME_PORT - sets the port that Livebook serves iframes at.
     This is relevant only when running Livebook without TLS. Defaults to 8081.
 
+  * LIVEBOOK_IFRAME_URL - sets the URL that Livebook loads iframes from.
+    By default iframes are loaded from local LIVEBOOK_IFRAME_PORT when accessing
+    Livebook over http:// and from https://livebook.space when accessing over `https://`.
+
   * LIVEBOOK_IP - sets the ip address to start the web application on.
     Must be a valid IPv4 or IPv6 address.
 

assets/js/hooks/js_view.js

@@ -1,4 +1,8 @@
-import { getAttributeOrThrow, parseInteger } from "../lib/attribute";
+import {
+  getAttributeOrDefault,
+  getAttributeOrThrow,
+  parseInteger,
+} from "../lib/attribute";
 import { isElementHidden, randomId, randomToken } from "../lib/utils";
 import { globalPubSub } from "../lib/pub_sub";
 import {
@@ -46,6 +50,8 @@ import { initializeIframeSource } from "./js_view/iframe";
  *   * `data-iframe-local-port` - the local port where the iframe is
  *     served
  *
+ *   * `data-iframe-url` - an optional location to load the iframe from
+ *
  *   * `data-timeout-message` - the message to show when the initial
  *     data does not load
  *
@@ -163,6 +169,7 @@ const JSView = {
         "data-iframe-local-port",
         parseInteger
       ),
+      iframeUrl: getAttributeOrDefault(this.el, "data-iframe-url", null),
       timeoutMessage: getAttributeOrThrow(this.el, "data-timeout-message"),
     };
   },
@@ -265,7 +272,11 @@ const JSView = {
 
   loadIframe() {
     const iframesEl = document.querySelector(`[data-el-js-view-iframes]`);
-    initializeIframeSource(this.iframe, this.props.iframePort).then(() => {
+    initializeIframeSource(
+      this.iframe,
+      this.props.iframePort,
+      this.props.iframeUrl
+    ).then(() => {
       iframesEl.appendChild(this.iframe);
     });
   },

assets/js/hooks/js_view/iframe.js

@@ -28,20 +28,26 @@ import { sha256Base64 } from "../../lib/utils";
 
 const IFRAME_SHA256 = "fA00WeO9LAvgpbMz9vKEU0WTr4Uk5bTt/BxKHdweEz8=";
 
-export function initializeIframeSource(iframe, iframePort) {
-  const iframeUrl = getIframeUrl(iframePort);
+export function initializeIframeSource(iframe, iframePort, iframeUrl) {
+  const url = getIframeUrl(iframePort, iframeUrl);
 
-  return verifyIframeSource(iframeUrl).then(() => {
+  return verifyIframeSource(url).then(() => {
     iframe.sandbox =
       "allow-scripts allow-same-origin allow-downloads allow-modals";
     iframe.allow =
       "accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; usb; xr-spatial-tracking";
-    iframe.src = iframeUrl;
+    iframe.src = url;
   });
 }
 
-function getIframeUrl(iframePort) {
-  return window.location.protocol === "https:"
+function getIframeUrl(iframePort, iframeUrl) {
+  const protocol = window.location.protocol;
+
+  if (iframeUrl) {
+    return iframeUrl.replace(/^https?:/, protocol);
+  }
+
+  return protocol === "https:"
     ? "https://livebook.space/iframe/v3.html"
     : `http://${window.location.hostname}:${iframePort}/iframe/v3.html`;
 }

lib/livebook.ex

@@ -114,6 +114,10 @@ defmodule Livebook do
       config :livebook, :iframe_port, port
     end
 
+    if url = Livebook.Config.iframe_url!("LIVEBOOK_IFRAME_URL") do
+      config :livebook, :iframe_url, url
+    end
+
     if Livebook.Config.boolean!("LIVEBOOK_SHUTDOWN_ENABLED", false) do
       config :livebook, :shutdown_enabled, true
     end

lib/livebook/config.ex

@@ -98,6 +98,14 @@ defmodule Livebook.Config do
     end
   end
 
+  @doc """
+  Returns the configured URL for the iframe endpoint.
+  """
+  @spec iframe_url() :: String.t() | nil
+  def iframe_url() do
+    Application.get_env(:livebook, :iframe_url)
+  end
+
   @doc """
   Returns whether the shutdown feature is enabled.
   """
@@ -269,6 +277,13 @@ defmodule Livebook.Config do
     System.get_env(env)
   end
 
+  @doc """
+  Parses iframe url from env.
+  """
+  def iframe_url!(env) do
+    System.get_env(env)
+  end
+
   @doc """
   Parses and validates default runtime from env.
   """

lib/livebook_web/live/js_view_component.ex

@@ -21,6 +21,7 @@ defmodule LivebookWeb.JSViewComponent do
       data-session-token={session_token(@js_view.pid)}
       data-session-id={@session_id}
       data-iframe-local-port={LivebookWeb.IframeEndpoint.port()}
+      data-iframe-url={Livebook.Config.iframe_url()}
       data-timeout-message={@timeout_message}>
     </div>
     """