Jenkins - HTML Publisher Plugin - No CSS is displayed when report is viewed in Jenkins Server

HtmlCssJenkinsJenkins Plugins

Html 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:

enter image description here

My Report Page when displayed in Jenkins :

enter image description here

My Report Page when displayed in Local :

enter image description here

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

  1. Manage Jenkins->

  2. Manage Nodes->

  3. Click settings(gear icon)->

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

set to start build after Jenkins is ran

And added system Groovy script to set parametr. Run System Groovy script 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:

  1. Go to: Manage Jenkins > Manage Nodes and Clouds
  2. Click Gear icon on the right hand side for the node (by default there will be just one Node called Master)
  3. Click 'Script Console' on the left
  4. 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:;")
  5. Click Run
  6. You should see some output in the Result section, similar to below screenshot:

Script Console Result

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

  1. In MacOS, Jenkins runs a service, that needs to create a groovy script inside $JENKINS_HOME/init.groovy.d
  2. 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")
  1. Restart the Jenkins Service: brew services restart jenkins-lts

Re-build the job and verify the HTML report into the build

https://i.stack.imgur.com/A60BN.png

enter image description here

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVallView Question on Stackoverflow
Solution 1 - HtmlVallView Answer on Stackoverflow
Solution 2 - HtmljithinkmatthewView Answer on Stackoverflow
Solution 3 - HtmlSomView Answer on Stackoverflow
Solution 4 - HtmldragosbView Answer on Stackoverflow
Solution 5 - HtmltwasbrilligView Answer on Stackoverflow
Solution 6 - HtmlabiabView Answer on Stackoverflow
Solution 7 - Htmllax1089View Answer on Stackoverflow
Solution 8 - HtmlShailendraView Answer on Stackoverflow
Solution 9 - HtmlKaren DanielyanView Answer on Stackoverflow
Solution 10 - HtmlSivaView Answer on Stackoverflow
Solution 11 - HtmlJava DeveloperView Answer on Stackoverflow
Solution 12 - HtmlGunnarView Answer on Stackoverflow
Solution 13 - HtmlVijay NandwanaView Answer on Stackoverflow
Solution 14 - HtmleerriiccView Answer on Stackoverflow
Solution 15 - Htmlyuliana saavedraView Answer on Stackoverflow
Solution 16 - HtmlBen YitzhakiView Answer on Stackoverflow
Solution 17 - HtmlscottburchView Answer on Stackoverflow