HTML Text Area

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The HtmlTextArea component provides a secure way to render HTML content with built-in sanitization using DOMPurify. It includes proper styling reset and multiple security presets to safely display rich text content, formatted messages, and HTML previews while protecting against XSS attacks.

Basic Usage

View in Storybook

Note: Interactive examples are available in Storybook. The HtmlTextArea component uses DOMPurify for secure HTML rendering.

Properties

HtmlTextArea

Property	Type	Description
children	string	The HTML content to render as a string.
preset	'basic' | 'rich' | 'full' | 'comments'	Predefined sanitization preset. Default: 'full'
sanitizeOptions	DOMPurify.Config	Custom DOMPurify configuration options (overrides preset).
allowAll	boolean	Whether to allow all HTML tags and attributes (less secure). Default: false
className	string	Additional CSS classes for the container.

Security Presets

Preset	Description	Allowed Tags	Use Case
comments	Most restrictive	p, br, strong, em, a	User comments, reviews
basic	Basic formatting	p, br, strong, em, u, i, b	Simple rich text
rich	Rich text with headings	Basic + headings, lists, blockquotes	Articles, blog posts
full	Full content support	Rich + links, code, tables, media	Documentation, emails

Built-in Security Features

The HtmlTextArea component includes comprehensive security measures:

DOMPurify Integration

• Automatic Sanitization - All HTML content is sanitized using DOMPurify
• XSS Prevention - Removes malicious scripts, event handlers, and dangerous attributes
• Configurable Security - Multiple presets for different security levels
• Custom Configuration - Override default settings with custom DOMPurify options

Security Measures

• Script Removal - All <script> tags are automatically removed
• Event Handler Blocking - Attributes like onclick, onerror, onload are stripped
• JavaScript URL Prevention - javascript: URLs in links are blocked
• Dangerous Tag Filtering - Tags like <object>, <embed>, <form> are removed
• Attribute Sanitization - Only safe attributes are allowed based on preset

CSS Reset

The HtmlTextArea component includes a CSS reset class (unreset) that:

• Restores Default Styles - Brings back browser default styling for HTML elements
• Typography - Ensures proper font sizes, weights, and spacing for headings and text
• Lists - Restores bullet points and numbering for ul/ol elements
• Links - Maintains proper link styling and hover states
• Code Elements - Provides appropriate styling for code and pre elements
• Spacing - Ensures proper margins and padding for content elements

Security Best Practices

✅ Recommended Practices:

1. Use Appropriate Presets - Choose the most restrictive preset that meets your needs
2. Validate Input Sources - Ensure HTML content comes from trusted sources
3. Regular Updates - Keep DOMPurify updated for latest security patches
4. Content Auditing - Regularly audit and review HTML content sources
5. Testing - Test with various content types including potential XSS attempts

⚠️ Security Considerations:

• User-Generated Content - Use comments preset for user-generated content
• External Sources - Be cautious with HTML from external APIs or third parties
• Custom Configuration - Carefully review custom sanitizeOptions to avoid security gaps
• AllowAll Flag - Never use allowAll={true} with untrusted content

Common Use Cases

The HtmlTextArea component is perfect for:

• Rich Text Display - Showing formatted content from WYSIWYG editors
• Email Templates - Previewing HTML email content
• Documentation - Rendering HTML documentation and help content
• Content Management - Displaying CMS-generated HTML content
• Notifications - Showing formatted system messages
• Blog Posts - Rendering HTML blog content
• Code Documentation - Displaying formatted API documentation
• Marketing Content - Showing promotional HTML content

Best Practices

1. Content Sanitization - Always sanitize HTML content before rendering
2. Trusted Sources - Only use content from verified, trusted sources
3. CSS Scoping - Be aware that the unreset class affects all child elements
4. Performance - Avoid frequent re-renders with large HTML content
5. Accessibility - Ensure rendered HTML maintains proper semantic structure
6. Testing - Test with various HTML content types and structures
7. Error Handling - Handle malformed HTML gracefully
8. Security Audits - Regularly audit HTML content sources for security