Enable allowed external iframe src's (#985)

As part of project migration from trinket to the code editor some
additional functionality is required. This PR enables iframes to be used
from the same approved external sources list as used for href's and
other src attributes. By expanding this to allow for self references
(i.e. src with a value the same as the `PUBLIC_URL`) users can embed
other projects they (or we) own in iframes into their projects

Author: sra405

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Support to enable embedding iframes in HTML projects from in-house domains (#985)
 - Unit tests for `pyodide` runner (#976)
 
 ## [0.22.2] - 2024-03-18

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -283,6 +283,8 @@ function HtmlRunner() {
           projectFile.content,
           mimeTypes.lookup(`${projectFile.name}.${projectFile.extension}`),
         );
+      } else if (matchingRegexes(allowedExternalLinks, srcNode.attrs[attr])) {
+        src = srcNode.attrs[attr];
       }
       srcNode.setAttribute(attr, src);
       srcNode.setAttribute("crossorigin", true);

src/utils/externalLinkHelper.js

@@ -3,10 +3,12 @@ import { useDispatch } from "react-redux";
 
 import { setError, triggerCodeRun } from "../redux/EditorSlice";
 
-const domain = `https://rpf.io/`;
+const domain = "https://rpf.io/";
+const host = process.env.PUBLIC_URL || "http://localhost:3010";
 const rpfDomain = new RegExp(`^${domain}`);
+const hostDomain = new RegExp(`^${host}`);
 const allowedInternalLinks = [new RegExp(`^#[a-zA-Z0-9]+`)];
-const allowedExternalLinks = [rpfDomain];
+const allowedExternalLinks = [rpfDomain, hostDomain];
 
 const useExternalLinkState = (showModal) => {
   const dispatch = useDispatch();