[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.

[sbwalker]

@thabaum just to clarify... the HTML4 and HTML5 specifications do not technically support <style> elements in the body of an HTML document - they only support them in the head. That being said, many browsers do handle <style> elements in the body - but this approach would not pass any HTML validator. The enhancement proposal is focused on "CSS styling" but does not specify if the expectation is that these styles should be injected in the head, body, or both. The reason why this is important is because the implementation may need to be different depending on where the elements are injected.

[sbwalker]

Oqtane already supports Head Content and Body Content at both the Site level and Page level:

<style> elements specified as Head Content will be injected into the head of the page. <style> elements specified as Body Content are not currently injected because they are not valid based on the HTML specification ( Body Content only supports <script> elements).

[thabaum]

@sbwalker I tried at the page level to use Head Content and at the Site level adding the