Continuous integration solves problems with HTML styles that can't be displayed in Jenkins

For test reports, the aesthetics of the style is important in addition to the concise refinement of the content. A common practice is to use HTML formatted documents and match CSS and JS implement custom styles and animations (such as expand, collapse, and so on).

Jenkins HTML There are two common ways to display documents in:

• Use HTML Publisher Plugin ;
• Use the Files to archive feature to Build Artifacts display the HTML document link in.

The first way with the plug-in, you can use the graphical operation to achieve simple configuration, and the performance is good, and the second is the advantage of using Jenkins the features, do not rely on plug-ins can also achieve basic requirements.

However, either way, it is possible to encounter a situation where the presentation of the HTML report is completely free. View the resource load in the browser Network , you will find that the relevant CSS and all can not JS load properly.

Refused to load the stylesheet ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css‘ because it violates the following Content Security Policy directive: "style-src ‘self‘".Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ‘self‘". Either the ‘unsafe-inline‘ keyword, a hash (‘sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY=‘), or a nonce (‘nonce-...‘) is required to enable inline execution.Blocked script execution in ‘http://10.13.0.146:8888/job/SkyPixel-SmokeTest/34/artifact/reports/SkyPixel-smoketest/34.html‘ because the document‘s frame is sandboxed and the ‘allow-scripts‘ permission is not set.Refused to load the stylesheet ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css‘ because it violates the following Content Security Policy directive: "style-src ‘self‘".

Problem analysis

This behavior occurs because of the Jenkins () that is configured in CSP Content Security Policy .

Simply put, this is Jenkins a security policy that is set to a very strict set of permissions by default to prevent Jenkins users from workspace /userContent archived artifacts being attacked by malicious files in, and HTML/JS .

By default, the permission assembly is set to:

sandbox; default-src ‘none‘; img-src ‘self‘; style-src ‘self‘;

Under this configuration, only loading is allowed:

• Files hosted on the Jenkins server CSS
• Picture files hosted on the Jenkins server

The following forms of content will be banned:

• Javascript
• Plugins (object/embed)
• Inline style sheets () in HTML Inline style sheets , and referenced outbound CSS files
• Inline pictures () in HTML Inline image definitions , and picture files referenced by outbound stations
• Frames
• Web Fonts
• Xhr/ajax
• etc.

As you can see, this restriction is very restrictive and it's easy to understand why we HTML can't show the pattern properly.

Solution SolutionsInterim Solution

The way to solve this problem is also simple, which is to modify Content Security Policy the default configuration.

To modify the method, enter the Manage Jenkins Script console following command and execute it.

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

When you see the following results, the configuration changes are already in effect.

Build again, and the new build HTML will show the style as normal. It is necessary to note that this operation is not valid for the report generated by the previous build HTML .

Permanent Solutions

However, there is a problem with this approach: the configuration is only temporary, and when restarted Jenkins , it Content Security Policy reverts to its default value, so the style is not HTML displayed.

Currently, Jenkins there is no workaround for the official, and we can only Jenkins re-modify the security policy each time it is started or restarted.

It is possible to repeat the work manually, but it is not a good solution.

Back to the moment Script console , we will find that the command we execute is actually a piece of Groovy code, so if we can implement Jenkins the code automatically every time we start, it will Groovy solve our problem as well.

Fortunately Jenkins , there are already corresponding plugins:

• Startup Trigger: It is possible to Jenkins trigger the build when the node (Master/slave) is started;
• Groovy plugin: Direct code execution is possible Groovy .

After searching for the installation startup-trigger-plugin and Groovy plugin, we can configure it.

The configuration is as follows:

• Create a new job that is dedicated to Jenkins the configuration commands that are executed at startup;
• Build Triggersunder the module, tick the Build when job nodes start box;
• Buildunder Modules, Add build step enter the Execute system Groovy script Groovy Script configuration command in System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "") .

It is important to note that when you add a build step, you should choose Execute system Groovy script , not Execute Groovy script . The difference between the two is, in short, the Groovy Script equivalent of running in a master/slave system environment, and JVM system groovy script running in Jenkins master the same environment as the JVM previously mentioned Jenkins Script Console functionality. For more information, check out Groovy plugin the detailed instructions.

At this point, we have completely solved the HTML problem of style presentation anomalies.

But there is one more thing to pay attention to, in the demonstration in this article, we modify CSP ( Content Security Policy ) configuration closed all security policy, hudson.model.DirectoryBrowserSupport.CSP is set to empty, in fact, there is a great security risk.

Correct practice, we should be combined with the actual situation of the project, select the corresponding security policy. For example, if we need to enable script file loading, but only for files hosted on the Jenkins server CSS , you can use the following configuration.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; style-src ‘self‘;")

In addition, CSP you can implement very granular permissions configuration, detailed configuration can be referenced Content Security Policy Reference .

Continuous integration solves problems with HTML styles that can't be displayed in Jenkins