feat: Status Page Custom CSS/JS/HTML overrides (Fixes #2863) #3076
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,6 +16,8 @@ import { useIsAdmin } from "../../../../Hooks/v1/useIsAdmin.js"; | |
| import { useLocation } from "react-router-dom"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { useTranslation } from "react-i18next"; | ||
| // --- CHANGE 1: Import useEffect --- | ||
| import { useEffect } from "react"; | ||
coderabbitai[bot] marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const PublicStatus = () => { | ||
| const { url } = useParams(); | ||
|
|
@@ -28,6 +30,59 @@ const PublicStatus = () => { | |
|
|
||
| const [statusPage, monitors, isLoading, networkError] = useStatusPageFetch(false, url); | ||
|
|
||
| // --- CHANGE 2: Inject Custom CSS and JS --- | ||
| useEffect(() => { | ||
| if (!statusPage) return; | ||
|
|
||
| // --- 1. Inject Custom CSS --- | ||
| let styleElement = null; | ||
| if (statusPage.customCSS) { | ||
| styleElement = document.createElement("style"); | ||
| styleElement.id = "custom-status-css"; | ||
| styleElement.innerHTML = statusPage.customCSS; | ||
| document.head.appendChild(styleElement); | ||
| } | ||
coderabbitai[bot] marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| // --- 2. Inject Custom JS --- | ||
| let scriptElement = null; | ||
| if (statusPage.customJavaScript) { | ||
|
There was a problem hiding this comment. P1 | Confidence: High Direct execution of user-provided JavaScript via Code Suggestion: |
||
| try { | ||
| scriptElement = document.createElement("script"); | ||
| scriptElement.id = "custom-status-js"; | ||
|
|
||
| // Wrap in IIFE (Immediately Invoked Function Expression) with internal try/catch | ||
| // This ensures that if the user writes bad JS, it errors to console but doesn't crash the UI | ||
| scriptElement.textContent = ` | ||
| (function() { | ||
| try { | ||
| ${statusPage.customJavaScript} | ||
| } catch(e) { | ||
| console.error('Custom Status Page Script Error:', e); | ||
| } | ||
| })(); | ||
| `; | ||
|
|
||
| document.body.appendChild(scriptElement); | ||
| } catch (e) { | ||
| console.error("Failed to inject custom JS element:", e); | ||
| } | ||
| } | ||
|
Comment on lines
+57
to
+80
There was a problem hiding this comment. Critical: Direct JavaScript injection creates arbitrary code execution vulnerability. Injecting admin-provided JavaScript directly into the DOM enables arbitrary code execution on public status pages. Even with admin-only access, this poses severe risks:
In your PR comment response to @SajanGhuman, you acknowledged these risks and stated you would implement mitigations. However, none of the promised security controls are present:
Issue #2863 explicitly requires "strict Content Security Policy" and security controls. This implementation does not meet those requirements. Recommended mitigations (in order of preference):
Consider whether the use case (analytics/chat widgets) can be served by a safer allowlist-based integration approach instead of arbitrary script execution. 🤖 Prompt for AI Agents |
||
|
|
||
| // --- 3. Safe Cleanup --- | ||
| return () => { | ||
| // Clean up CSS using the direct reference | ||
| if (styleElement && document.head.contains(styleElement)) { | ||
| document.head.removeChild(styleElement); | ||
| } | ||
|
|
||
| // Clean up JS using the direct reference | ||
| if (scriptElement && document.body.contains(scriptElement)) { | ||
| document.body.removeChild(scriptElement); | ||
| } | ||
| }; | ||
| }, [statusPage]); | ||
| // ------------------------------------------ | ||
|
|
||
| // Breadcrumbs | ||
| const crumbs = [ | ||
| { name: t("statusBreadCrumbsStatusPages"), path: "/status" }, | ||
|
|
@@ -38,6 +93,7 @@ const PublicStatus = () => { | |
| let sx = { paddingLeft: theme.spacing(20), paddingRight: theme.spacing(20) }; | ||
| let link = undefined; | ||
| const isPublic = location.pathname.startsWith("/status/uptime/public"); | ||
|
|
||
| // Public status page | ||
| if (isPublic && statusPage && statusPage.showAdminLoginLink === true) { | ||
| sx = { | ||
|
|
@@ -147,18 +203,33 @@ const PublicStatus = () => { | |
| sx={{ ...sx, position: "relative" }} | ||
| > | ||
| {!isPublic && <Breadcrumbs list={crumbs} />} | ||
|
|
||
| {/* --- CHANGE 3: Custom Header Logic --- */} | ||
| {statusPage?.headerHTML ? ( | ||
| <div dangerouslySetInnerHTML={{ __html: statusPage.headerHTML }} /> | ||
| ) : ( | ||
| <ControlsHeader | ||
| statusPage={statusPage} | ||
| url={url} | ||
| isPublic={isPublic} | ||
| /> | ||
| )} | ||
| {/* ------------------------------------- */} | ||
|
|
||
| <Typography variant="h2">{t("statusPageStatusServiceStatus")}</Typography> | ||
| <StatusBar monitors={monitors} /> | ||
| <MonitorsList | ||
| monitors={monitors} | ||
| statusPage={statusPage} | ||
| /> | ||
|
|
||
| {link} | ||
|
|
||
| {/* --- CHANGE 4: Custom Footer Logic --- */} | ||
| {statusPage?.footerHTML && ( | ||
| <div dangerouslySetInnerHTML={{ __html: statusPage.footerHTML }} /> | ||
| )} | ||
| {/* ------------------------------------- */} | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P2 | Confidence: Medium
While there's a warning helper text, the UI doesn't sufficiently communicate the security implications to administrators. The feature enables arbitrary code execution on public pages, which should be accompanied by more prominent warnings and potentially an explicit acknowledgment checkbox.
Code Suggestion: