Always sanitize and validate external content before processing or rendering it to prevent security vulnerabilities like XSS (Cross-Site Scripting) and injection attacks. This applies to HTML content from emails, user inputs, URL parameters, and any data from untrusted sources.
Always sanitize and validate external content before processing or rendering it to prevent security vulnerabilities like XSS (Cross-Site Scripting) and injection attacks. This applies to HTML content from emails, user inputs, URL parameters, and any data from untrusted sources.
For HTML content:
import DOMPurify from "dompurify";
// When displaying HTML content
export function HtmlEmail({ html }: { html: string }) {
const srcDoc = useMemo(() => {
try {
const sanitizedHtml = DOMPurify.sanitize(html);
return getIframeHtml(sanitizedHtml);
} catch (error) {
console.error("Failed to process HTML:", error);
return "<p>Failed to load email content</p>";
}
}, [html]);
// Rest of component...
}
// When converting text to HTML
const nudgeHtml = nudge
? nudge
.split("\n")
.filter((line) => line.trim())
.map((line) => `<p>${DOMPurify.sanitize(line)}</p>`)
.join("")
: "";
For URL parameters:
// Instead of string concatenation:
// const url = `/api/endpoint?param=${value}&other=${otherValue}`;
// Use URLSearchParams to properly encode parameters
const url = `/api/endpoint?${new URLSearchParams({
param: value,
other: otherValue,
})}`;
This approach prevents malicious code execution, data theft, session hijacking, and other security vulnerabilities that can arise from improperly handled external content.
Enter the URL of a public GitHub repository