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 |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ import StatusBar from "./Components/StatusBar/index.jsx"; | |
| import MonitorsList from "./Components/MonitorsList/index.jsx"; | ||
| import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx"; | ||
| import TextLink from "@/Components/v1/TextLink/index.jsx"; | ||
| import DOMPurify from "dompurify"; | ||
|
|
||
| // Utils | ||
| import { useStatusPageFetch } from "./Hooks/useStatusPageFetch.jsx"; | ||
|
|
@@ -16,6 +17,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 +31,67 @@ 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"; | ||
|
|
||
| // SECURITY FIX: Remove dangerous CSS patterns (url, import, expression) | ||
| const safeCSS = statusPage.customCSS | ||
| .replace(/url\s*\(/gi, '') // Block external data/images | ||
| .replace(/@import/gi, '') // Block external stylesheets | ||
| .replace(/expression\s*\(/gi, '') // Block IE scripts | ||
| .replace(/behavior:/gi, ''); // Block IE behaviors | ||
|
|
||
| styleElement.textContent = safeCSS; // Use textContent instead of innerHTML for extra safety | ||
| document.head.appendChild(styleElement); | ||
|
Comment on lines
44
to
54
There was a problem hiding this comment. CSS sanitization regex is bypassable and incomplete. The regex-based sanitization can be circumvented with whitespace/comment variations (e.g.,
Consider using a dedicated CSS sanitizer library or a stricter allowlist approach. If regex must be used, a more robust pattern: const safeCSS = statusPage.customCSS
- .replace(/url\s*\(/gi, '')
- .replace(/@import/gi, '')
- .replace(/expression\s*\(/gi, '')
- .replace(/behavior:/gi, '');
+ .replace(/url\s*\(/gi, 'blocked(')
+ .replace(/@import\b/gi, '/* blocked */')
+ .replace(/expression\s*\(/gi, 'blocked(')
+ .replace(/behavior\s*:/gi, 'blocked:')
+ .replace(/-moz-binding\s*:/gi, 'blocked:')
+ .replace(/javascript\s*:/gi, 'blocked:');Note: This is still defense-in-depth; a proper CSS parser/sanitizer is more robust. |
||
| } | ||
|
|
||
| // --- 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 +102,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 = { | ||
|
|
@@ -143,23 +208,46 @@ const PublicStatus = () => { | |
|
|
||
| return ( | ||
| <Stack | ||
| gap={theme.spacing(10)} | ||
| sx={{ ...sx, position: "relative" }} | ||
| > | ||
| {!isPublic && <Breadcrumbs list={crumbs} />} | ||
|
|
||
| {/* --- CHANGE 3: Custom Header Logic (SANITIZED) --- */} | ||
| {statusPage?.headerHTML ? ( | ||
| <div | ||
| dangerouslySetInnerHTML={{ | ||
| __html: DOMPurify.sanitize(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 (SANITIZED) --- */} | ||
| {statusPage?.footerHTML && ( | ||
| <div | ||
| dangerouslySetInnerHTML={{ | ||
| __html: DOMPurify.sanitize(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.
Uh oh!
There was an error while loading. Please reload this page.