Always sanitize user-generated or externally sourced content before rendering it to prevent Cross-Site Scripting (XSS) vulnerabilities. Never use `dangerouslySetInnerHTML` with unsanitized content.
Always sanitize user-generated or externally sourced content before rendering it to prevent Cross-Site Scripting (XSS) vulnerabilities. Never use dangerouslySetInnerHTML with unsanitized content.
When handling user input or external data:
Bad practice:
// Dangerous - susceptible to XSS attacks
const renderTableCell = (content: string) => {
return <div dangerouslySetInnerHTML= />;
};
Good practice:
import DOMPurify from 'dompurify';
// Safe - content is sanitized before rendering
const renderTableCell = (content: string) => {
if (needsHtmlRendering(content)) {
const sanitizedContent = DOMPurify.sanitize(content);
return <div dangerouslySetInnerHTML= />;
}
return <span>{content}</span>;
};
// For image URLs
const renderImage = (imageUrl: string) => {
const sanitizedUrl = sanitizeImageUrl(imageUrl);
// Skip rendering if URL is invalid/unsafe
if (!sanitizedUrl) {
return null;
}
return <img src={sanitizedUrl} alt="User content" />;
};
Enter the URL of a public GitHub repository