From f74419ff21f1930c77a410aca8149cf27916c684 Mon Sep 17 00:00:00 2001
From: Gandalf <gandalf@storm.pl>
Date: Tue, 23 Dec 2025 02:01:06 +0100
Subject: [PATCH] fix(security): Prevent CSS injection in profile cover images

Add validation and escaping for cover image URLs used in CSS contexts.

Changes:
- Create css-utils with escapeCssUrl() and isSafeImageUrl()
- Migrate wallet profile-layout from proxifyImageUrl to proxifyImageSrc
- Add CSS escaping to both blog and wallet profile layouts
- Export css-utils from @ui/components

The wallet was using the older proxifyImageUrl which doesn't encode
URLs, making it vulnerable to CSS injection. Now both apps use
proxifyImageSrc (Base58 encoding) plus CSS escaping for defense-in-depth.
---
 .../layouts/user-profile/profile-layout.tsx   | 27 +++++++++------
 .../components/common/profile-layout.tsx      | 30 +++++++++++------
 packages/ui/components/index.tsx              |  1 +
 packages/ui/lib/css-utils.ts                  | 33 +++++++++++++++++++
 4 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/lib/css-utils.ts

diff --git a/apps/blog/features/layouts/user-profile/profile-layout.tsx b/apps/blog/features/layouts/user-profile/profile-layout.tsx
index 6fb3fc566..c06377285 100644
--- a/apps/blog/features/layouts/user-profile/profile-layout.tsx
+++ b/apps/blog/features/layouts/user-profile/profile-layout.tsx
@@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import env from '@beam-australia/react-env';
 
 import { useTranslation } from '@/blog/i18n/client';
-import { Avatar, AvatarFallback, AvatarImage, proxifyImageSrc, getUserAvatarUrl } from '@ui/components';
+import { Avatar, AvatarFallback, AvatarImage, proxifyImageSrc, getUserAvatarUrl, escapeCssUrl, isSafeImageUrl } from '@ui/components';
 import { Separator } from '@hive/ui/components/separator';
 import TimeAgo from '@ui/components/time-ago';
 import { Icons } from '@hive/ui/components/icons';
@@ -29,6 +29,21 @@ import { getTwitterInfo } from '@transaction/lib/custom-api';
 import ListItem from './list-item';
 import { useUserClient } from '@smart-signer/lib/auth/use-user-client';
 
