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

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.


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


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

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