解决Jenkins的html样式不生效问题的终极方案

本文从四个步骤来分享我们在自行搭建jenkins过程中遇到的报表样式不全（即html报告展示不正确）的问题：

1.问题现象

2.问题原因

3.问题原因补充

4.解决方法（可以直接跳到第四步解决问题）

一、问题现象

1.当你是使用Jenkins的Html Publisher插件来发布报表的时候，可能发现报表的CSS没有加载，如下图：

这张图是jmeter的一个性能报告的HMTL页面，通过HTML Publisher插件发布的，默认安装的jenkins无法展示其CSS效果。

2.这时候我们F12查看chrome的控制台。

这里我们看到控制台报错了，红框里面的那句英文的大概意思是，应用内联样式失败，因为违背了内容安全策略原则。

二、问题原因

什么是CSP?关于详情我们可以看文末的参考部分，我们从对应的官方文档得知：

Jenkins设置了默认规则集：

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

该规则集会导致如下行为：

根本不允许JavaScript

不允许插件（对象/嵌入）

不允许内联CSS或其他网站的CSS

没有允许来自其他网站的图片

不允许帧

不允许使用网络字体

不允许XHR / AJAX

...

三、问题补充

为什么要做这种限制呢，原因其实是防止一些内容安全问题。CSP（内容安全策略）最初是为了减少跨站点脚本的攻击面而设计的，所以此目的是为了网站的安全性问题。

那么我们为什么需要默认设置CSP呢，很多中大型公司的Jenkins一般都是由SCM、运维维护的一个全公司统一在用的这么一个工具，那么在下班回家可能公司的技术人员也会用到jenkins，这时候就会涉及到一些安全问题，比如我们jenkins是通过vpn访问，那么如果绕过vpn直接通过web相关的攻击去破坏jenkins，会不会导致一些数据泄露，又或者是数据丢失，服务器，网络瘫痪问题呢，一般中大型公司对于集团内部的jenkins都会做一些安全性的设置和测试，所以jenkins天然地默认了CSP相关的策略。

四、问题解决方法

既然原因说明白了，那如果想要在自己搭建的jenkins上展现完整的报表就比较简单了，无法是设置一些CSP的参数即可：

-Dhudson.model.DirectoryBrowserSupport.CSP="default-src 'self'; style-src 'self' 'unsafe-inline' www.google.com ajax.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.google.com; img-src 'self' data:; child-src 'self'"

以上参数需要加到Jenkins的启动命令里面：

启动jenkins一般有三种方式：

1. 直接java -jar jenkins.war

2. yum或者apt安装jenkins

3.docker启动jenkins

这里先讲前两种方式，docker修改jenkins涉及到docker的内容（回头会再分享）

1）如果是java 直接启动，则直接在启动参数中加入上述参数

java -jar  -Dhudson.model.DirectoryBrowserSupport.CSP="default-src 'self'; style-src 'self' 'unsafe-inline' www.google.com ajax.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.google.com; img-src 'self' data:; child-src 'self'"  jenkins.war

2）如果是apt install jenkins的安装（Ubuntu），则按照如下操作：

vi /etc/default/jenkins

#JAVA_ARGS修改成粗体部分

JAVA_ARGS="-Djava.awt.headless=true -Dorg.apache.commons.jelly.tags.fmt.timeZone=Asia/Shanghai -Dfile.encoding=UTF-8 -Dhudson.model.DirectoryBrowserSupport.CSP=\"default-src 'self'; style-src 'self' 'unsafe-inline' www.google.com ajax.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.google.com; img-src 'self' data:; child-src 'self'\""

#重启jenkins

service restart jenkins

3）如果是yum install jenkins的安装（centos），则按照如下操作：

vi /etc/sysconfig/jenkins

#JENKINS_JAVA_OPTIONS修改成粗体部分

JENKINS_JAVA_OPTIONS="-Djava.awt.headless=true -Dorg.apache.commons.jelly.tags.fmt.timeZone=Asia/Shanghai -Dfile.encoding=UTF-8 -Dhudson.model.DirectoryBrowserSupport.CSP=\"default-src 'self'; style-src 'self' 'unsafe-inline' www.google.com ajax.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.google.com; img-src 'self' data:; child-src 'self'\""

#重启jenkins

service restart jenkins

五、查看效果

如下图，css的样式完全加载，而且点击右侧菜单可以触发对应的页面切换：

以上就是本文解决Jenkins的html样式不全的整个过程，如果解决了你的问题，恳请您点个赞，后续会分享更多的解决方案的文章，加油~

参考：

jenkins内容安全策略

内容安全策略

欢迎访问我的简书主页。在简书，不仅仅是技术，我们一起读书成长，财务自由，心灵自由。

简书：https://www.jianshu.com/u/f9bd28315d53