+const getCoverImageStyle = (profileData: { posting_json_metadata?: string } | null): string => {
+  try {
+    if (!profileData?.posting_json_metadata) return '';
+    const metadata = JSON.parse(profileData.posting_json_metadata);
+    const coverImage = metadata?.profile?.cover_image;
+
+    if (!coverImage || !isSafeImageUrl(coverImage)) return '';
+
+    const proxifiedUrl = proxifyImageSrc(coverImage, 2048, 512);
+    return `url('${escapeCssUrl(proxifiedUrl.replace(/ /g, '%20'))}')`;
+  } catch {
+    return '';
+  }
+};
+
 const ProfileLayout = ({ children }: { children: ReactNode }) => {
   const { user } = useUserClient();
   const { t } = useTranslation('common_blog');
@@ -105,15 +120,7 @@ const ProfileLayout = ({ children }: { children: ReactNode }) => {
       >
         <div
           style={{
-            backgroundImage:
-              profileData?.posting_json_metadata &&
-              JSON.parse(profileData?.posting_json_metadata).profile?.cover_image
-                ? `url('${proxifyImageSrc(
-                    JSON.parse(profileData?.posting_json_metadata).profile?.cover_image,
-                    2048,
-                    512
-                  ).replace(/ /g, '%20')}')`
-                : '',
+            backgroundImage: getCoverImageStyle(profileData),
             backgroundPosition: 'center center',
             backgroundRepeat: 'no-repeat',
             backgroundSize: 'cover'
diff --git a/apps/wallet/components/common/profile-layout.tsx b/apps/wallet/components/common/profile-layout.tsx
index 9ced7a9db..3ec866610 100644
--- a/apps/wallet/components/common/profile-layout.tsx
+++ b/apps/wallet/components/common/profile-layout.tsx
@@ -7,7 +7,8 @@ import { useQuery } from '@tanstack/react-query';
 import { getAccountFull } from '@transaction/lib/hive-api';
 import { Icons } from '@hive/ui/components/icons';
 import { dateToShow } from '@hive/ui/lib/parse-date';
-import { proxifyImageUrl } from '@hive/ui/lib/old-profixy';
+import { proxifyImageSrc } from '@ui/lib/proxify-images';
+import { escapeCssUrl, isSafeImageUrl } from '@ui/lib/css-utils';
 import clsx from 'clsx';
 import {
   DropdownMenu,
@@ -23,6 +24,21 @@ interface IProfileLayout {
   children: React.ReactNode;
 }
 
+const getCoverImageStyle = (profileData: { posting_json_metadata?: string } | null): string => {
+  try {
+    if (!profileData?.posting_json_metadata) return '';
+    const metadata = JSON.parse(profileData.posting_json_metadata);
+    const coverImage = metadata?.profile?.cover_image;
+
+    if (!coverImage || !isSafeImageUrl(coverImage)) return '';
+
+    const proxifiedUrl = proxifyImageSrc(coverImage, 2048, 512);
+    return `url('${escapeCssUrl(proxifiedUrl.replace(/ /g, '%20'))}')`;
+  } catch {
+    return '';
+  }
+};
+
 const ProfileLayout = ({ children }: IProfileLayout) => {
   const { t } = useTranslation('common_wallet');
   const router = useRouter();
@@ -48,15 +64,9 @@ const ProfileLayout = ({ children }: IProfileLayout) => {
         {profileData ? (
           <div
             style={{
-              background:
-                profileData?.posting_json_metadata &&
-                JSON.parse(profileData?.posting_json_metadata).profile?.cover_image
-                  ? `url('${proxifyImageUrl(
-                      JSON.parse(profileData?.posting_json_metadata).profile.cover_image,
-                      '2048x512'
-                    ).replace(/ /g, '%20')}') center center no-repeat`
-                  : '',
-
+              backgroundImage: getCoverImageStyle(profileData),
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
               backgroundSize: 'cover'
             }}
             className="flex h-auto max-h-full min-h-full w-auto min-w-full max-w-full flex-col items-center"
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index 895f299e8..a3d25bb32 100644
--- a/packages/ui/components/index.tsx
+++ b/packages/ui/components/index.tsx
@@ -38,3 +38,4 @@ export * from "./link";
 // utility exports
 export * from "../lib/avatar-utils";
 export * from "../lib/proxify-images";
+export * from "../lib/css-utils";
diff --git a/packages/ui/lib/css-utils.ts b/packages/ui/lib/css-utils.ts
new file mode 100644
index 000000000..3724baee6
--- /dev/null
+++ b/packages/ui/lib/css-utils.ts
@@ -0,0 +1,33 @@
+/**
+ * Escapes special characters in a URL for safe use within CSS url() values.
+ * Prevents CSS injection attacks by escaping characters that could break out
+ * of the url() context.
+ */
+export function escapeCssUrl(url: string): string {
+  return url
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/"/g, '\\"')
+    .replace(/\(/g, '\\(')
+    .replace(/\)/g, '\\)');
+}
+
+/**
+ * Validates that a URL is safe for use as an image source.
+ * Only allows http/https protocols and blocks URLs with CSS injection characters in the path.
+ */
+export function isSafeImageUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    if (!['http:', 'https:'].includes(parsed.protocol)) {
+      return false;
+    }
+    // Block URLs with CSS injection characters in path
+    if (/['"()\\]/.test(parsed.pathname)) {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
-- 
GitLab