Enable allowed external iframe src's

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();