62f3b49ed4
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.
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { clsx, type ClassValue } from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
export function sanitizeHtmlWithStyles(htmlString: string): string {
|
|
if (!htmlString) return "";
|
|
|
|
if (typeof window !== "undefined") {
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = htmlString;
|
|
|
|
const dangerousTags = [
|
|
"script",
|
|
"iframe",
|
|
"object",
|
|
"embed",
|
|
"form",
|
|
"input",
|
|
"button",
|
|
];
|
|
const dangerousAttributes = [
|
|
"onclick",
|
|
"onload",
|
|
"onerror",
|
|
"onmouseover",
|
|
"onfocus",
|
|
"onblur",
|
|
];
|
|
|
|
dangerousTags.forEach((tag) => {
|
|
const elements = tempDiv.getElementsByTagName(tag);
|
|
for (let i = elements.length - 1; i >= 0; i--) {
|
|
elements[i].remove();
|
|
}
|
|
});
|
|
|
|
const allElements = tempDiv.getElementsByTagName("*");
|
|
for (let i = 0; i < allElements.length; i++) {
|
|
const element = allElements[i];
|
|
dangerousAttributes.forEach((attr) => {
|
|
if (element.hasAttribute(attr)) {
|
|
element.removeAttribute(attr);
|
|
}
|
|
});
|
|
|
|
Array.from(element.attributes).forEach((attr) => {
|
|
if (attr.name.toLowerCase().startsWith("on")) {
|
|
element.removeAttribute(attr.name);
|
|
}
|
|
});
|
|
}
|
|
|
|
return tempDiv.innerHTML;
|
|
}
|
|
|
|
return htmlString
|
|
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
|
|
.replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
|
|
.replace(/<object[^>]*>[\s\S]*?<\/object>/gi, "")
|
|
.replace(/<embed[^>]*>/gi, "")
|
|
.replace(/on\w+="[^"]*"/gi, "")
|
|
.replace(/on\w+='[^']*'/gi, "");
|
|
}
|
|
|
|
export function stripHtmlTags(htmlString: string): string {
|
|
if (!htmlString) return "";
|
|
|
|
if (typeof window !== "undefined") {
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = htmlString;
|
|
return tempDiv.textContent || tempDiv.innerText || "";
|
|
}
|
|
|
|
return htmlString
|
|
.replace(/<[^>]*>/g, "")
|
|
.replace(/ /g, " ")
|
|
.trim();
|
|
}
|