Jenkins - HTML Publisher Plugin - No CSS is displayed when report is viewed in Jenkins Server
HtmlCssJenkinsJenkins PluginsHtml Problem Overview
I have a strange problem with the Jenkins HTML Publisher plugin, wherein all the fancy CSS I have added to the report is stripped out when viewed in Jenkins. If I download the report to local, I am able to see the CSS formatting. Is there a setting in Jenkins which allows CSS to be viewed?
My HTML Publisher Settings in Jenkins:
My Report Page when displayed in Jenkins :
My Report Page when displayed in Local :
Html Solutions
Solution 1 - Html
Figured out the issue. Sharing it here for other users.
CSS is stripped out because of the Content Security Policy in Jenkins. (https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy)
The default rule is set to:
sandbox; default-src 'none'; img-src 'self'; style-src 'self';
This rule set results in the following:
- No JavaScript allowed at all
- No plugins (object/embed) allowed
- No inline CSS, or CSS from other sites allowed
- No images from other sites allowed
- No frames allowed
- No web fonts allowed
- No XHR/AJAX allowed, etc.
To relax this rule, go to
-
Manage Jenkins->
-
Manage Nodes->
-
Click settings(gear icon)->
-
click Script console on left and type in the following command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
and Press Run. If you see the output as 'Result:' below "Result" header then the protection disabled. Re-Run your build and you can see that the new HTML files archived will have the CSS enabled.
Solution 2 - Html
In CentOs, to enable images in html report
sudo vi /etc/sysconfig/jenkins
- set following in
JENKINS_JAVA_OPTION
JENKINS_JAVA_OPTIONS="-Djava.awt.headless=true -Dhudson.model.DirectoryBrowserSupport.CSP=\"default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' 'unsafe-inline' data:;\""
This will work even after restarting jenkins' server.
Directive
> default-src: The default-src is the default policy for loading content such as JavaScript, Images, CSS, Fonts, AJAX requests, Frames, HTML5 Media > > img-src: Defines valid sources of images.
Source Value
> ' self ' - Allows loading resources from the same origin (same scheme, host and port).
>
> Usage : default-src 'self'
>
> ' unsafe-inline ' - Allows use of inline source elements such as style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) and javascript: URIs.
>
> Usage : default-src 'unsafe-inline'
>
> ' unsafe-eval ' - Allows unsafe dynamic code evaluation such as JavaScript eval()
>
> Usage : default-src 'unsafe-eval'
>
> data: - Allows loading resources via the data scheme (eg Base64 encoded images).
>
>Usage : img-src 'self' data:
Please refer more about content security policy here
Solution 3 - Html
Go to “Manage Jenkins” -> “Script console” and run below command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
Solution 4 - Html
You can fix this by using the groovy command as specified in Vall's answer.
The effect is in place until Jenkins restarts and afterwards you have to do it again.
A solution to solve this problem is to configure a job that will do this for you whenever jenkins starts up.
You can do this by using the Startup Trigger plugin.
After you install it create a new job and you will have a new checkbox under the Build Triggers section that you will have to check.
Then add an Execute system Groovy script build step with the command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","")
Save and everything should work.
Solution 5 - Html
(The following solution is for Windows.)
A permanent fix is to change a line in [Jenkins directory]\jenkins.xml
(for me it's at C:\Jenkins\jenkins.xml
)
<executable>java.exe</executable>
<arguments>[arguments are here]</arguments>
Add the following argument to the whitespace-separated list of arguments:
-Dhudson.model.DirectoryBrowserSupport.CSP=
Then restart the Jenkins service to pick up the change.
Solution 6 - Html
For Ubuntu 14 version helpful was special plugins:
https://wiki.jenkins-ci.org/display/JENKINS/Startup+Trigger - To start job on jenkins startup
https://wiki.jenkins-ci.org/display/JENKINS/Groovy+plugin - To run System Groovy script
And I made a job, that starts on Jenkins restart and sets parametr.
And added system Groovy script to set parametr. System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; img-src 'self';")
Solution 7 - Html
On CentOS, the below solution (which was suggested in comments of another answer) is the only one which has worked for me:
- Go to: Manage Jenkins > Manage Nodes and Clouds
- Click Gear icon on the right hand side for the node (by default there will be just one Node called Master)
- Click 'Script Console' on the left
- Enter the following into the console window:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' 'unsafe-inline' data:;")
- Click Run
- You should see some output in the Result section, similar to below screenshot:
My particular issue was missing images/css in Serenity BDD reports. After performing these steps my Serenity reports had all images/css rendering properly, including reports from builds which had executed prior to this change. This solution will also work for any published html-based report.
Solution 8 - Html
Go To
> Manage Jenkins --> Script console
and type in the following command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
then Press Run. if you get the output as 'Result', then rerun the build check the HTML report format
Solution 9 - Html
For setting permanently create a Groovy script file $JENKINS_HOME/init.groovy, or any .groovy file in the directory $JENKINS_HOME/init.groovy.d/ with the following content:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox allow-scripts; default-src 'self'; img-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline';")
systemctl restart jenkins
https://wiki.jenkins.io/display/JENKINS/Post-initialization+script
Solution 10 - Html
Open jenkins.xml file and copy arguments as below. it will fix permanently. Once its done restart your machine.
<arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -Dhudson.model.DirectoryBrowserSupport.CSP="sandbox allow-scripts; default-src 'self'; style-src 'self' 'unsafe-inline';" -jar "%BASE%\jenkins.war" --httpPort=8080 --webroot="%BASE%\war"</arguments
Solution 11 - Html
It's too late to respond but thought to share.
I was struggling with Jenkins deployed on Tomcat, tried execution of script, it helps but goes away if tomcat is rebooted.
Made the permanent fix by setting the property in catalina.properties in tomcat.
Properties file: tomcat_installation_dir/conf/catalina.properties Just copy paste the below line in catalina.properties at the last (you can set it anywhere just to not mess with existing properties)
-Dhudson.model.DirectoryBrowserSupport.CSP=""
Solution 12 - Html
To set the system property permanently if using Jenkins-X, then create the file myvalues.yaml
in the current directory, with the following content:
jenkins:
Master:
JavaOpts: >
-Dhudson.model.DirectoryBrowserSupport.CSP=
Then restart the jenkins-x platform, which can be done by upgrading it:
$ jx upgrade platform --always-upgrade
# Presumably jx.exe is used if on Windows (not tested)
To avoid actually upgrading the platform, just forcibly upgrade it to the same version:
$ version=$(jx version --no-version-check\
| grep 'jenkins x platform' | sed -e 's/^jenkins.\+ //')
$ jx upgrade platform --version ${version} --always-upgrade
Solution 13 - Html
For those who are using asciidoctor-maven-plugin
plugin to produce an HTML document from the asciidoc file to further publish it to Jenkins, update the plugin configuration, add linkcss
attribute:
<configuration>
<attributes>
<linkcss>true</linkcss>
</attributes>
<backend>html5</backend>
<outputDirectory>${project.build.directory}/generated-resources</outputDirectory>
</configuration>
Solution 14 - Html
We have a much simpler solution to the problem. Unless you really insist on having the HTML reports, you can just use the Warnings NG plugin (which is a good idea anyway):
https://github.com/jenkinsci/warnings-ng-plugin/blob/master/SUPPORTED-FORMATS.md
We use this for CodeNarc (Groovy), but also for Checkstyle, PMD, SpotBugs and Java warnings (Java).
Solution 15 - Html
- In MacOS, Jenkins runs a service, that needs to create a groovy script inside $JENKINS_HOME/init.groovy.d
- Call startup-properties.groovy and code :
import jenkins.model.Jenkins
import java.util.logging.LogManager
/* Jenkins home directory */
def jenkinsHome = Jenkins.instance.getRootDir().absolutePath
def logger = LogManager.getLogManager().getLogger("")
/* Replace the Key and value with the values you want to set.*/
/* System.setProperty(key, value) */
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
logger.info("Jenkins Startup Script: Successfully updated the system properties value for hudson.model.DirectoryBrowserSupport.CSP . Script location : ${jenkinsHome}/init.groovy.d")
- Restart the Jenkins Service: brew services restart jenkins-lts
Re-build the job and verify the HTML report into the build
Solution 16 - Html
I had the same issues after adding HTTPS to my jenkins. In case you are having the same issue, the solution is easy - set your Jenkins url to use HTTPS protocol instead of HTTP. It can be configured via jenkins configuration -> jenkins url
Solution 17 - Html
I know this is old, but this worked great for me, and it is what seems to be recommended in the Jenkins docs. I just set the resource root to a different url served from the same location.
"It is strongly recommended to set up the Resource Root URL instead of customizing Content-Security-Policy. Most of the documentation below was written when Content-Security-Policy was first introduced and is retained for use by administrators unable to set up Jenkins to serve user content from a different domain."