From 5feb666bdb033f241f95b74b9bb5edd4d8fcd571 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 9 Jul 2026 21:55:25 +0300
Subject: [PATCH] fix(status-page): inject sanitized customCSS on the public
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The customCSS field on status pages was persisted and validated
end-to-end but never rendered on the public page, so operator-supplied
styles had no effect.

Inject the string as a <style> tag on the public route (which the
admin preview iframe also renders), reusing the existing
cssReferencesExternalResource check so external-resource CSS
(@import, url(http…), //…) is dropped defensively on the client.

The admin preview iframe already points at the public URL, so this
one insertion covers both the live page and the in-app preview.
---
 client/src/Pages/StatusPage/Status/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx
index 7700f1c29..4fbf6179a 100644
--- a/client/src/Pages/StatusPage/Status/index.tsx
+++ b/client/src/Pages/StatusPage/Status/index.tsx
@@ -21,6 +21,7 @@ import {
 	getStatusPagePublicUrl,
 	isCustomDomainHost,
 } from "@/Utils/statusPageUrl";
+import { cssReferencesExternalResource } from "@/Utils/customCss";
 import { HeaderStatusPageControls } from "@/Pages/StatusPage/Status/Components/HeaderStatusPageControls";
 import { StatusPageThemeProvider } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import {
@@ -132,6 +133,10 @@ const StatusPageView = () => {
 	// Public route: render directly on the viewport, themed background covers everything.
 	if (isPublic) {
 		const themeConfig = THEME_CONFIGS[resolveStatusPageTheme(statusPage.theme)];
+		const customCss =
+			statusPage.customCSS && !cssReferencesExternalResource(statusPage.customCSS)
+				? statusPage.customCSS
+				: "";
 		return (
 			<StatusPageThemeProvider
 				theme={statusPage.theme}
@@ -139,6 +144,7 @@ const StatusPageView = () => {
 				timezone={statusPage.timezone}
 				paintBody
 			>
+				{customCss && <style>{customCss}</style>}
 				<BaseStatusPage
 					statusPage={statusPage}
 					monitors={monitors}