Keywords: html | css | jenkins | jenkins-plugins | content-security-policy
Abstract: This article addresses the problem where CSS styles are not displayed in HTML reports when viewed on the Jenkins server using the HTML Publisher Plugin. The core cause is Jenkins' default Content Security Policy (CSP), which restricts inline and external CSS. The solution involves modifying system properties via the Script Console to disable CSP, with discussions on security risks and best practices. Aimed at Jenkins administrators and developers for quick diagnosis and fix.
Problem Description
When using the HTML Publisher Plugin in Jenkins, users often encounter an issue where CSS styles are stripped from HTML reports when viewed on the Jenkins server, resulting in unformatted pages. However, downloading the same reports locally displays CSS correctly. This inconsistency affects report readability and functionality, requiring a solution.
Root Cause: Content Security Policy (CSP)
The root of this problem lies in Jenkins' default Content Security Policy (CSP). CSP is a security mechanism designed to prevent threats like cross-site scripting (XSS) by restricting the types of resources a page can load. Jenkins' default CSP rule is: sandbox; default-src 'none'; img-src 'self'; style-src 'self';. This rule entails:
- No JavaScript execution is allowed.
- Plugins (e.g., object or embed elements) are prohibited.
- Inline CSS or CSS from external sites is blocked.
- Only images from the same domain are permitted.
- Frames, web fonts, and AJAX requests are disallowed.
Solution: Modifying CSP Settings
To resolve CSS display issues, CSP restrictions need to be relaxed. The most direct approach is to disable CSP, but this may introduce security risks and is recommended only for testing or controlled environments. Follow these steps:
- Log into the Jenkins management interface and navigate to Manage Jenkins.
- Select Manage Nodes.
- Click the settings icon (gear icon).
- In the left menu, click Script Console.
- In the script console, enter the following command and click Run:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")After execution, if the output shows "Result:" (under the "Result" header), CSP protection is disabled. Then, re-run the build job, and newly archived HTML files should display CSS styles normally. This method overrides the default CSP rule by setting a system property, allowing CSS loading.
Considerations and Best Practices
Disabling CSP can expose Jenkins instances to security threats, such as XSS attacks. Therefore, it is advised to:
- Implement this solution only in non-production environments or tightly controlled networks.
- Consider customizing CSP rules instead of complete disablement. For example, set a more permissive CSP value to allow specific CSS sources. Custom CSP rules can be adjusted via system properties, e.g.,
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "style-src 'self' 'unsafe-inline';")to permit inline CSS. - Host CSS files locally on the Jenkins server or use relative paths to reduce external dependencies.
- Regularly update Jenkins and plugins to incorporate the latest security patches.