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

Question

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 :

Answer 1

Some great answers here, thanks to this wonderful SO community. I thought I will add my 2 cents for people like myself which do not want to compromise on security by Relaxing CSP: https://www.jenkins.io/doc/book/security/configuring-content-security-policy/

I personally run Jenkins, locally, on a static IP behind company's secure VPN: https://192.168.50.127:8080/

Now, the alternative to make published artefacts available is to setup a Resource URL (Manage Jenkins > System)

You can use https://localhost:8080/ and BOOM! Jenkins is happy to serve you rich html files (or whatever else you want) without compromising CSP!

Hope this helps!

Answer 2

Turning off CSP entirely isn't safe. You should only enable inline CSS and not all the other things that are vulnerable to cross-site scripting (XSS) attacks.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'none'; style-src 'unsafe-inline'; img-src 'self'; script-src 'none';");

Answer 3

Just want to update per my study following this thread especially dragosb's answer. Need first install two plugins: Startup Trigger plugin then Groovy plugin. And don't forget to restart jenkins. After that, in the test project find build steps, from there add Execute system Groovy script before any other build step. And then paste following command:

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","")

Now after build you are able to open report.html and log.html.

I guess by doing this they restrict this security exception to be allowed in project level.

Answer 4

The best solution to this problem is to add or update Resource Root URL in System of Manage Jenkins.

if you are running Jenkins on AWS simply add the Public IPv4 DNS in the Resource Root URL. For example, https://ec2-XXX-XXX-XXX-XXX.compute-1.amazonaws.com:8080 in Resource Root URL.

Note: Hostname of Jenkins URL and Resource Root URL should be different.

Answer 5

Although this is an old post and an answer is provided, I felt the urge to point out new material to enhance the answer. So, sorry for the dead bump, but it is the top search find for this topic after all.

All previous answers I saw proposed setting the default content security policy to a free-for-all, in one way or another. Given the fact that the content can be modified by anyone who runs a build on your Jenkins pipeline, this bears a certain risk. After all, this is a valid setting that serves to minimize the risk of cross-site scripting. This has been pointed out by several comments I've read even in this thread.

To educate further, here are some good resources I found

https://www.jenkins.io/doc/book/security/configuring-content-security-policy/

https://content-security-policy.com/

The following enabled beautiful HTML coverage reports on my managed Jenkins instance. It is pointed out in the Jenkins documentation that setting the resource URL is the somewhat preferred solution, but that was not possible in my case:

1. In the Jenkins web frontend, navigate to the script console.
2. Type System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self' ") and click 'Run'.
3. The setting is effective immediately, so check results by reloading the 'broken' content you try to display. (e.g. your jobs published HTML coverage report)
4. Reverting to default type System.clearProperty("hudson.model.DirectoryBrowserSupport.CSP") in the scripting console.

The provided CSP Header is the so-called starter policy from the second link given above.

This policy allows images, scripts, AJAX, form actions, and CSS from the same origin, and does not allow any other resources to load (eg object, frame, media, etc). It is a good starting point for many sites.

For the case of HTML coverage reports in an access-protected Jenkins instance, I found this acceptable and working.

Answer 6

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

3. Restart the Jenkins Service: brew services restart jenkins-lts

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

https://i.sstatic.net/A60BN.png

Answer 7

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

Answer 8

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

Answer 9

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:

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.

Answer 10

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>

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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.

Answer 16

Go to “Manage Jenkins” -> “Script console” and run below command:

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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';")

Answer 21

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.

Answer 22

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