[ENH] Custom CSS Styling for Site/Theme/Page/Module

[thabaum]

Enhancement Proposal: Custom CSS Styling for Theme/Site/Page/Module/Module Instance

Description

Enable users to add custom CSS styling for Theme, Site, Page, or Module in Oqtane Framework. Custom styles can be added via an input field for each level, and the load order should execute after the respective Theme/Site/Page/Module is loaded.

Including Theme as an option could allow for instance-wide custom theme CSS managed via the themes control panel area, providing flexibility in customization.

Integration with Radzen Based HTML/Text V2 Editor

The upcoming Proof of Concept (POC) for the new Radzen based HTML/Text V2 editor could incorporate syntax color display, facilitating easier creation of custom styles. Alternatively, another package with similar capabilities could be considered.

Implementation Details

• Custom CSS input would be stored in the database to allow for dynamic customization without the need for application restarts.
• The input would be inserted into a wrapped <style></style> element and injected in the CSS styles load order, executing after the CSS of the respective Theme/Site/Page/Module, if the custom CSS field is not empty.
• Proper input validation, output encoding, and sanitization would be implemented to mitigate security risks associated with storing dynamic CSS in the database.
• Additional features could include the ability to edit CSS files directly, with an option to restart the application if needed, providing flexibility for advanced users.

Pros and Cons

Saving Custom CSS to the Database:

Pros:

• Dynamic customization without touching the file system.
• Controlled access managed through user roles and permissions.
• Easy updates without deploying new files or restarting the application.
• Seamless integration with other aspects of the application's data model.

Cons:

• Potential performance overhead depending on implementation.
• Increased complexity in managing dynamic CSS.
• Security risks if not properly sanitized.

Adding a New File in the Website:

Pros:

• Improved performance by serving static files.
• Simplicity in adding new files without complex database interactions.
• Caching benefits for improved performance.
• Version control for tracking and managing CSS changes.

Cons:

• Maintenance challenges with managing multiple CSS files.
• Deployment complexities requiring application restarts.
• Less granular access control compared to database-managed CSS.

Additional Considerations

Wrapping CSS content within <style></style> tags helps ensure proper rendering but doesn't enhance the security of the CSS content itself. Proper input sanitization, output encoding, and implementation of Content Security Policy (CSP) are essential to mitigate security risks, including HTML injection and Cross-Site Scripting (XSS) vulnerabilities.