解决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样式不全的整个过程，如果解决了你的问题，恳请您点个赞，后续会分享更多的解决方案的文章，加油~
参考：
博主：测试生财（一个不为996而996的测开码农）
座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。
内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。
csdn：https://blog.csdn.net/ccgshigao
博客园：https://www.cnblogs.com/qa-freeroad/
51cto：https://blog.51cto.com/14900374
微信公众号：测试生财（定期分享独家内容和资源）
