gwchq-textjam 0.2.30 → 0.3.0

package/dist/index.js

@@ -369284,7 +369284,6 @@ const node_html_parser_1 = __webpack_require__(36192);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const react_router_dom_1 = __webpack_require__(92648);
 const EditorSlice_1 = __webpack_require__(68512);
-const externalLinkHelper_1 = __webpack_require__(31615);
 const open_in_new_tab_svg_1 = __importDefault(__webpack_require__(86936));
 const stores_1 = __webpack_require__(32132);
 const ProjectTypes_1 = __webpack_require__(27130);
@@ -369370,29 +369369,22 @@ function HtmlRunner() {
             };
         }
     }, [isPreviewMode]);
-    const showModal = () => {
-        dispatch((0, EditorSlice_1.showErrorModal)());
-        eventListener();
-    };
-    const { externalLink, setExternalLink, handleAllowedExternalLink, handleRegularExternalLink, handleExternalLinkError, } = (0, externalLinkHelper_1.useExternalLinkState)(showModal);
-    const eventListener = () => {
-        window.addEventListener("message", (event) => {
-            if (typeof event.data?.msg === "string") {
-                if (event.data?.msg === "ERROR: External link") {
-                    handleExternalLinkError();
-                }
-                else if (event.data?.msg === "Allowed external link") {
-                    handleAllowedExternalLink(event.data.payload.linkTo);
-                }
-                else {
-                    handleRegularExternalLink(event.data.payload.linkTo);
-                }
-            }
-        });
-    };
+    (0, react_1.useEffect)(() => {
+        const handleReloadMessage = (event) => {
+            if (event.data?.msg !== "RELOAD")
+                return;
+            const nextPage = event.data?.payload?.linkTo;
+            if (typeof nextPage !== "string")
+                return;
+            dispatch((0, EditorSlice_1.setPage)(nextPage));
+            dispatch((0, EditorSlice_1.triggerCodeRun)());
+        };
+        window.addEventListener("message", handleReloadMessage);
+        return () => window.removeEventListener("message", handleReloadMessage);
+    }, [dispatch]);
     const iframeReload = () => {
         const iframe = output.current?.contentDocument;
-        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe) ?? externalLink;
+        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe);
         if (runningFilePath !== filePath) {
             setRunningFilePath(filePath);
         }
@@ -369402,9 +369394,11 @@ function HtmlRunner() {
                 linkElement.addEventListener("click", (e) => {
                     const href = linkElement.getAttribute("href");
                     const target = linkElement.getAttribute("target");
-                    // block in-iframe navigation for links with target="_blank" and .html href
+                    if (!href || target !== "_blank" || (0, helpers_1.isExternalUrl)(href))
+                        return;
+                    // block in-iframe navigation for internal html links with target="_blank"
                     // and open them in a preview tab
-                    if (target === "_blank" && href?.includes(".html")) {
+                    if (href?.includes(".html")) {
                         e.preventDefault();
                         e.stopImmediatePropagation();
                         openPreview(`/${href}`);
@@ -369412,10 +369406,8 @@ function HtmlRunner() {
                 }, true);
             });
         }
-        setExternalLink(null);
     };
     (0, react_1.useEffect)(() => {
-        eventListener();
         dispatch((0, EditorSlice_1.loadingRunner)(EditorTypes_1.RunnerType.HTML));
         dispatch((0, EditorSlice_1.setLoadedRunner)(EditorTypes_1.RunnerType.HTML));
     }, []);
@@ -369440,39 +369432,31 @@ function HtmlRunner() {
         const fileToRun = page ?? defaultPreviewFilePath;
         setRunningFilePath(fileToRun);
         dispatch((0, EditorSlice_1.setError)(null));
-        if (!externalLink) {
-            const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
-            if (!entryPoint) {
-                dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
-                    ? {
-                        type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
-                        details: {
-                            fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
-                        },
-                    }
-                    : {
-                        type: Errors_1.ErrorType.PAGE_NOT_FOUND,
-                    }));
-                dispatch((0, EditorSlice_1.codeRunHandled)());
-                return;
-            }
-            const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
-            const body = indexPage.querySelector("body") || indexPage;
-            const htmlRoot = indexPage.querySelector("html") ?? indexPage;
-            body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
-            htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
-            const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
-            if (output.current) {
-                output.current.srcdoc = content;
-            }
-            if (codeRunTriggered) {
-                dispatch((0, EditorSlice_1.codeRunHandled)());
-            }
+        const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
+        if (!entryPoint) {
+            dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
+                ? {
+                    type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
+                    details: {
+                        fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
+                    },
+                }
+                : {
+                    type: Errors_1.ErrorType.PAGE_NOT_FOUND,
+                }));
+            dispatch((0, EditorSlice_1.codeRunHandled)());
+            return;
         }
-        else {
-            if (output.current) {
-                output.current.src = externalLink;
-            }
+        const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
+        const body = indexPage.querySelector("body") || indexPage;
+        const htmlRoot = indexPage.querySelector("html") ?? indexPage;
+        body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
+        htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
+        const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
+        if (output.current) {
+            output.current.srcdoc = content;
+        }
+        if (codeRunTriggered) {
             dispatch((0, EditorSlice_1.codeRunHandled)());
         }
     };
