feat: add HTML sanitization for notification messages

Implement sanitizeHtmlWithStyles utility to safely render HTML content in notification messages while removing dangerous tags and attributes. Update NotificationDetailsCard to use dangerouslySetInnerHTML with sanitization for message display.
This commit is contained in:
AmirReza Jamali
2025-11-15 13:28:30 +03:30
parent 1d1027fab4
commit 62f3b49ed4
2 changed files with 85 additions and 4 deletions
@@ -1,6 +1,7 @@
"use client";
import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
import { capitalize, unixToDate } from "@/utils/shared";
import { sanitizeHtmlWithStyles } from "@/lib/utils";
import { FC } from "react";
import IsVisible from "./IsVisible";
import Status from "./Status";
@@ -43,7 +44,12 @@ export const NotificationDetailsCard: FC<IProps> = ({ data }) => {
<IsVisible condition={!!data.message}>
<hr className="my-5" />
<DetailItem title="Message">
<p className="text-base leading-relaxed">{data.message}</p>
<div
className="text-base leading-relaxed"
dangerouslySetInnerHTML={{
__html: sanitizeHtmlWithStyles(data.message || '')
}}
/>
</DetailItem>
</IsVisible>
</div>