feat(ui): Add option to define custom css and js

[kiblik]

Custom styles (in CSS) are beneficial if you are running DD in the company and you would like to add some corporate colors.

[dryrunsecurity]

DryRun Security Summary

A Django DefectDojo PR introduces global configuration for custom CSS and JavaScript files, presenting potential security risks including XSS vulnerabilities, malicious file inclusion, configuration exposure, and CSP implications.

Expand for full summary

The PR adds global configuration for custom CSS and JavaScript files across the Django DefectDojo application, enabling dynamic UI customization with potential security implications. Security findings include:

1. XSS Vulnerability Risk: In dojo/context_processors.py, the addition of CUSTOM_CSS and CUSTOM_JS could introduce Cross-Site Scripting (XSS) vulnerabilities if these settings are not properly sanitized before rendering.

2. Potential Malicious File Inclusion: In dojo/templates/base.html, while using {% static %} provides some protection, there's an implicit risk of including potentially unsafe external scripts and stylesheets.

3. Configuration Exposure: The global exposure of custom configuration settings could potentially leak information about the application's customization.

4. Content Security Policy (CSP) Implications: Dynamically including external scripts and stylesheets could potentially bypass strict Content Security Policy settings.

Code Analysis

We ran 7 analyzers against 3 files and 0 analyzers had findings. 7 analyzers had no findings.

View PR in the DryRun Dashboard.

[dryrunsecurity]

DryRun Security Summary

The pull request adds the ability to include custom JavaScript and CSS files in DefectDojo through new settings, enabling application customization while emphasizing the importance of carefully vetting these files for potential security risks.

Expand for full summary

Summary:

The code changes in this pull request focus on adding the ability to include custom JavaScript and CSS files in the DefectDojo application. This is achieved by introducing two new settings, DD_CUSTOM_CSS and DD_CUSTOM_JS, which allow administrators to specify the paths to custom CSS and JavaScript files, respectively. These files are then included in the base HTML template of the application.

From an application security perspective, these changes provide a way for developers and administrators to extend the functionality and styling of the DefectDojo application. However, it is crucial to ensure that the custom CSS and JavaScript files are properly vetted and do not introduce any security vulnerabilities, such as cross-site scripting (XSS) or code injection issues. Developers should review the content of these files and ensure that they are properly sanitized and validated before including them in the application.

Additionally, it is recommended to implement a secure process for managing and updating these custom files, such as using a version control system and implementing appropriate access controls and review processes. This will help to mitigate the potential risks associated with the introduction of custom code into the application.

Files Changed:

1. dojo/templates/base.html: This file has been updated to include new sections for loading custom JavaScript and CSS files, if the CUSTOM_JS and CUSTOM_CSS variables are set, respectively. This provides a way for developers to easily extend the functionality and styling of the DefectDojo application.

2. dojo/settings/settings.dist.py: Two new settings, DD_CUSTOM_CSS and DD_CUSTOM_JS, have been added to the Django application's configuration. These settings allow administrators to specify the paths to custom CSS and JavaScript files, which will be included in the application's user interface.

3. dojo/context_processors.py: The globalize_vars function has been updated to include two new context variables, CUSTOM_CSS and CUSTOM_JS, which are likely used to provide the custom CSS and JavaScript file paths to the application's templates.

Code Analysis

We ran 9 analyzers against 3 files and 0 analyzers had findings. 9 analyzers had no findings.

View PR in the DryRun Dashboard.

[kiblik]

@mtesauro or @Maffooch any feedback regarding this proposal?

[zet-mar]

From my point of view, it could be beneficial not just for our company but also for all the others who have defined company design.
Currently, it is possible to solve this but by "ugly hack," which will be solved by this implementation. Can you review it and push it forward to production 🙏
Thank you in advance.

[valentijnscholten]

It could be useful. I wonder if we should add a comment about the risks of including/injecting javascript?

[kiblik]

It could be useful. I wonder if we should add a comment about the risks of including/injecting javascript?

Thank you for the review. Where should I place it? To release notes? Or to the settings.dist.py file, next to the definition?

[valentijnscholten]

Or to the settings.dist.py file, next to the definition?

I vote for this.

[Maffooch]

Hi @kiblik,

First off, thank you so much for opening this PR — and for everything you’ve been contributing. Your work has made a huge difference, and we’re really lucky to have you involved.

We gave this change some serious thought. It’s a really interesting idea, and we can absolutely see why having more flexibility would be helpful. That said, we’re a little hesitant to allow injecting custom JS and CSS directly, mainly because of a few concerns around brand consistency, potential security risks, and the challenges it could create for supporting users. We want to make sure the experience stays stable and predictable for everyone using the project.

That said — if there’s a specific problem you’re trying to solve with this, we’d love to work with you to find another way! Maybe there’s a safer or more scoped approach we can take.

Thanks again for everything you’re doing — we truly appreciate it. Looking forward to hearing your thoughts!