@@ -369512,7 +369496,7 @@ function HtmlRunner() {
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
 }
 exports["default"] = HtmlRunner;
 
@@ -369591,6 +369575,7 @@ const node_html_parser_1 = __webpack_require__(36192);
 const ProjectTypes_1 = __webpack_require__(27130);
 const binaryStore_1 = __webpack_require__(5060);
 const projectHelpers_1 = __webpack_require__(2610);
+const helpers_1 = __webpack_require__(1108);
 /** Normalizes CSS paths
  * Treats paths without leading / or ./ or ../ as relative to current file
  * E.g. 'image.png' will be treated as './image.png'
@@ -369644,9 +369629,7 @@ const getMimeType = (filePath, fallback = "application/octet-stream") => {
 };
 /** Check if a URL is external, blob, or data */
 const isExternalOrDataUrl = (url) => {
-    return (url.startsWith("blob:") ||
-        /^(https?:)?\/\//.test(url) ||
-        url.startsWith("data:"));
+    return (url.startsWith("blob:") || (0, helpers_1.isExternalUrl)(url) || url.startsWith("data:"));
 };
 async function replaceAsync(input, regex, replacer) {
     let result = "";
@@ -369823,7 +369806,12 @@ async function rewriteSources(indexPage, components, baseFilePath, propName, blo
     const nodes = indexPage.querySelectorAll(`[${propName}]`);
     for (const node of nodes) {
         const raw = node.getAttribute(propName);
-        if (!raw || isExternalOrDataUrl(raw))
+        if (!raw)
+            continue;
+        // For external links with target="_blank", add noopener and noreferrer for security
+        if ((0, helpers_1.isExternalUrl)(raw) && node.getAttribute("target") === "_blank")
+            node.setAttribute("rel", "noopener noreferrer");
+        if (isExternalOrDataUrl(raw))
             continue;
         if ((0, projectHelpers_1.parseFileName)(raw).extension === ProjectTypes_1.ProjectFileExtension.HTML &&
             propName === "href") {
@@ -369876,7 +369864,7 @@ async function resolveAndRewriteHtmlImports(html, projectComponents, baseFilePat
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
+exports.isExternalUrl = exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
 const ProjectTypes_1 = __webpack_require__(27130);
 exports.DEFAULT_ENTRY_FILE_NAME = "index.html";
 exports.DEFAULT_ENTRY_FILE_PATH = `/${exports.DEFAULT_ENTRY_FILE_NAME}`;
@@ -369887,6 +369875,10 @@ const getEntryPoint = (components, filePath) => {
 exports.getEntryPoint = getEntryPoint;
 const getFilenameFromIFrame = (iframe) => iframe?.querySelector("meta[filename]")?.getAttribute("filename") ?? null;
 exports.getFilenameFromIFrame = getFilenameFromIFrame;
+const isExternalUrl = (url) => {
+    return /^(https?:)?\/\//.test(url);
+};
+exports.isExternalUrl = isExternalUrl;
 
 
 /***/ }),
@@ -376667,57 +376659,6 @@ const downloadProjectFile = async (file, fileName) => {
 exports.downloadProjectFile = downloadProjectFile;
 
 
-/***/ }),
-
-/***/ 31615:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.matchingRegexes = exports.allowedInternalLinks = exports.allowedExternalLinks = exports.useExternalLinkState = void 0;
-const react_1 = __webpack_require__(51649);
-const react_redux_1 = __webpack_require__(14062);
-const EditorSlice_1 = __webpack_require__(68512);
-const Errors_1 = __webpack_require__(20339);
-const domain = "https://rpf.io/";
-const host = window?.location?.origin || "http://localhost:3011";
-const rpfDomain = new RegExp(`^${domain}`);
-const hostDomain = new RegExp(`^${host}`);
-const allowedInternalLinks = [new RegExp(`^#[a-zA-Z0-9]+`)];
-exports.allowedInternalLinks = allowedInternalLinks;
-const allowedExternalLinks = [rpfDomain, hostDomain];
-exports.allowedExternalLinks = allowedExternalLinks;
-const useExternalLinkState = (showModal) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const [externalLink, setExternalLink] = (0, react_1.useState)(null);
-    const handleAllowedExternalLink = (linkTo) => {
-        setExternalLink(linkTo);
-        dispatch((0, EditorSlice_1.triggerCodeRun)());
-    };
-    const handleRegularExternalLink = (linkTo) => {
-        setExternalLink(null);
-        dispatch((0, EditorSlice_1.setPage)(linkTo));
-        dispatch((0, EditorSlice_1.triggerCodeRun)());
-    };
-    const handleExternalLinkError = () => {
-        dispatch((0, EditorSlice_1.setError)({ type: Errors_1.ErrorType.EXTERNAL_LINK }));
-        showModal();
-    };
-    return {
-        externalLink,
-        setExternalLink,
-        handleAllowedExternalLink,
-        handleRegularExternalLink,
-        handleExternalLinkError,
-    };
-};
-exports.useExternalLinkState = useExternalLinkState;
-const matchingRegexes = (regexArray, testString) => {
-    return regexArray.some((reg) => reg.test(testString));
-};
-exports.matchingRegexes = matchingRegexes;
-
-
 /***/ }),
 
 /***/ 65404:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.2.30",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",